Client vs Server

You must have heard the terms "client" and "server"! If not anything, you must have come across the term "The server is down" at least once in your lifetime, right? So what do these terms mean?

Most of the Internet is based on the client-server model. The client presents the data in a readable, easy-to-consume, and attractive way, while the server is the silent engine that runs under the hood.

Let's understand the concept with an example, imagine a car, it has two main components - The engine and the body. The front end is like the car's body and design, while the server is the engine, the underlying mechanics, gearbox, etc. Just like a car requires all these to work, so does software for its success.

Would we use Facebook if it still looked like:

I doubt it. If the app were to take 10 minutes to load, would we still use it? I guess not! Hence, a great UI and server are crucial for a product's success.

In the world of web development, client and server refer to the location where certain things happen. Like the clicks we do on the computer screen using a mouse, the image slide shows that we see, the Netflix movie cards, all these are present in the user's computer screen - The computer here is the client - the client is where certain operations happen that need not reach the server.

Many programming languages can help build such systems such as Ruby, Python, and Javascript, but Javascript is one such language that is not only widely popular but is capable of running in most of the popular browsers, which means in most of the mobile and static devices such as Desktops and laptops, that makes it the most popular option in the client-side to provide great experiences to the user.

What is an experience? The way the user "feels" when they use the website is the experience. Is it easy to use? Is the user finding it hard to find settings and options on the website or is it very easily accessible, these are just some of the factors that determine User experience, all this is contained in the Client-side i.e. the user's computer/browser shows, which we refer to as the client-side.

Let's understand with the example of a restaurant

Think of the client-server model as a restaurant. The kitchen (server) prepares your food, while the waiter (client) takes your order and brings your food to you. Here’s how it works:

1. Client: This is like the dining area where the customer can consume the food. You use your device (laptop, smartphone) to interact with the website or app to consume the data, right? The website you see, just like the page you see to read this very article is on the client side. But the text I have written here is not saved on the front-end, but rather that is stored somewhere in a place called the "Server", so what is a server?
2. Server: This is like the kitchen. It processes your requests (like making a burger) and sends back the results (like the finished burger). The text I have written is saved somewhere called as the cloud, what is the cloud you ask? A cloud is not the usual rainy cloud that we see in the sky rather it is a remote machine somewhere in the world, where the data is stored and managed for us, some of the cloud providers are Microsoft Azure, Amazon AWS, etc. Imagine this to be a remote computer, where the data is stored, this is like the supercomputer from the movie "Kal ho na ho" but is on 24x7, 365 days and also has a best friend ( backup ) which keeps a copy of the data on this system so that in case of them shut down, the other immediately takes over hence your data is super-safe!

When you type “netflix.com” into your browser, your device (client) sends a request to Netflix’s servers asking for the website. The servers then send back the information needed to display Netflix’s homepage on your screen.

Client-Side

The client-side is everything that happens on your device once the website is served to you from the server.

Client-Side Actions: In a restaurant, the user can arrive, take a seat, and then start going through the ready menu, also view what is available right? All these are the client-side actions. This does not require the server's help, it's all front-end. Certain actions that the user can perform from the get-go and certain actions that can be done once the server serves the data like the restaurant provides you with a glass of water and you might consume it!

Let's take another example - For example, when you’re on Netflix, the images and text you see are all rendered by your browser on your device, these images come from the server. But if you hover your mouse over a movie thumbnail and it gets bigger, that’s done on your device using client-side code. This code is often written in JavaScript, HTML, and CSS. ( or any of the Javascript frameworks built on top of it, such as React, Angular, etc. )

Server-Side

This is all in the cloud we spoke about ( Note that there are two variations mainly of the server hosting - on-prem and cloud but that is beyond the scope of this article ).

Server-Side Actions: Server-side processing involves handling tasks like storing user information and preparing data before sending it to your device. Like the chef prepares the food in the Kitchen, right? A server might hold your data, like the state of the movie where you left off, your favorite playlists, and your Spotify play lists, all these are not stored in your device, rather are stored in the server, and that is how they sync across devices smoothly, i.e. what you saved in one device is available in another the moment you open it.

Additional information:

Database Interaction: When you log in to a website, the server checks your username and password against a database.

Rendering Dynamic Content: If you’re shopping online, the server gathers information about products and puts it together into a web page.

Note: A database is an organized collection of structured information, or data, typically stored electronically in a computer system. Imagine an excel sheet with tables where data can be accessed, filtered, or grouped.

Client-Side vs. Server-Side Scripting

Let’s understand this concept with a simple example:

• Client-Side Scripting: Imagine you have a toy robot that does tricks based on the buttons you press. Like a clapping monkey toy, we had in our childhood.

These tricks (like dancing or spinning - I am sure we had one of these in our childhood, no?) happen right on the robot without needing any help from outside. This is similar to client-side scripting, where scripts run directly on your device’s browser. Basically anything that does not need external or server help to run on the client.

• Server-Side Scripting: Let's understand Service side scripting with the help of a step-by-step example
• You as the Customer (Client):Action: You decide what you want to eat and place an order with the waiter.Web Equivalent: You use your web browser to request a webpage or perform an action on a website.
• Waiter (Client Interface):Action: The waiter takes your order to the kitchen.Web Equivalent: Your browser sends a request to the web server.
• Kitchen (Server):Action: In the kitchen, chefs receive your order. They might need to prepare ingredients, follow specific recipes, and cook a tasty meal based on your unique request.Web Equivalent: Server-side scripts (like PHP, Python, Ruby, etc.) process your request. This could involve querying a database, performing calculations, or dynamically generating content tailored to your needs.

What is a Serverless Architecture?

In the serverless world, think of it like this: Instead of having a dedicated kitchen for every meal, there are food trucks that come and go based on demand. When you order food, a truck comes to prepare it on the spot, and you get your food quickly. A bit like Zomato and Swiggy, order on demand.

Let's understand this with an example too!

You as the Customer (Client):

• Action: You decide what meal you want and place an order using a food delivery app.
• Web Equivalent: You interact with a web or mobile app to perform an action, like placing that order for a Biriyani from Zomato.

Food Delivery App (Serverless Interface):

• Action: The app receives your order and automatically dispatches it to the nearest restaurant that can fulfill your request.
• Tech Equivalent: The serverless platform (like AWS Lambda, Azure Functions) triggers a function in response to your action. This function performs a specific task, like running a piece of code, without needing a dedicated server.

Next, its the same old thing, the order is received by the restaurant, the order is prepared and then -

Delivery Driver (API Gateway/Delivery Service):

• Action: A delivery driver picks up the meal from the restaurant and brings it directly to your doorstep.
• Tech Equivalent: The serverless platform delivers the response back to your app or user interface, providing the result of the function.

Now, do you understand how the serverless architecture works?

Great, is the concept of Client and Server clear to you? Let me know in the Feedback section of the page.