Mastering Frontend System Design — Episode 2: Networking Protocols Explained with Real-World Examples

Why different protocols exist, when they are used, and how real apps like WhatsApp, Netflix, and web apps communicate.

Every frontend application communicates with the outside world.

• A normal web app fetches data
• A chat app sends and receives messages instantly
• A video app streams content continuously
• A notification system pushes updates in real time

Yet all of this happens through different networking protocols.

Many frontend developers know HTTP, have heard of WebSocket, but don’t clearly understand:

• why multiple protocols exist
• when to use which one
• where they are used in real applications

In this episode, we’ll understand networking protocols from a frontend system design perspective, using real-world examples — not low-level theory.

🧩 1. What Is a Networking Protocol? (In Simple Words)

A networking protocol is a set of rules that define:

• how data is sent
• how data is received
• how both sides understand each other

Think of it like communication styles:

• Email → send → wait → reply
• Phone call → continuous conversation
• Walkie-talkie → instant two-way communication

Different needs → different protocols.

Frontend and backend must agree on the same protocol to communicate properly.

🔄 2. Why Do We Need Multiple Protocols?

One protocol cannot solve all problems.

Frontend applications deal with:

• simple data fetches
• real-time chats
• live updates
• streaming content

Each of these needs different communication behavior.

That’s why multiple protocols exist.

📦 3. Major Networking Protocols (Frontend Perspective)

Let’s look at the important protocols, what they do, and where you’ve already seen them.

🔹 HTTP / HTTPS — The Most Common One

What it is

• Request → response based communication
• Frontend asks
• Backend responds
• Connection closes

Where it’s used

• Normal API calls
• Login, signup
• Fetching lists, profiles, dashboards

Real-world examples

• Opening a product page
• Fetching user profile
• Submitting a form

👉 Almost every frontend app uses HTTP/HTTPS.

🔹 WebSocket — Real-Time Communication

What it is

• Persistent connection
• Frontend and backend stay connected
• Both can send data anytime

Where it’s used

• Chat applications
• Live notifications
• Real-time dashboards

Real-world examples

• WhatsApp messages
• Telegram chat
• Live comments
• Stock price updates

👉 WebSocket avoids repeated API calls and enables instant updates.

🔹 Server-Sent Events (SSE) — One-Way Live Updates

What it is

• Backend sends updates continuously
• Frontend only listens

Where it’s used

• Live notifications
• Activity feeds
• Real-time logs

Real-world examples

• Notification banners
• Live system status
• Deployment logs

Frontend doesn’t send data back — it only receives.

🔹 Streaming Protocols — Continuous Data Flow

What they do

• Send data in chunks
• Instead of waiting for full response

Where they’re used

• Video streaming
• Audio streaming

Real-world examples

• Netflix
• YouTube
• Spotify

👉 Frontend doesn’t wait for the full video — it plays as data arrives.

🔹 Polling & Long Polling — Workarounds

What they are

• Frontend repeatedly asks backend: “Any update?”
• Backend responds

Where used

• Older chat systems
• Systems without WebSocket support

Problems

• Network heavy
• Delayed updates
• Poor scalability

These exist because WebSocket wasn’t always available.

📌 Protocol Names

• HTTP / HTTPS → HTTP/1.1, HTTP/2 (Request–Response)
• WebSocket → WebSocket (RFC 6455)
• Server-Sent Events → SSE (HTML Standard)
• Streaming → HLS / DASH / WebRTC
• Polling → HTTP Polling
• Long Polling → HTTP Long Polling

🧠 4. Choosing a Protocol Is a Design Decision

Protocol choice affects:

• performance
• scalability
• server load
• frontend complexity

Examples:

• Using HTTP polling for chat ❌
• Using WebSocket for simple CRUD ❌
• Using HTTP for login & data fetch ✅
• Using WebSocket for live chat ✅

Good frontend system design means:

Choosing the right protocol for the right job.

📱 5. Frontend Developer’s Responsibility

From a frontend point of view, you should understand:

• what protocol is being used
• how often data flows
• what happens when network fails
• how UI reacts to delays

You don’t need to implement protocols — but you must design your UI and data flow around them.

🗺️ Mental Model to Remember

• HTTP → ask once, get answer
• WebSocket → stay connected, talk anytime
• Streaming → receive continuously
• Polling → keep asking repeatedly

Different problems → different protocols.

🏁 Conclusion

Networking protocols are not backend magic.

They exist because frontend apps have different communication needs — from simple data fetches to real-time conversations and streaming.

Understanding why protocols exist and where they are used helps you:

• design better frontend systems
• avoid wrong architectural choices
• build apps that scale smoothly

This was Episode 2 of the Mastering Frontend System Design series.

In the upcoming episodes, we’ll deep dive into the most important frontend-relevant protocols:

• HTTP vs HTTPS (requests, headers, status codes)
• WebSocket (real-time communication)
• REST vs GraphQL

If this helped you connect theory with real apps like WhatsApp and Netflix, give a clap and follow me for the next episodes.