Systems thinking

In this post I’ll discuss how the internet works and why understanding it at a high level is important for vibe coding. I’ll walk us over with an example of a product that I used to work on: the Facebook newsfeed.

How the Facebook newsfeed works

The Frontend

There are two main entry points for you to make a post on the Facebook newsfeed: the browser on your laptop and your mobile application. Both of these are considered clients because they run on your devices, as opposed to Meta’s.

When you go to facebook.com, your browser queries an entity known as the DNS resolver for the ip address associated with that domain. Your browser then fetches the resources provided by the server on that ip.

These resources are HTML, JavaScript and CSS files. Your browser has an engine that knows how to interpret that code, which in turn renders the website that you just visited. As you click around in the web application, frontend code gets executed that usually communicates with the Facebook servers.

APIs

Application Programming Interfaces are essentially that: windows exposed over the HTTP protocol.

We can think of them as a set of rules that define the information that a client can send to the server and the data that it returns.

The Backend

When you open facebook.com, one of the API requests that the frontend code makes to the Facebook servers is for the data to render the Newsfeed.

The Facebook web server has to bundle all the data that it needs to return, namely, the list of sorted posts to display. So it calls a different server, the Newsfeed server.

The Facebook web server is written in PHP (different from the browser’s JavaScript code) and the Newsfeed server is written in C++. But it doesn’t matter! That’s the beauty of the internet and APIs. They can all communicate through a single, well-defined idiom.

The Newsfeed server, in turn, reads data from the databases and runs machine learning models (written in Python) to “rank” the posts and return them all to the browser.

The Facebook frontend makes more requests to the backend. All of this happens very quickly. It’s invisible to the user.

Databases

The last thing are databases. All the stuff that I have mentioned so far is stateless. Code stores no data, it just executes instructions. To keep track of the name of your users, their posts and their friends, we need a physical place to store that data and those relationships.

That’s what databases do - they persist data, that stays saved even if you close your browser or if the Facebook servers crash. They themselves live in a different server.

The World Wide Web is composed of many different pieces

Why it matters for vibe coding

The nitty gritty details don’t matter. With LLMs, you don’t need to know how to write JavaScript, PHP, C++ or Python. But if you understand how web applications work, at a high level, you’ll know how to communicate with and help your AI coding agent.

If you understand that browsers download the frontend code and execute it you’ll understand why it’s not a good idea to store API secrets in the frontend.

If you understand what kinds of processes are better to run on the backend or that you can have multiple backends, you’ll architect better software. You’ll take a moment to think about the flow of data and to design better APIs.

If you understand that databases run on separate servers and that they’re their own piece of infrastructure you’ll understand why setting up development, staging and production databases is not straightforward.

The World Wide Web is already composed of many different pieces. You don’t need to understand all the little details but you’ll be more successful is you understand how the bigger picture works.

We could think of vibe coders as architects that employ multiple LLMs.

This is what is known as systems thinking and it’s one of the skills that will let you build bigger and bigger and more complex applications.