From surfing the web to zeros and ones
Opening your favorite browser and accessing your favorite website feels like owning a magical device that shows exactly what you want. But have you ever wondered how does ALL of that work?
If you are a web developer you know that when someone hits a button on a website an action will be executed through some code because there’s an event listener expecting that to happen. It’s great you can understand how this happens, but if don’t, no worries.
Performing a simple button click on a website involves lots of layers of abstraction. I’ll explain a little bit of how everything works from that button click to a computer understanding it based on 0s and 1s.
1. Requesting a connection
Let’s start with that top bar where you write a Uniform Resource Locator¹ or simply URL. You’ve probably noticed there’s a syntax for writing that and each part means something. Suppose you visit the link http://localhost:5050/folderX/index.html?clap=yes on your computer right now, you are likely to get an error UNLESS you are running a local server on port 5050 with an HTML file being served on the specified path.
But of course, you are a normal human being and you are much more likely to visit www.google.com/ on a daily basis. By doing that, your device establishes a connection with another physical device, where google's website is served from. But how does it know where it is at, and why can’t that address actually point to your website?
By connecting to the internet you are assigned an Internet Protocol address or IP address like 177.168.0.245, and if someone wanted to access a website on your computer, they would need to know a location to access, which would be your IP.
But unlike in the primers of the internet, you don’t have to remember those numbers any time you access a website. And that is thanks to something called Domain Name System (DNS), which is, in essence, a directory with names that match to an IP.
This means you can get a different address depending on your location, regarding which server you will access if there’s more than one, and also makes sure you don’t miss out in case the website’s IP changes.
But the DNS server is not one huge database stored in one specific location, instead, the directory is distributed around the world, stored on domain name servers that all communicate with each other to improve performance and add security.
There is a non-profit organization (ICANN) that gives permission to companies (Domain Name Registrars) to sell domain names and through these companies, you can acquire urawesome.net and assign it an IP address. This involves annual payments.
Websites usually have a fixed IP address, and that makes things easier. The normal user can be assigned a new one when accessing the internet.
So now your browser knows the address it needs to access that given website, it is time to establish a connection. Signals are sent from your device, going through your internet router and modem.
2. Establishing a connection
You may own one single device that does the job of the two mentioned above. The modem allows the conversion from digital to analog signals and vice versa, which enables communication with your Internet Service Provider (ISP) through an ordinary analog phone line for instance.
The router has a very important job when sending packages (data) to the internet. It is the first stop for the information you are trying to send, and it contains amongst other fields, the sender and the receiver IP address. For your package to arrive on the desired destination, the router sends it through other routers connected to the internet, which creates a ‘way’ for the data to travel.
As you can see, there exist many possible paths for information to travel, resulting in different travel times. Thanks to IP addresses being hierarchical, meaning 182.001… is likely to be on the same large network as 182.134…, routers implement a forwarding table, containing IP addresses prefixes that allow for the best route to be used.
When the message arrives at twitter’s web server, the so-called backend will process your request. If you are trying to access the site, the server will likely send you files that compose a front end, the website itself. Assuming you clicked the follow button on someone's profile, the server extracts data from that action and alters a specific database entry which is the users you follow.
3. Performing an action (High-Level)
Take a look at the following simplified node.js code:
The backend is responsible for checking if the URL that the request is being sent from matches a certain user, and if it does, the ‘follow’ function is executed and you are now following the user. All of this information is stored in a database, so the above function makes changes to this database.
The programming language that moves the web, JavaScript, was used in the above example. Even if you are no programmer, you can read the code and try to understand a little bit of what it does.
That is thanks to JS being a High-Level Language, which allows for writing human-readable code. The machine, however, doesn’t directly understand such language thus it goes through a process of compilation (or Interpretation) to transform that code into machine code. I’ll show how both processes work and what are their main differences.
4. Performing an action (Low-Level)
The process of compilation takes the original code and analyzes it lexically, syntactically, and semantically to create a binary platform specific executable file. This means a C++ code looks different on a Mac and a Windows device when compiled because these two work on different architectures.
The process of Interpretation takes the code through an Interpreter, which is a program that will execute your lines at run-time. The interpreter can be thought of as a middleware that does the compilation on the go, adding optimizations.
JavaScript is an Interpreted language. There’s quite a big discussion on wheater it's interpreted or compiled tho.
The code you read is actually translated to Assembly which is a Low-Level Language that communicates easier with the hardware but isn’t that simple to read, and then becomes something like 0010010111101101.
Zeros and ones. But why not zeros, ones, and twos?
The “brain” behind your machine is a giant set of electronic components forming circuits, and they can get ON or OFF electrical signals. Binary.
Take a look at the logic gate below, it performs the AND logic.
You can see it has two inputs and one output. If you enter the values 0 and 1, the result will be 0. Enter 0 and 0, the result is 0 again. It only returns 1 if both values are 1.
You might be familiar with such boolean logic.
Now let’s see what the Exclusive OR gate looks like.
Only if A and B values are different, the result will be 1.
Combining these two it's possible to make a Half Adder circuit, used to sum 2 bits.
The Half Adder circuit is limited, it only accepts two inputs. Because of that, there also exists the Full Adder circuit, but let’s keep it simple and see how the first one works.
Both components receive both values. Setting A = 1 and B = 1, Sum will result in 0 and there will be a Carry of 1.
Meaning 1 + 1 = 10, which is 2 in decimal notation.
There are millions of tiny components like the ones above in your CPU, and together they perform everything from a button click to opening an application or calculating the result of 2 + 2.
Quite a lot of information right? And definitely, every single step could have a dedicated post about it, and even though I haven’t covered everything, I believe this post serves its purpose of opening your mind about what’s happening while you read it.
謝謝你
