CodeNewbie Community 🌱

Cover image for Client-Server Architecture Made Easy (With Examples)
Maddy
Maddy

Posted on • Originally published at techwithmaddy.com on

Client-Server Architecture Made Easy (With Examples)

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 that all software engineers should know.

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

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.

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.

Related: What Does a Backend Engineer ACTUALLY Do?

#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.png

The web browser requests the web server using the HTTP protocol transported over TCP/IP.

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

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

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.

Web browsers include Google Chrome, Microsoft Edge, Mozilla Firefox, etc.

web browsers.png

For example, whenever you search for a restaurant to have dinner at 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 is one of the most popular web servers.

web server.png

CONCLUSION

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

I hope you've found this helpful!

Until next time! 🙋🏾

ADDITIONAL RESOURCES:

Top comments (0)