Have you ever wondered how websites work behind the scene ? Whenever you enter or type some website names or urls (like youtube) in your google search bar and then click the search button, you get the search results or websites that appear on your device screen where you further start to interacting with the website. Just thing about a second how does your device know what to do, what to show, how to show and who is showing the website on your device it feels like some kind of magic right ? Don’t worry its not some sort of magic its just the web works usually. In this article, you will get know behind web architecture by explaining the difference between the client side and the server side simply and understandably.
But before we go any further in client and server side we should know something about client server architecture.
What is Client Server Architecture ?
Client server architecture is like a two way conversation between your device (the client) and a computer or machine (the server). Just think as you are ordering food at a restaurant where you (the client) place an order and the kitchen (the server) prepares your food and then servers it to you.
Key Components - Client and Server
Client →
The client is what you use to interact with a website like your computer, laptop, phone, etc. It shows you what is happening and what to do like takes your input (like typing or clicking) and display the search result or website.
Analogy → Think of the client as a waiter who takes your order.
Server →
The server is like a central brain (just a fancy word) that does all the heavy work. It stores date, processes your request and then sends back the information or response you need.
Analogy → the server is the kitchen where all the cooking (think as a processing) happens.
Now you know the basics of the client server architecture. Lets dive into the client side and server side separately.
Client Side Explained
The client side which is also known as “Frontend” (simply means website that are seem and directly used or interact by the user). It is everything you see and interact with on a website. Imagin you are shopping online on amazon website. The buttons you click, the animation you see (pop ups, auto suggestions, auto sliding to show new products, etc and the cart that updates instantly when you add an item by clicking add to cart. All of that happens on the client side.
What happens on the Client Side
Web pages →
A web pages are built using HTML (for structure), CSS (for design) and Javascript (for interactivity).
Analogy → Think of HTML as the skeleton of a car, CSS as the paint and interior and Javascript as the engine (which helps the car to move), automatic doors, etc.
User Interface (UI) →
User interface (UI) is the visible parts of the website. How it looks which makes simple for clients to interact with and easy to navigate throughout the website.
Analogy → Cars visible components like the handle, gear, breaks, accelerator, buttons for horn, lights, etc. Where you choose and interact as you please.
Client Side Scripting →
Set of instructions or rules that run on your device such as a browser to perform actions on a web page.
Analogy → Handle of the car to control the car direction, accelerator to speed up the car, breaks to stop the car, etc.
Why is the Client Side important ?
Faster interaction →
Imagine filling out a form online. If the client side can check for mistakes instantly (like a missing email name or wrong entry). It saves you time right and you correctly fill out the form. It like you usually she a spell checker line if you make some mistake while typing, it highlights them and then you correct it.
Offline Features →
Usually in mobile apps like mobile game apps, notes taking app, some other apps, etc can work without the internet thanks to client side. Its like having a user manual for assembling something like toys.
Better User Experience →
Smooth animations, quick to response and interactive parts of website make website easy and enjoyable to use by the user. Its like watching a movie with 7.1 sound and clear visuals for more immersive experience.
Challenges of the Client Side
Device Limitations → If a user device is slow then the website might load well and not work properly. Its like watching a 4k HD video on Netflix on you old TV (old TV which is not smart enough to differentiate HD video quality).
Security Concerns → Any code running on the client side can be viewed or altered by users (by simply inspecting) that’s why sensitive information and tasks should stay on the server. Its like leaving your money wide open so then anyone with bad intention, steals your money.
Server Side Explained
The server side which is also known as “Backend”. It handles all the invisible but important database, logic, processing your data, how to respond specifically on specific requests and other operations that are built behind the scenes to run the website efficiently. This server side is not directly accessed by the user basically responsible for storing and manipulating data. You may also say that the server side is the backbone of the website which helps how to functions properly when something happens on the website by the client.
What Happens on the Server Side
Data Processing →
Servers take your requests (like searching for a product or item), do the internal calculations, find it and then prepare the response. Its like your search a particular with the filters apply like you need T-Shirt of M size.
Database Management →
The server keeps track of all the date like user accounts details, product details, other sorts of data, etc. Think like as a library catalog that helps you find the exact T-Shirt of M size you need.
Server Side Scripting →
Set of instructions or rules in form of code which are written in languages like node js, PHP, etc. Runs on the server to process the particular task in specific manner and send the result as an response. Its like showing you desire T-Shirts which are cheap, good and deliver to you in the shortest amount of time.
Why is the Server Side Important ?
Security →
Severs handles sensitive information like login details, passwords, payment details, etc in a secure environment so no can initially manipulate or use data for bad practices.
Heavy Works →
Severs can process large amounts of data quickly and efficiently where your device might struggle with handling the data.
Control →
Developers can make updates or fix bugs on the server without needing users to do anything. Due to this developers have control of the server without mingling the client.
Challenges of the Server Side
Latency → Every time your device talks to server it takes a little time which cause some delays and on cherry on top if you have slow internet connection can cause big delays to get response from the server. When you on video call with slow internet than your conversations on video call be will in delay until your internet gets better at certain level for video calling.
Scalability → If too many people use the website at the same time then the server needs to work harder or the risk of slowing down increases (you usually hear about the server is down right now of the particular site).
Conclusion
In short the client side handles what you see on your device and do while give the inputs while the server side manages the behind the scene parts. Together they create the seamless web experiences. Fast, secure and user friendly.
Thanks for reading this far.