WEB APPLICATION ARCHITECTURE

How Web Application Works

It is important that you understand how a Web application works before you start to develop.

A Web application is a combination of many small programs, and all of these programs work together to serve a purpose.  At the very least, a Web application has a front end, a back end, and a database to store the data.

let’s try to understand it with the help of the below illustration.

Front End and Back-end Illustration:

So, here you are, trying to view your favorite video on https://www.youtube.com or if you are a technical person like me, then maybe a video on Lynda / LinkedIn https://www.linkedin.com/learning/  So, you opened your browser and clicked on a video.

Purpose of Application Server and Database Server:

Now behind the scenes, it will send a request to the YouTube application server and your identity like this user requesting this video. Your application server is going to process this request. It’s going to check your identity if you are a genuine user or not, or if you have a subscription or not. And, then it’s going to request the data from the database server. So, the database server will have the video files that you may want to view.

This database server is going to return the response to your application server back or maybe a link to the video file where the video file is stored, and then your application server is going to send back the response to your browser, please play this video file from this location.

In general, when a user interacts with the application, this layer is called the front end. So, this is the application UI that a user can see, and your application server and database server are called back end, because a user cannot see these servers and how the request is processing there.

And, if you remove any of the elements from this illustration,  So, let’s say if I remove my application server, your application will stop working because there is no server to process your request which can identify which video you are requesting and where is it stored. And, if you remove the database server, then your video file will never be stored, and you can never view it.

And let’s say if you remove the front end, then the user will not have any place to interact with your

application. So, all these three elements are essential for an application to work.

So, I hope this clears your mind about what is a front end and what is a back end.

Another Example to Understand how Front-end and Back-end Works:

Now, let’s try to understand it with the help of an example.

So, here I am on the Airbnb website, which is how it looks when a user types in https://www.airbnb.com/ in their browser. So, the UI has multiple elements which a user can interact with. Like, I can search for the places to stay, I can search for some of the experiences that I want to explore, maybe I want to go to Thailand then I can search for those experiences here. I can scroll down and check for all the other services that Airbnb provides.

So, this is a front end where a user can interact with the application. Now let’s try to search for some places to stay in Thailand. So, I’m going to stay from the 1^st of June to the 25^th of June, and let’s say we are two adults and two kids. Now, let’s click on this search button.

So, as soon as you click on the search button, the request is sent to the Airbnb application server and the Airbnb application server will process your request.

The server will know that you are looking for some places in Thailand. Now, this application server

is going to make a request to the Airbnb database server and it’s going to ask about all the places to stay in Thailand. The database server will respond back with the data.

Your application server is going to process this data and it’s going to pass this data in a form that your front end can understand or your browser can understand. Then, it’s going to return this process response to the browser and here, you will see the results on your browser.

You can keep on interacting with this application here and it’s going to keep on sending the request to the application server to process your request. So, this is how in general a Web application works.

So, we can say a Web application is like a restaurant where you have a seating area from which a person can read the menu and order a food item. This order will be sent to the kitchen, where the order will be prepared. To prepare the order, the chef will need some ingredients which will be stored in a larder and a chef can pick some ingredients based on the order. Again, here we can say the seating area is the client site or a front end from where the user can interact with your application, or in this case, the user can place an order. The kitchen is the back end of our application server where the request will be processed, or the order will be prepared.

And larder is our database where you will keep your ingredients or the user data.

So, this is a classic example to explain how a Web application works and I hope now you understand how these different elements interact with each other to serve a single purpose. In a Web application, a front end is always designed in such a way that it can attract the target audience or the users.

So, this is how a front end looks, where you see natural beauty and a happy father and his son but, if you want to work on the back end, then this is how it looks. So, sometimes the back end can be messy, and it doesn’t look as good as your front end,

If you have any questions, please comment, and reach me at yousuf@infotechabout.com