Client-Server Architecture Made Easy (With Examples)
Tags: webdev, architecture, computerscience
Published: 2022-06-06 13:26:43

If you're a software engineer, you must have at least a basic knowledge of web technologies and client-server architecture.

Client-server architecture is one of those [concepts](https://techwithmaddy.com/top-10-technical-terms-every-software-engineer-should-know) that all software engineers should know.0

This article will explain the client-server architecture with examples.

Let's start.

**1. WHAT IS THE CLIENT-SERVER ARCHITECTURE?**

Let's take the following example:

> **Linda is a first-year computer science student who wants to create an account to access the university's portal. She has to register her details (such as name, surname, date of birth, etc.), press the REGISTER button, and wait 'til she receives a message to confirm the account creation. This happens using the Google Chrome web browser on a Windows laptop.**

![client-server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36wzq5do41ebf6fjb9en.jpeg)

When Linda creates an account, she's interacting with the website's front-end part, also known as the client-side. In short, the "client" is what you see whenever you interact with an app, website, etc. 

A client can be a physical device (such as a laptop, smartphone, tablet, etc), or a program (such as a web browser). The client-side of the program is the equivalent of the front end.

The client is the device that allows you to make requests over the internet.

The server is the "invisible" part of the application.

A server instead is not a physical device. It's a computer program responsible for serving the incoming client's requests.

The server-side of an application/website is where all the behind-the-scenes mechanisms happen. It has different responsibilities, and one of them is to store data.

Server-side programming is also known as [backend engineering](https://techwithmaddy.com/what-does-a-backend-engineer-actually-do).

The client-server architecture is an architecture that has:

- A client that sends a request.

- A server that responds to a client's request.

Client-server architecture is also known as Request-Response Architecture.

**#2. WHAT HAPPENS WHEN LINDA SENDS THE REQUEST?**

Let's take the following example:

Linda requests a page using Chrome via the below URL:

`http://www.university.ac.uk/register.html`

Once she hits the REGISTER button, the client sends an HTTP request (because Linda is requesting to register her details to create an account), and the server responds with an HTML page. 


![client-request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iijrjvwhbxcodtqsgj9g.jpeg)

The web browser requests the web server using the HTTP protocol transported over [TCP/IP](https://en.wikipedia.org/wiki/Internet_protocol_suite).

The server responds with an HTML page, shown in the browser.

URL stands for Uniform Resource Locator.

A URL has three critical pieces of information:

1. The type of protocol: in this case, we're using an HTTP protocol.
2. The name of the server: `www.university.ac.uk`.
3. The file's name in the server: `register.html`.

If everything has gone well server-side, Linda will be able to see her data in HTML or other formats. Usually, HTML it's the most popular format.

**#3. WHAT DOES HTTP MEAN?**

HTTP stands for HyperText Transfer Protocol.


![http](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npfij7cui6n6cuv5hsm9.jpeg)

HTTP is a stateless Request-Response Protocol. 

> **A stateless protocol does not require the webserver to retain information or status about each user for the duration of multiple requests.** [[WikiPedia]](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol).

**What are the advantages of using HTTP?**

1. Each request is independent of the previous requests.
2. It reduces data transfer because the server doesn't need to track the state of multiple requests.
3. The server can scale to many clients.
4. It prevents network failure: in case of a network issue, the state of the request is not lost.

**How does HTTPS differ from HTTP?**

HTTPS is a safer version of HTTP. 

HTTPS ensures that the data exchanged between the client and the server is secure, uncorrupted and intercepted.

**#4 WHAT IS A WEB BROWSER?**

A web browser is a client-side application which requests resources from web servers.

Examples of web browsers are Google Chrome, Microsoft Edge, Mozilla Firefox, etc.

![web browsers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i73jpnr37a9hykl2jk0d.jpeg)

For example, whenever you search for a restaurant to have dinner using one of these web browsers, you request a web server to access and view a resource.

**#5. WHAT IS A WEB SERVER?**

A web server is a program which runs on the server.

A web server processes all the requests coming from the client.

A web server accepts a request and (if possible) gives back an HTTP response accompanied by an HTML page.

[Apache](https://httpd.apache.org/) is one of the most popular web servers.

![web server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg00mz0ymfmb4ezrp4hg.jpeg)

**CONCLUSION**

This article covers the client-side architecture with real-world examples, as well as understanding what is a client, a server, HTTP, a web browser and a web server.

I hope you've found this helpful!

Until next time! 🙋🏾‍♀️

**ADDITIONAL RESOURCES:**

- [YouTube | Nick White: Client Server Architecture](https://youtu.be/h-n_gyyNly8)
- [Simplilearn | What is Client-Server Architecture? Everything You Should Know](https://www.simplilearn.com/what-is-client-server-architecture-article)