SevyDevy

Module 1 · How an App Answers a Tap · Lesson 2 of 35

What is client server architecture? Following one tap there and back

12 minFree System design course · Beginner to intermediateLesson 1.2By Saket Bhatnagar

Researched and drafted with AI, reviewed and edited by Saket Bhatnagar.

In short

  • What is client server architecture? It is a design where one program, the client, asks, and another program, the server, waits and answers.
  • One tap is a round trip: the phone opens a connection, an open line to the server, sends a request, and gets a response.
  • Every stop on the way takes time, and your booking lives in the server’s database, not on your phone.
Soon

Video lesson · coming soon

What is client server architecture? One tap, there and back

Lala, your AI mentor, will walk you through this lesson in a short animated video. Until then, everything is here to read and try.

  1. 01 It took a moment. Why?
  2. 02 Priya’s dinner order
  3. 03 Follow one booking tap
  4. 04 The whole loop
  5. 05 Why the second tap is faster
  6. 06 Next: finding the address

Meera Kulkarni taps Book for Saturday’s club match. The ₹299 seat goes through, but she frowns. “It took a moment. Why?”

Arjun Nair is sure the server is slow. He opens the booking code and times it. The code takes almost no time at all.

He books seat B07 himself, booking BK-10421, and times every step from tap to ticket. All 100 members book through SeatJaldi’s one ₹1,200-a-month server. So where does the time go?

What is client server architecture?

Client server architecture is a design where one program, the client, asks, and another program, the server, waits and answers.

When Meera taps Book, her app is the client.

It sends a request to the server.

The server sends back a response.

That whole journey, there and back, is a round trip.

  • The client asks first, always.
  • The server waits, does the work and answers.
  • A round trip has hops, the legs of the journey, like the waiter’s walk to the kitchen. The wait you feel is every hop added up.
Try it yourselfWhose job is it: client or server?Flip each card to see which side does the job.

A connection is the open line between the phone and the server. Like the waiter coming to Priya’s table, it has to be set up before any request can travel.

You have seen this when a food app is slow on the first tap after a long gap, then instant the next. Part of the wait was setting up a fresh connection, and the next tap reused it.

You log in on a new phone and your tickets are there. They live in the server’s database, never on the old phone.

A map app says “Server not responding” while your phone works fine. The client asked, and nothing answered.

What happens when you tap Book?

One tap becomes a round trip: request out, server work, database answer, response back.

A booking request arrives at SeatJaldi’s one machine. That machine runs many programs, so each server program waits behind its own numbered door.

Private web traffic, the kind with a lock in the address bar, usually arrives at port 443.

Like Priya’s slip, the request uses a fixed format the kitchen can read, called HTTP.

The seat details inside the request are written as JSON.

On the server, the code asks the database a question in SQL.

Try it yourselfFollow one booking tap, step by stepStep through Arjun’s booking of seat B07 and watch the clock add up. Times are in ms, thousandths of a second, and every number is assumed.

One tap, there and back

The app opens a connection and sends a request. The server program asks the database, turns the answer into JSON and sends the response back on the same connection. The round trip is the sum of every hop.

Diagram connections:

  • Phone app to Connection (Opens, 100 ms)
  • Connection to Server program (Request, 25 ms)
  • Server program to Database (SQL, 140 ms)
  • Database to Server sends JSON (Seat data)
  • Server sends JSON to Ticket on screen (Back, 25 ms)
  • Phone app: Sends the request and draws the response.
  • Connection: Set up and locked first.
  • Server program: Waits on port 443; its own code takes 10 ms.
  • Database: Keeps seats and bookings.
  • Server sends JSON: The server program turns the database’s answer into JSON an…
  • Ticket on screen: The phone draws the ticket.

What is a server in simple words?

You met the server in lesson 1. Here is its other half: the numbered door it waits behind.

In the restaurant, “kitchen” names a job: cooking whatever the slips ask for. The machine is the building, the port is the numbered door, and the server program is the cook. So SeatJaldi’s one machine runs two programs that wait behind ports, like a kitchen and a store room: the booking server on port 443 and the database on its own port.

Why does a new connection cost time?

Before the first request can leave, phone and server must agree a connection. On a fresh connection, each agreement usually costs one round trip.

The first agreement is called TCP.

The second is called TLS.

Say a round trip takes 50 ms, an assumed number. Then about 100 ms passes before the request can even leave the phone, like the waiter coming to Priya’s table.

The fix is to reuse the connection. HTTP keeps it open by default, so the next tap skips the setup trips, like the same waiter staying at the table. After a quiet spell either side closes it, and the next tap pays again.

Engineers watch the time to first byte: how long until the first piece of the response arrives. For loading a web page, web.dev gives a rough guide of 0.8 seconds or less as good and over 1.8 seconds as poor.

HTTP/3 swaps TCP for a newer agreement called QUIC. One lost piece of data then holds up only its own request, not the others sharing the connection. Setup also takes one round trip instead of two.

You can time one request yourself with curl, a tool you run from a terminal window. On Windows PowerShell, type curl.exe and use -o NUL instead of -o /dev/null.

bash
curl -o /dev/null -s -w "connect: %{time_connect}s\ntls: %{time_appconnect}s\nfirst byte: %{time_starttransfer}s\ntotal: %{time_total}s\n" https://example.com

What just happened? curl timed one request to example.com, a name kept for examples. Each number counts from the start. The tls number minus the connect number is the locking time. The first byte number minus the tls number is one round trip plus the server’s work. On a nearby server, it is mostly the round trip.

Try it yourself

  1. Open the network tab

    In a desktop browser, press F12 (Cmd+Option+I on a Mac), pick Network, and tick the box that makes the browser fetch every file fresh.

  2. Reload and count

    Reload any page and count the requests. Each is its own round trip.

  3. Open the slowest

    Sort by time and open the slowest request’s timing. Look for rows for the initial connection and the locking step; a reused connection has none.

  4. Check your answer

    You got it if you can name the slowest request and its largest timing row. Then say whether it paid for setup or reused an open connection.

Arjun shows Meera his timings for BK-10421. “So the server is not slow?” she asks. “The program is quick,” Arjun says. “The wait is the first connection and the database. And the server is a program, not a giant machine. Your ticket lives in its database, not on your phone.”

It is Priya’s dinner again. The store room was slow, and the waiter’s first walk took longer than Arjun guessed.

Arjun rereads his timings. The app connects to seatjaldi.in, but a connection needs a numbered address. The phone only knew seatjaldi.in. How did it find the server’s address?

Check yourself

Check yourself

Arjun’s tap takes about 300 ms. What should he do first?

Pick an answer to see why it is right or wrong.

Check yourself

After Arjun sees his ticket, where does the booking live?

Pick an answer to see why it is right or wrong.

Remember these three

  1. A request is a round trip between a program that asks and one that answers, and every hop has a clock.
  2. A server is a program waiting on a port; shared data lives in its database.
  3. A new connection costs setup trips, so reuse it and measure before you fix.

Questions people ask

What is client server architecture?
It is a design where clients ask for things and servers answer them, so many phones can share one set of data. One program can be a client in one conversation and a server in another.
What is a client server model example?
Tapping Book in SeatJaldi is one. The phone app is the client, the program on the booking machine is the server, and the database keeps the seat.
What is a server in simple words?
A server is a program that waits for requests and answers them. It can run on any computer that stays switched on, and one machine can run several programs that wait on ports.