Web Architecture Simplified

In order to understand the working of websites and the relation between backend and frontend we are going to use a simple example of a restaurant. All of you must’ve been to a restaurant or a food joint at least once so this should be easy to relate. every restaurant has 3 major parts

• The hall/counter : this is the place where you actually order and eat your food. You’ll have waiters moving around handing you menus from which you can select the food and order it.

• Kitchen : This is where the food is prepared by chefs.

• Inventory/storage : here the raw ingredients for your food are stored.

So first you make an order from the hall/counter to a waiter, the waiter then goes to the kitchen and informs a chef about that order, based upon the order the chef then picks up raw ingredients from the inventory and starts preparing food, once the food is prepared the waiters serve it to you. Believe it or not , websites also work in the exact same way where instead of food you’re just ordering data ( files , images , videos etc ).

So on a website ,all the webpages that you see are similar to the hall/counter of a restaurant. These are user interfaces made specifically to let you access the data that websites can provide through buttons, search bar, links, text etc. just like customers are attracted to fancy furnished restaurants, websites are also designed with attractive images and vibrant colors so that people get attracted and use them. The designing of such interactive user interfaces and setting them up to exchange data from the server comes under frontend development.

The backend comprises two things , server and database , these are analogous to the kitchen and inventory in a restaurant. Just like , from the counter , waiter brings in orders to the kitchen Similarly from the frontend the Http requests brings in orders of data to the server , the server then goes to the database, picks up the required data, sets it in an appropriate format ( cooks it ) and then sends a response back to the frontend which the user sees. This entire workflow of dealing with request, response and database comes under the backend.

For example , suppose you go to amazon.com and type “Samsung Mobiles” on the search box and press enter, within moments you’ll get all the latest samsung mobiles sorted ,based upon their ratings , popularity, price etc. Let us see what actually happens behind the scenes

• The search box is the frontend component here that’s enabling you to get data from amazon , so as soon as you type “Samsung Mobiles” in it and press enter, a Http request carries your message to the amazon server ( like a waiter ) through your ISP.

• Once the request reaches the server , the server then goes to its database to bring back raw data. Amazon's database will have records of all kinds of Samsung phones , their price, date of launch, units sold, left etc so the server fetches some of such entries from the database and brings them back.

• The data obtained from the database is raw and not at all organised , the server then processes or cooks the data ( sorting, filtering etc ) and converts it into a form that’s organised and readable.

• Notice how there are filters for price ranges, location , ratings on the search page of amazon, when your browser sends http requests to the server these filters are also sent so while processing the raw data the server applies these filters and then responds with the final data back to the client/frontend

• Finally the frontend receives the data , and displays it to you.

Now you have a pretty good overview of how a website works so now we can dig a bit deeper into details about browsers and web pages. So in the most basic form a browser is a tool that lets you make http requests to fetch your data . Whenever a user requests a web page ( by typing a URL in the search box ) the browser then carries that request to the server and retrieves the data for the user ( explained in section 1 ).

Now before we move forward you need to understand what comprises of a webpage and how it works in real time

Webpages

Now we have discussed earlier that whenever we want to access a webpage , we enter its URL onto the browser , and after the request response cycle is done ,we receive 3 files from the server having extensions .html,.css and .js. The browser recognises them and thus renders the website. But what is their actual significance ? What do each of these files contribute towards a website? let’s find out !

Understand it this way , suppose you’re building a house , in the most basic steps how will you proceed ?

• Once you've finalised a design on paper you will build the base and the initial structure of your house with bricks, steel rods and cement. At this point you only have a skeleton to specify the various components at their most basic level.

• Next comes the decoration, now you want to make it look good so you paint it, add accessories and decorate it with apparels.

• Finally you bring it to life by making resource connections of water, electricity, gas etc.

So the above three files also have similar functions in the final render of a web page.

• Once you've finalised a design on paper you use HTML to layout the initial base and components of your design which you’ll style and modify later.

• Next, once the HTML skeleton is ready a CSS file ( Cascaded style sheet ) ,as the name suggests ,is used to add styles, animations and all the decorative stuff to your HTML.

• Finally a Js ( Javascript ) file adds life to your webpage, it enables the server side data exchange ,advanced animations, button click events and overall helps with adding any kind of logic you want.

Don’t worry if this is not making sense now ,Let's explore each of these files individually so that it makes better sense.