Client-Server Architecture

Back to courses

You made the right choice by choosing the red pill 💊, let's embark on this cyberspace journey by exploring how messages navigate between machines, studying the client-server architecture that is the foundation of the Web.

Understanding this architecture will give you a broader view of the Web and an overall understanding of how the web code you write will be processed until it is displayed on the user's machine.

On the other hand, these fundamental principles of the Web will also be useful later when debugging to identify, for example, whether the source of a problem is on the server side or the client side.

Without further ado, let's explore these concepts!

Comparison of Client-Server and Postal Exchange

To grasp these concepts more easily, let's imagine the client-server architecture through postal communication between Alice 👩🏻‍🦰 and Bob 👦🏻.

Here are the different elements of comparison:

  • Bob represents the server
  • Alice represents the client, specifically a web browser (Chrome, Firefox...)
  • the letter represents the source code of the web page
  • the envelope represents the TCP protocol
  • the seal on the envelope represents the https protocol
  • the postal address represents the IP
  • the Post (the means of transport) represents the network infrastructure
Analogie client server
A client-server analogy

Steps of Alice-Bob and Client-Server Exchanges

Let's see step by step this comparison:

  1. Bob writes the handwritten letter, which would be equivalent to the HTML, CSS, and Javascript code hosted on a Web server. These platforms are often cloud-based, where the code is replicated on multiple machines, and the data is quickly accessible via hubs distributed around the world. Among the most well-known are AWS, Hostinger, and in Europe, OVH, which host this code.
  2. Bob puts the letter in an envelope. The envelope is equivalent to the TCP protocol that transports messages over the Internet. In this case, it's web code, but it could have been any other type of content: a video, an image, a PDF file, etc.