Skip to content

How Web works?

When we type a URL in browser in order to open up a new web page, then the browser which is also called a client sends the request to the server where the webpage is hosted and then the server will send the response back which contains the web page that we requested. This process is called Request-response model or Client-Server architecture.

The process will be same when we request data from API.

In the url https://www.google.com/maps
http or https is a protocol that will be used on the connection.
www.google.com is domain name
maps is a resource that we want to access.

Domain name is not a real address of the server that we are trying to access. It's just a name which is easy to memerize. Therefore we need to convert domain anme to the real address of the server, this can be done through DNS.

DNS is DomainNameServer which are sepcial servers like phonebooks of internet.

Fisrt step - DNS Lookup

When we type a URL in browser, then the browser send a request to the DNS and this server will match the web address typed in browser to the server's real IP address. This happens through the Internet service provider.

The real address looks like https://216.58.211.206:443
in which 216.58.211.206 is IP address of server
443 is port number (Default 443 for https and 80 for http)
Port number is just to identify the specific service running on the server. port number has nothing to do with the resource (which we request for).

Second Step - TCP/IP Socket Connection

Once we have the server's real address, a TCP/IP socket connection will be established between browser and the server. This connection will be alive until the browser receives all the files from the server.
TCP is Transmission Control Protocol and IP is the internet protocol. These are communication protocols that define how data travels across the web.

Third Step - HTTP Request

The request we make for the server is HTTP request.
HTTP is HyperText Transfer protocol, one more communication protocol that allows two or more parties to communicate.
In this case, HTTP is just a protocol that allows clients and web servers to communicate by requests and responses messages.

HTTP Request message looks like

GET/ maps HTTP/1.1
Host: www.google.com
User-Agent: Mozilla/5.0
Accept-Language: n-US

BODY

The start line request is important which consists of HTTP method that used in the request, the request target and HTTP version.

Important HTTP methods are

  • GET for requesting data
  • POST for sending data
  • PUT and PATCH to modify data

request target tells the server that we want to access the specific resource i.e., maps resource here. If the resource is empty, then we will be access to the website root.

HTTP request headers may be in different types like what browser is used, at what time request sent etc.,

Request will have a body, if we are sending any data to the server with the data in it.

The main difference between HTTP and HTTPS is that HTTPS is encrypted using TLS(Transport Layer Security) or SSL(Secure Sockets Layer). Besides, the operation logic is same for HTTP and HTTPS requests.

Fourth Step - HTTP Response

Now once our HTTP request hits the server, the server works on the request and sends back our website using HTTP response

HTTP reposnse looks like

HTTP/1.1 200 OK

Date: Fri, 15 May 2020
Content-Type: text/html
Transfer-Encoding: chunked

BODY

start line will have HTTP version, Status code and Status message.

Status code tells whether the request is sucessful or not.

Response header is the information about the response which are of different types like response time, content type.

Most repsoses will have body and body will have the html of the website we requested.

Fifth Step - Scans the file

Once we get the HTTP response, initial html file will be loaded. This file will be scanned for JS, CSS, images to built the entire website. For each of these different files, the browser will send new HTTP request for server. Thus, multiple requests and responses will happen at the same time but the amount is limited. When all the files have arrived, the website is rendered in the browser according to html,css, javascript specifications.

TCP/IP are communication protocols that define the data travel across the web.
The Job of the TCP is to break up the requests and responses into thousands of small chunks called packets before they are set. Once they reach their destination, it will reassemble all the packets as original response or request. So that message arrives the destination as quickly as possible, which would not be possible we send the message as a big chunk.
The job of the IP protocol is to send and route all the packets through the internet. This ensures that all the packets arrive to the right desination as per the IP addresses on each packet.

Front-End vs Back-End Web Development

  • Front-end development is about everything that happens in the web browser. This is all about designing and building the website, which will be visible to the user. Therefore, the name is front-end.
    The front-end developer uses technologies like HTML, CSS and JavaScript. The lists continues like React, Angular etc., These together form the fornt-end stack.

  • Back-end is the web development that happens on the web server, which is invisible to the users. Therefore, the name back-end.

Basic server is just a computer that connected to internet which first stores files like HTML,CSS and images and second,runs the HTTP server that is capable of understanding URLs, requests and also delivering responses.
Therefore, it is a bridge between front-end and back-end of a web application. This type of simple server is a static server, as it can only serve static files to the client through HTTP.
To create dynamic web applcations that talk to database, we use a server that capable of running dynamic applications.

In dynamic server, we can have our app running, a HTTP server and files all talking to each other. when we built dynamic application, we also use a database which we can access from the applciation. We use database for users, application data, text to fill a website template.

The most common database used for NodeJs applications is MongoDB.

Static Websites vs Dynamic Websites

  • Static Website is when a developer uploads a final ready to send files of website on the web server. These files usually contain HTML,CSS, javascript, images etc,.
    These are the exact files, which the server sends back as reponse when there was a request for website. In this case, there won't be any work done on the sever, there won't be any backend code.
    Thus, it will be a static server rendering static files.

  • Dynamic websites usually contain a database, an application running like NodeJs app, which fetches data from database and then together with a predefined template, builds each page that user requests dynamically based on data coming from the database.
    So, when a browser requests, page is then built as HTML,CSS and JavaScript files and these will be sent back to the browser as a response. This proceess is called server-side rendering.
    Thus, this is called dynamic as the website gets changing all the time based on the data in database.

Dynamic Websites vs API-Powered Websites

  • In API websites, we will have a database and an app that fetches data from database each time a client makes a request.
    Upto this, Dynamic and API-powered websites are similar and they work dynamically.

  • With an API, we will only send the data to the browser usually in JSON data format but not the entire web page. There won't be any HTML and CSS and therefore, the browser is not ready to display website.

While building API websites, we have two steps:

  • building an API
  • Consuming an API

API stands for Application programming Interface, which allows applications to talk to each other.
At client side, the website will be assembled by plugging the data we received into some templates using front end framework like react, angular etc,.
Thus, while building API-powered website, the building phase of website moved from back-end to the front-end or from server to the clinet.
Therefore, dynamic websites are called server side rendered as they actually built on servers, whereas API-Powered websites are called client side rendered.

API which we build can be consumed by other clientsI(such as mobile apps) than just the browser,whereas dynamic server will be consumed by just browser(as these are with HTML and CSS). Thus, we have huge advantage of building API rather than server side rendered.