FSD Frontend System Design

Part I β€” The Pipes Β· Lesson 2.1

Communication Overview

In one lineTwo questions decide everything: who starts the message, and how often does it arrive?

Where you've seen itA single Swiggy order-tracking screen runs three transports at once β€” REST for the order, a stream for rider location, push for the doorbell moment.

  • Time11 min
  • Diagram2Γ—2: update frequency vs direction
  • Chapter2 Β· Communication

Diagram

diagram
THE ONLY TWO AXES THAT MATTER

                     ONE-WAY (server β†’ client)   TWO-WAY (both talk)
                   β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
  RARE             β”‚  Short polling            β”‚  REST request        β”‚
  (minutes)        β”‚  "any news?" every 60s    β”‚  user-initiated      β”‚
                   β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
  OCCASIONAL       β”‚  Long polling             β”‚  Long poll + POST    β”‚
  (seconds)        β”‚  held request             β”‚                      β”‚
                   β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
  FREQUENT         β”‚  Server-Sent Events       β”‚  WebSockets          β”‚
  (sub-second)     β”‚  score ticker, feed       β”‚  chat, cursors, gamesβ”‚
                   β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

  Server β†’ Server, event-driven:  WebHooks   (no browser involved)
diagram
PULL vs PUSH β€” who pays the cost?

  PULL   client asks repeatedly        cost = wasted requests
         ● ─?─► β—‹   ● ─?─► β—‹   ● β”€βœ“β”€β–Ί β—‹
         2 empty answers before 1 useful one

  PUSH   server sends when it knows    cost = held connections
         ●  ◄──────── βœ“ ── β—‹
         zero waste, but the server tracks every client

How it works

  1. Decide direction. Only the server has news β†’ SSE or polling. Both sides talk β†’ WebSocket.
  2. Decide frequency. Slower than a minute β†’ poll. Faster than a second β†’ stream.
  3. Decide the cost you can pay. Polling burns requests; streaming burns open connections and server memory.
  4. Always design the fallback. Corporate proxies still block WebSockets; mobile networks drop streams on backgrounding.

Trade-offs

TransportDirectionCost per clientReconnect logic
Short pollingpullN requests/minnone needed
Long pollingpull, feels like push1 held requestyou write it
WebSocketduplex1 socket + stateyou write it
SSEserver β†’ client1 held responsebuilt in
WebHookserver β†’ servernone (no client)retry queue

Interview angle

"Design the update mechanism for a food-delivery tracking screen."

  • Split by frequency: order status changes rarely (poll), rider location changes constantly (stream).
  • Use SSE for location because it's one-way and reconnects itself; save WebSockets for the chat with the rider.
  • State the fallback and the reconnect/backoff policy β€” that's the part candidates skip.

Recap

  • Direction and frequency pick the transport; everything else is detail.
  • Pull wastes requests, push holds connections β€” choose which cost you prefer.
  • Real screens mix transports; one answer for the whole app is a red flag.