FSD Frontend System Design

Part I — The Pipes · Lesson 1.7

gRPC

In one lineBinary contracts over HTTP/2 — call a remote function like a local one, in a fraction of the bytes.

Where you've seen itNot in your browser tab, but one hop behind it — checkout → inventory → pricing, thousands of calls per second.

  • Time14 min
  • DiagramPayload size bar: JSON vs Protobuf
  • Chapter1 · Networking

Diagram

diagram
PAYLOAD SIZE — same user object

  JSON      ████████████████████████████████  312 bytes
  JSON+gzip ██████████████                    138 bytes
  Protobuf  ███████                            74 bytes
            └── field names are replaced by numeric tags
diagram
CONTRACT-FIRST — one .proto generates both sides

            ┌──────────────┐
            │  user.proto  │
            └──────┬───────┘
          protoc   │   protoc
       ┌───────────┴────────────┐
       ▼                        ▼
  ┌──────────┐            ┌──────────┐
  │ TS client│            │ Go server│
  │  stub    │            │  stub    │
  └────┬─────┘            └─────▲────┘
       │   binary over HTTP/2   │
       └────────────────────────┘
       compile-time type safety on both ends
diagram
FOUR CALL SHAPES

  Unary            client ──► server ──►            one in, one out
  Server stream    client ──► server ══►            one in, many out
  Client stream    client ══► server ──►            many in, one out
  Bidirectional    client ══► server ══►            both stream freely

How it works

  1. Define messages and services in a .proto file — this is the contract.
  2. protoc generates typed client and server stubs in every language you use.
  3. Calls travel as binary Protobuf frames over HTTP/2, multiplexed on one connection.
  4. Streaming is native, in either or both directions.

Trade-offs

Use whenAvoid when
Service-to-service, high volumePublic API for unknown clients
Polyglot teams needing one contractYou want browsable URLs and curl
Streaming is a first-class needNo time to run a proxy

The browser catch: browsers can't speak raw gRPC — no access to HTTP/2 frames from JS. You need gRPC-Web plus an Envoy proxy, and that path loses client-streaming. For most frontends this is exactly why the browser talks REST or GraphQL to a BFF, and the BFF talks gRPC onward.

Interview angle

"Why don't we just use gRPC from the browser?"

  • The Fetch API gives no control over HTTP/2 framing, so raw gRPC is impossible.
  • gRPC-Web works but needs a translating proxy and drops client-side streaming.
  • The usual shape: browser → BFF (REST/GraphQL) → services (gRPC).

Recap

  • Contract-first, binary, HTTP/2, streaming built in.
  • ~4× smaller payloads and generated types on both ends.
  • Lives behind your BFF, not in the browser.