Courses / Demistifying the Web

The Client and Server Side of Web Applications

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

  • The basic architecture of any web application.
  • The purpose of client-side layer.
  • The purpose of server-side layer.

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.
TL;DR
  • The basic architecture of any web application starts with a frontend and a backend layer, regardless of the application complexity or used technologies.
  • Server-side code has full access to the server operating system, in contrast to client-side code which has little or no access to the OS functions.
  • Client-side code runs in user’s browser, while server side code is executed by the web server.

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.

What is Web Application Architecture?

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.

Figure 1 - Our attempt to illustrate the three-tired web architecure.

Client-side

The frontend (or client-side) layer is what the user sees in his browser. Forms, buttons, navbars, paragraphs, tables, lists, and basically anything else that a user interacts with through their web browser are part of the client-side. The primary purpose of this layer is to collect data from the user. Usually, it is implemented as a mixture of HTML, CSS, and Javascript.

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:

Figure 2 - HTML only website.

Also, most modern web applications use Javascript to allow dynamic user interaction with the web page and make the application feels more like a desktop application.

One of the web browser’s job is to interpret HTML, CSS, and Javascript and render the code into a visual interface that allows a user to interact with the web application. For this reason, when a user visits a website, he does not see code, but HTML rendered elements (e.g., buttons, forms, etc.).

Server-side

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.

Putting all togheter

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).

Figure 3 - Google sign-up page.

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.

Conclusion

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.

Next lessons View all
Demistifying the Web

Types of Web Application Architectures

Now that we have a basic understanding of web application architecture, it’s time to dig deeper. As you probably noticed, not all web applications work the same. Some are faster...

Read now
Demistifying the Web

Monolithic vs. Microservices Architecture Models

Monolithic and Microservices web architecture are two of the most used models when deciding the infrastructure of a web application. But which one is better and how they differ from the architectures discusses in the previous lesson?

Read now
Demistifying the Web

HTTP Protocol

The Hypertext Transfer Protocol, or simply HTTP, is the core mechanism used by the Web to define how systems should communicate and the format of the messages.

Read now