Understand how the web works: Client-Server Architecture(part3)

Hey guys! We’re back on our web dev learning adventure. Today, we’re gonna explore client-server architecture, a key idea that explains how the internet works. Let’s break it down!

What’s Client-Server Architecture?

Client-server architecture is a computer model that splits jobs between resource or service providers (servers) and those who ask for services (clients).

Picture it like a library:

• The library (server) holds all the books and information.
• The visitors (clients) come to the library to borrow books and gather information.
• The librarians (network) help visitors find the books and information they need and manage the borrowing process.

In web speak:

• Servers are big computers that hold and handle info run programs, and do what you ask
• Clients are gadgets (like your laptop or phone) that ask servers for stuff
• The internet is the big web that lets clients and servers talk to each other

How Does It Work?

1. Your device sends a request to the server through the internet. This could be for a website, a picture, or some facts.
2. The server gets the request, thinks about it, and gets an answer ready.
3. The server sends the answer back to your device.
4. Your device gets the answer and shows it to you (like putting a website on your screen).

Main Features:

1. Dividing Work: The clients take care of what users see and do some local stuff, while servers look after storing data, doing hard math, and managing resources.
2. Easy Growth: You can hook up more clients without having to make the server better, or you can beef up the server to handle more clients( horizontal or vertical scaling).
3. Control from One Place: The server keeps all the data and important rules in one spot, which makes it simpler to update and take care of things.

Different Kinds of Client-Server Setup:

1. Two-Tier: Clients talk straight to servers. It works well for tiny apps.
2. Three-Tier: Puts a middle bit (app server) between the client and database server. You see this a lot in web stuff.
3. N-Tier or Multi-Tier: Lots of server layers, each doing its own thing. Big tricky apps use this.

Good stuff:

1. One place to keep and back up data
2. Safer because servers can use strong protection
3. You can fix the app on the server without messing with all the clients

Hard parts:

1. Too many clients asking for stuff at once can slow down the server
2. Clients can’t use the service if the server crashes
3. You need to keep fixing and updating the server

Real-Life Examples:

1. When you surf the web, your browser asks web servers for pages
2. Your email program sends and gets messages through an email server
3. In online games, players’ computers talk to game servers to play together

Why Web Developers Should Care:

Knowing about client-server setup helps you:

1. Build better websites that work for lots of people
2. Find and fix problems in web apps
3. Choose where to put different parts of your app’s brain

Let’s put what we’ve learned into action with a real example: making a mini-blogging site like Twitter(X). This’ll show us how client-server setup works in the real world.

Our Mini-Blogging Site: “Chirp”

Client-Side (Front-end):

1. User Interface:

• Home feed to show posts (“chirps”)
• User profiles
• Place to post
• Way to search

2. Client-side processing:

• To check forms
• To count characters in posts as you type
• To store stuff on the user’s device for faster loading

Server-Side (Back-end):

1. Web Server:

• Takes care of HTTP stuff from people using the site
• Gives out regular files (HTML, CSS, JavaScript)

2. Application Server:

• Checks if users are who they say they are and what they can do
• Handles all the important behind-the-scenes stuff (like posting, following other users)
• Has spots for the client to ask for things

3. Database Server:

• Keeps all the user info, posts, and connections safe

This is how it might work:

1. How to post a “Chirp”:

• You write a message on your phone or computer
• Your device checks if the message is okay (like if it’s too long)
• Your device sends the message to Chirper’s computers
• Chirper’s computers make sure it’s you
• If everything’s good, Chirper saves your message
• Chirper tells your device it worked
• Your screen shows your new post

2. How your home page loads:

• Your device asks Chirper for new posts
• Chirper’s computers look for recent posts from people you follow
• Chirper’s storage gives these posts to its computers
• Application server gets the data ready and gives it to the client
• Client shows the posts in the user’s feed

3. User Login:

• User types in their login info on the client
• Client sends this to the server
• Server looks at the info to see if it matches what’s in the database
• If it’s right, server makes a session and sends a special code to the client
• Client keeps this code and puts it in future requests

This setup lets us:

• Grow: We can put in more app servers as more people use it
• Keep safe: Important stuff like logging in happens on the server
• Work better: The user’s device deals with screen changes so the server does less
• Do things right away: We could use special tech for quick updates

Problems and Fixes:

• Lots of users at once: Spread them out across many servers
• Keep data the same everywhere: Copy info between databases and use smart storing
• Make it work well for users: Update screens fast and handle errors

When we get how this works, we can make smart choices about how to build our web apps where to put different features, and how to make sure our stuff can get bigger and change as users need it to.

As we keep making and using web apps, don’t forget that this client-server setup is working in the background. It’s what makes possible the smooth experiences we often don’t think twice about.

As we continue our journey into web development, we’ve got some exciting and crucial topics lined up, we’ll be exploring crucial aspects of web security and user management.