CMD Guide
HomeSystem DesignMicroservices Patterns

The Architecture of the BFF Pattern

A Backend for Frontend (BFF) is an edge service that owns the request and response shape for exactly one kind of client: it accepts a single call, fans out to the underlying microservices inside the datacenter, aggregates and trims their responses, and hands back precisely the payload that one screen renders — pushing orchestration and over/under-fetching off the network-constrained client and onto a server the frontend team controls.

That one sentence carries the whole architecture. The shape is three tiers, but the load-bearing idea is the middle tier's ownership boundary, not the box count:

diagram
diagram

Where the BFF boundary sits — vs a shared gateway

The single most common confusion is "isn't a BFF just an API gateway?" No — they answer different questions and, in mature systems, they compose (gateway in front, BFFs behind it, as in the diagram).

ConcernShared API GatewayBFF
CardinalityOne, for everyoneOne per client experience
JobCross-cutting & generic: TLS termination, authN, rate-limiting, routingClient-specific: composition, aggregation, trimming, format translation
Knows about screens?No — payloads are pass-throughYes — it is coded to one screen's contract
Owned byPlatform / infra teamThe frontend team that owns that client

The dividing rule: if a responsibility is identical for every client (auth, TLS, quota), it belongs in the gateway; if it exists because this client renders data differently, it belongs in that client's BFF. Aggregating four services into one home-screen payload is client-specific, so it is BFF work, never gateway work.

The team-topology angle (Conway's law made deliberate): Sam Newman's rule of thumb is "one experience, one BFF" — and critically, the BFF is owned by the same team that ships the client. That is what makes the pattern pay off: the mobile team can reshape its payload the same day it changes a screen, with no cross-team ticket to a central backend team. If a backend team ends up owning all the BFFs, you have quietly rebuilt a shared gateway and thrown away the whole benefit. Also note: it is one BFF per experience, not per microservice — a mobile BFF still talks to many services.

A traced example: the mobile home screen

The home screen needs four things: the user's name, their latest order's status, three product recommendations, and their loyalty-point balance. Those live in four separate microservices. Watch what changes when a BFF absorbs the orchestration. Assume mobile round-trip time (RTT) over cellular is ~120 ms; inside the datacenter, service RTT is ~10 ms.

Without a BFF — the client orchestrates

#Call (client → service)NetworkRaw payloadCost
1GET /users/42cellular9 KB (full profile)~120 ms RTT
2GET /orders?user=42&limit=1cellular12 KB~120 ms RTT
3GET /recommendations?user=42cellular15 KB (20 items)~120 ms RTT
4GET /loyalty/42cellular4 KB~120 ms RTT

Even with 4 parallel connections the client is bottlenecked on cellular RTT and connection limits, and it downloads ~40 KB to display maybe 2 KB of it. The client also contains the join logic ("stitch order into profile, keep the top 3 recs"), duplicated in Swift and Kotlin, re-shipped through the app stores on every change.

With a BFF — the datacenter orchestrates

#StepWhereCost
1Mobile issues ONE call: GET /mobile/homecellular~120 ms RTT (one-time)
2BFF fans out to all 4 services in parallel in-DCdatacenter~10 ms (bounded by slowest)
3BFF trims: name only, order status only, top-3 recs, point totalBFF CPU~2 ms
4BFF returns one tailored ~6 KB JSONincluded in step 1

Result: one cellular round trip instead of four, ~6 KB instead of ~40 KB, and the join logic lives in one server-side place the mobile team owns. Meanwhile the web BFF, hitting the same services, returns the full recommendation list and richer order history — because a laptop on broadband can use it.

Pitfalls a working engineer hits

When to use it — and when NOT to

Concrete signals that point to a BFF: you have multiple heterogeneous clients (mobile vs web vs TV vs partner API) whose data needs genuinely diverge; some clients are network- or CPU-constrained; different teams own different frontends and are blocked waiting on a central backend team; and you are drowning in client-side aggregation or over-fetching.

Trade-offs vs named alternatives:

Choose THIS (BFF) when client needs diverge sharply and frontend teams need to own their own edge to move independently. Prefer a shared gateway when your clients are homogeneous — one payload genuinely suits all of them. Prefer GraphQL when you want client-driven shaping without standing up and staffing one backend per client, and you can invest in schema governance and resolver performance.

Takeaways


Re-authored and deepened for this guide. Sources: Phil Calçado, "The Back-end for Front-end Pattern (BFF)" (2015), documenting SoundCloud's origin of the term; Sam Newman, "Backends For Frontends" (samnewman.io) and Building Microservices, 2nd ed. (O'Reilly, 2021), ch. on API composition; Daniel Jacobson et al. on Netflix's device-specific API adapters; Microsoft Azure Architecture Center, "Backends for Frontends pattern." Latency and payload figures are illustrative worked values, not measurements from a specific system.

🤖 Don't fully get this? Learn it with Claude

Stuck on The Architecture of the BFF Pattern? Open Claude, copy a block below, and it'll teach you this exact concept — visually and interactively.

🎨 Explain it visually

Build the mental picture, not memorization.

I just read a lesson on **The Architecture of the BFF Pattern** (System Design) and want to truly understand it. Explain The Architecture of the BFF Pattern from first principles using ONE vivid real-world analogy and a visual mental model — draw it as ASCII art or a clear step-by-step diagram — with a concrete example using real numbers. Then ask me one question to check I got the mental picture, and wait for my reply. If you're unsure or a claim isn't standard, say so and reason from first principles instead of guessing.
🤔 Walk me through it (interactive)

Socratic — adapts to where you're stuck.

Teach me **The Architecture of the BFF Pattern** interactively. Ask me ONE guiding question at a time, wait for my answer, and adapt to my confusion — build the idea with me step by step instead of explaining it all at once. If you're unsure or a claim isn't standard, say so and reason from first principles instead of guessing.
🧪 Quiz me & fix my gaps

Active recall exposes what you missed.

Quiz me on **The Architecture of the BFF Pattern** with 5 questions, easy to tricky, ONE at a time. Tell me if each answer is right; at the end, explain clearly what I got wrong and why. If you're unsure or a claim isn't standard, say so and reason from first principles instead of guessing.
🧠 Make it stick

Intuition + hook + flashcards for long-term memory.

Help me remember **The Architecture of the BFF Pattern** for the long term: give the one-sentence intuition, a memorable hook/mnemonic, a tiny worked example, and 3 active-recall flashcards (Q -> A). If you're unsure or a claim isn't standard, say so and reason from first principles instead of guessing.

📝 My notes