How do websites work?

Whenever we hear the term "Web Development", it brings a lot of terminologies along with it- Frontend, Backend, Client, Server, Full-Stack, MEAN Stack, API, Database, HTTP, etc. Most of the people who have been working on application development (whether it's the web, Android, or iOS) for quite some time understand these terms, their interconnections, and their individual roles in making the web work. But the ones who are relatively new to this domain often are unable to see the whole picture sometimes even after having a good knowledge of the individual pieces that I mentioned above.

I will attempt to draw an analogy between the working of the Web and the working of a bank. In my view, this analogy really simplifies things.

Let's say Chirag has a savings account "D" with a bank (let's say S). Today, Chirag needs to withdraw some money from his account and he goes to the nearest branch of the bank for the same. One of the bank's employees Aakriti at the desk suggests Chirag fill a cheque with all the details on it. Aakriti then submits Chirag's cheque for clearance. Once the bank's internal system verifies that Chirag is the authorized person to make a withdrawal from the account requested, Aakriti gladly provides Chirag with the amount of money requested by him.

In this example, Chirag is the Client as he is the one consuming service of the Bank and the Bank "S" is the Server as they have been providing the service in this case. The savings account Chirag is having is a Database that stores Chirag's money and other information. The cheque that Chirag filled was an HTTP request (to be specific, a GET request). (In the upcoming posts, we will dive deeper into some of these terminologies). Since there can be so many customers of a bank, it would be impractical to design a separate system for each and every customer. So, the bank creates some protocols to be followed which would enable the client-side processes to interact with the server-side processes. This set of protocols is an API (Application Programming Interface). The bank also employs some dedicated people like Aakriti who will act as an endpoint in this communication channel to whom the clients can directly reach out to get their work done. These are API endpoints. So, effectively this is a long communication channel. At one end, customers put their different requests which reach to the bank, go through some internal processes, and then again from the other end the response (HTTP response) of that request travels back to the customers- either a successful response or a failure response.

Now, if we see through Chirag's perspective, all he did was submitting that cheque to Aakriti. He doesn't need to know what happened inside the bank's system or through what processes the cheque had to undergo. All he cares about is that he should receive the money he needed. So, everything that happens behind the scene which Chirag doesn't know about is called as Backend (often used interchangeably with server-side). This includes the authentication process that occurred and also the way in which his account details are stored in the Bank (Server + Database). However, he did interact with Aakriti and he knows whenever he needs to do some transaction for his account, he needs to interact with one or more employees of the bank. These employees are the endpoints that the Client needs to know about for getting their work done. What happens after these endpoints, the client doesn't care about. He then only waits to receive a response regarding his transaction again from the same endpoint. So, everything including coming to the branch and communicating the required service to one of the employees (calling the API) along with submitting a cheque (sending an HTTP request) comes under Frontend (often used interchangeably with client-side).

Usually, in an application, developing anything that a user can see and interact with comes under Frontend development / Client-side, and developing the things happening behind the scene from the user's perspective is called to be Backend development / Server-side. In my view, Frontend and Backend are relative terms and can change based on the standpoint of a user.

Let's try to extend the above example. Let's say Chirag's children at home had requested him to bring some chocolates for them. Chirag, who just got the requested money from the bank buys some chocolates and other food items for his children at home. Then from the point of view of those children, even the bank's branch, employees, and the cheque submitted becomes a Backend (which was frontend from Chirag's view).

This way it's even possible to build a chain of applications linked through APIs at each step.

Now, coming to the Application Development world, as a general rule of thumb, things like the User Interface (where the user interacts with our app through different buttons, texts, forms, etc.) and what to do when a button is clicked (or any other event happens) including hitting an API endpoint comes under frontend. If you are someone who is developing this part of the application, you are a Frontend Developer. Everything happening on the server-side like authentication, authorization, fetching data from a database, returning an appropriate response to the client's request, etc comes under the backend. If you are someone who is developing this part of the application you are a Backend Developer. And if you are developing both parts of an application you would be called a Full-Stack Developer.

MEAN Stack is a JavaScript-based full-stack involving some very specific technologies - MongoDB, Express.js, Angular(.js), Node.js

Some other variations of MEAN stack are:-

MERN Stack- MongoDB, Express.js, React.js, Node.js

MEVN Stack- MongoDB, Express.js, Vue.js, Node.js

We will talk more about these technologies, prerequisites, and some great online resources to learn about them in the upcoming posts.