How Does a Web Application Work?

What is a Website?

A web application can range from being a simple static frontend, to being a fully-fledged and dynamic 3-tier application. Choosing the appropriate architecture for a web application must be done before development, and key aspects must be considered.

Here, we will focus on the 3-tier application, which typically consists of three main parts: the frontend, the backend, and the datastore. Although they work together, they have distinct roles.

The frontend is the visible part of the application that the user interacts directly with. It is the graphical interface that we see and interact with and runs in our browser. The basic technologies used to create the frontend are the languages browsers understand.

HTML is used for the structure and content of the pages, CSS is used for styling and visual design, and JavaScript is used for interactions and dynamic effects. However, only some people today code a website directly in these languages; instead, they use frameworks, which are layers on top of these languages, such as React or Angular.

On the other hand, the backend is the invisible part that handles processing, calculations, and data management: it takes care of all the logic of the website. It is a program that runs on a server and is interrogated by the front end whenever some logic is needed. Thus, backend technologies are more varied, with frameworks based on numerous languages like JavaScript, Java, Python, or PHP.

Finally, the datastore is a system that stores all the data that needs to be stored. The challenge here is to save potentially huge amounts of data durably while allowing quick reading of existing data and quick writing of new data.

There are several types of datastores to choose from: databases, buckets, Redis instances … Databases are the most common ones, with technologies such as MySQL, PostgreSQL, MongoDB, or Oracle.

Thus, the frontend, backend, and datastore communicate with each other to provide a complete user experience. Typically, when we fill out a form on the frontend, the backend will receive, process, and store our responses in the datastore and then send back the appropriate content to be displayed on the frontend.

Running a Website

After developing a website, we must choose where to run it. For it to be available to everyone at all times of the day, a server is needed to perform operations, store data, and store the site's code. While this used to involve managing your servers, it is commonly done in the cloud today.

With cloud platforms like Amazon Web Services or Google Cloud Platform, companies or individuals can easily rent server resources according to their needs without managing the underlying infrastructure: it is more flexible, economical, and reliable.

Thanks to tools like Docker, it is also possible to package a website's different parts (e.g., frontend, backend, and datastore) in a standardized format used by these cloud providers: containers. This standard allows for identical deployment regardless of the environment or technologies used: cloud or managed server, production or testing, Python or JavaScript, MySQL or MongoDB.

Finally, since these containers are standardized, they can also be managed by other tools like Kubernetes or AWS ECS to do, among other things:

• Autoscaling, so our application can adapt in case of traffic spikes
• Rolling updates to automate the update process without unavailability
• Self-healing to restart the site if it crashes automatically

Communicating with a Website

Once a site runs on a server, developers must manage its communication. How does entering http://padok.fr/en/blog in our browser allow us to access and interact with this website? There are several answer parts here that we will explain step by step below using the following example:

First, our browser will make a DNS request to translate padok.fr into an IP address (steps 1 & 2 in the diagram above). An IP address works like a postal address for a server: it is unique worldwide, and has the form XXX.XXX.XXX.XXX, like 1.2.3.4, and is used to be contacted by computing equipment.

Then, our browser will use the many routers and switches worldwide that know how to reach this address (thanks to various networking protocols such as BGP) to establish an HTTP connection with the frontend server. Once communication is initiated, the corresponding HTML, CSS, and JavaScript code for /blog will be sent to us, and the frontend can be displayed on our browser (steps 3 & 4).

From here, the frontend running in our browser will query the backend for each of our needed interactions. The backend will, in turn, interact with the datastore when necessary, and we will sometimes need to request new pages from the frontend server.

In the above example, when we submit an email to subscribe to the newsletter, the frontend in our browser tries to contact backend.cloud.theodo.com to tell it to register this action in the datastore (steps 5 - 8). Once confirmation is received (steps 9 & 10), it can display the confirmation text to the user.

Going Further

We have now seen a quick overview of how a website is built, deployed, and accessed online. However, this general article does not allow us to dive deep into the details of development, deployment, and networking, nor to address other important aspects of how a web app works, such as:

• Security at the code level of the website with its authentication system, vulnerabilities, hosting, and network (with HTTPS as on this website, for example) plays a vital role, especially for banking or medical sites
• Integration of external services to avoid having to redevelop everything, like a payment feature, through public APIs specialized in these topics
• Automated testing and deployment of the site's code with CI/CD or Infrastructure as Code

If the concepts covered in this article interest you and you want to explore them further, please check out other articles on our blog!