Overview of the lesson
The architecture of any web application starts with two components: frontend and backend, whether it’s facebook.com or some no-name Wordpress blog. In this lesson, we will analyse these components, how they interact and what their purpose is.
What you'll learn
In a previous lesson, we introduced the concepts of web application and web browser. We discussed how these two componentsthe browser and the web application interact and what is the purpose of each of them. Now, let’s take a step further and discuss the architecture of a web application.
|Prerequisites||You should have a basic understanding of what a web applications is.|
|Objective||To get familiar with the most fundamental architecture of web applications.|
In order to understand the various architectures of modern web applications — which is the subject of our next lesson — we first need to acknowledge the fundamental architecture of any web application that has been used since early 1990s: the three-tiered architecture. After all, we can’t truly appreciate the evolution of web applications, without acknowledging where we have been.
Web applications are intricate pieces of software consisting of many components, such as applications, databases, and middleware systems. To make the management of these components easier, software engineers devised them into several groups called layers. These layers represent the web application architecture. The main purpose of the architecture is to define the relationship between layers and govern how they interact with each other.
Regardless of the complexity, the backbone of any web application consists of a frontend and a backend layer. Figure 1 illustrates the simplest, three-tiered web application architecture.
HTML or Hypertext Markup Language is the standard markup language for creating web pages. All modern web applications also include Cascade Style Sheets (CSS) to make a page visually appealing. Without CSS, websites would look like this:
All information collected on the frontend needs to be stored or processed somehow, and that’s the job of the backend (or server-side) layer. This process happens behind the scenes on the web server where a typical user does not have access.
The entire logice.g., how it validates user data, which data should be retrieved from the database, deciding which content is returned to user browser of the web application is enclosed in the backend code. The backend can be implemented in many programming languages, based on the programmer’s preferences. Java, PHP, ASP.NET, Python, Ruby, and Golang are just a few of them.
In contrast to the client-side code which runs in the user’s browser and has little or no access to the OS functions, the server-side code is executed by the web server and has full access to the operating system. For this reason, server-side web vulnerabilities are much more valuable for an attacker than client-side vulnerabilities.
To better explain how all of this works, let’s take the example of Jake, who tries to sign up for a Google account. First, when Jake visits accounts.google.com in the browser, he is asked to complete a form with his name, email address, password, etc. That is the frontend (Figure 3).
After the data is collected on the frontend, i.e., Jake filled the form and hit Next button, it’s the backend job to make sure that the email address does not already exist in the database, the password is strong enough and so on. Once all the conditions are met, the backend will save Jake data into the database and he will be able to access his new Google account.
Web applications may look immensely complex until you take a peek inside. It is true that technology evolves fast and new frameworks arise to facilitate the development of powerful web applications. However, the architecture of web application — at their most fundamental level — remains the same.
So far, we only scratched the surface, but after reading this lesson, you should have a good understanding of web applications and how they work. Want to learn more? Check out the next lesson where we take a closer look at modern web application architectures.