DEV Community: Nida Shaikh

How the Web Works (For Backend Devs)

Nida Shaikh — Thu, 01 Oct 2020 15:03:06 +0000

As beginners, we always seem to hear these terms: front-end and back-end. Initially, we are too afraid to ask what that means. We usually Google them. And that's when we know, front end deals with user interface code and back end deals with the server-side code. But then, they are the Lemon and Water of the Lemonade. They both combine to create the wonder we know as the World Wide Web.

In my previous post, I discussed how the web works for front end developers, how the Internet mainly consists of Clients and Servers. I touched topics of requests and responses, and how does the Client handle the responses to give you a seamless User Interface. The Lemon of our Lemonade.

Let's talk about Water now.

The Server

We know that when the Client requests, the Server responds. The Server is 100% responsible for what those responses are. It controls what happens to the resources and data and how to send them to the Client. We'll look at the most basic website server configuration.

So a server is a machine that is connected to the Internet. It has its IP Address. The reason why your machine has an IP Address but no one on the Internet can access files in your machine is because you don't have a web server software running on your machine.

When you have a web server software running on your machine, it will listen to requests, and it has access to specific files and folders on your machine. You can configure different hosts to different folders.

Let's take an example of our very own dummy site. Suppose my web server and file system are configured in the following way:

If I request for www.dummysite.com, without any path, the Server will respond with the index.html file, with Content-Type: text/html.
Likewise, if I give it a path, like www.dummysite.com/login.php, it will look through my file system and check whether it exists. Hmm.. let's see if a login.php file exists. Oh, it does! Let's send that back as a response and since its a PHP file, it is smart enough to send the response with Content-Type: application/x-httpd-php. Similar for the style.css file.

Let's see how Google does it.

authority = host + port number
The Host is either domain name or IP Address, and the port number for HTTP is 80.

As you can see in the image, the authority is said to be www.google.com. So when it gets the request for the same, your webserver goes like, "ah... google.com? Let's look inside the specified folder in the filesystem." So a basic web server will give you the file you request. That's it, not very smart stuff.

So the key job for the Server is, it forms a Uniform Resource Locator that consists of:

Protocol (HTTP, HTTPS)
Domain Name (www.dummysite.com)
Port Number (80, for HTTP, and it is not visible to us)
Path to the File (/styles/style.css) And together it becomes http://www.dummysite.com/styles/style.css

By using this URL, you are actually navigating through the server's files, and your browser knows what to do with those files and you can view and interact with the website.

So that's the job for a server, which interacts with the backend code. It works for most websites that can be built and run smoothly and without any hassle.

But surely, websites like Facebook, Twitter doesn't do this! They have to manage users and posts and likes and comments, all that stuff. They're not responding with just a .png file. So how does a complex website handle all these things?

We will look into that in the upcoming post!
I hope that I could make this jargon easier for you :)
Till then, signing off!

How the Web Works (for Front End Devs)

Nida Shaikh — Sat, 26 Sep 2020 15:10:26 +0000

Before we start learning how to make websites, we need to know how the Web works. That's one of the mistakes I did when I started my web development journey - I started by building websites, but I never made an effort to understand the platform my websites are going to work on.
I say it's an honest mistake because, as Socrates said, we don't know what we don't know. We don't know what to Google, and in turn we don't get exposed to the crucial things we need to know!

Here's my attempt to explain how does the Internet work, from a web development point of view.
Let's get started.

Everything on the internet is either a Client or a Server. The Client requests and the Server responds. Simply put, your machine, uses your Browser to request some resources from a server, and the server responds. And the server is another machine connected to the internet. That's what is happening overall.

So here, the Client can be anything - your mobile phone or laptop, using any browser, like Chrome, Firefox, Edge.
And, the server would be the websites, web services or apps you are trying to access.

Let's go into a little depth.

Every machine on the internet has an IP address. An IP address, which can be used to access anything that is connected to the internet. In fact, your laptop has an IP address too. But the servers are special kind of machine that have some resources to offer. So whenever you, as a client, type in any website in the browser, say www.google.com, you are directed to a Domain Name Server (DNS) Lookup. A DNS is like a table that maps domain names (like google.com) to it's IP Address.
When you visit www.google.com, you are sending a request to Google's Servers.
In return, Google's server will give you a response. The response typically consists of Content-Type. This property helps the browser evaluate what type of content has the server responded with. Now, visiting google.com might respond with an HTML webpage, that the browser will recognize by its content-type: text/html, it will now what to do with it. It will parse the response as HTML file.

Suppose we got the following HTML as response:

<html>
   <head>
      <link href="/styles/main.css" />
   </head>
   <body>
     :
     :
     <script src="/javascript/app.js" />
   </body>
</html>

Here, when the browser comes across the <link> tag, it would say, 'ah, I need this asset for this webpage. Let's request this from the server.' That's when the browser would request the main.css file, and the server will send over the file, with the Content-Type as text/css. Same goes for the <script> tag.

Let's see an example:

This says, content-type : image/gif. So the browser knows that this particular asset is an image and it displays on the webpage accordingly.

You could just Inspect Element on any webpage, and go to the Network Tab, click on any asset that is returned. It will show you the corresponding request and response!

Some other requests and responses you could look out for:

method: The HTTP Methods enable the client to specify the action to be performed with assets or resources.
cookies: Cookies are small pieces of data that are stored in your local machine to remember useful information, or record your browsing activity.
status code: These are the codes issued by the server in response to the client's request.

There you go! Now, you know what you don't know. In the end, I would like to say that knowing how the web works wouldn't contribute to writing building websites in the short run but will yield long term benefits because you know what is happening behind the scenes.

Did I miss something? I would love feedback.
Signing off!