Backend-for-Frontend Lab (Interactive)
Serve one home screen to a phone, desktop, and smart TV via direct calls, a universal API, or a trimming BFF. Switch client form factor and architecture, drag cellular RTT, and compare round-trips, kilobytes, device parse time, and team autonomy across the three topologies.
Backend-for-Frontend Aggregation
One screen, three device classes: compare direct microservice calls, a universal API, and a dedicated BFF.
Client round-trips
1
Screen ready
176.3 ms
Payload
1.6 KB
JSON parse on device
1.8 ms
The iOS app BFF takes 1 cellular hop, fans out concurrently to 3 internal gRPC services (+{INTERNAL_RPC_MS} ms each in the VPC), and trims to the 5 rendered fields.
Team topology: the iOS/web/TV team owns and deploys its own BFF — breaking changes to this payload cannot regress the other platforms. Gateway ≠ BFF: the platform team's edge (TLS, auth, rate limits) still fronts all of this.
How It Works Under the Hood
A single universal API serving iPhone, 4K desktop, and a CPU-starved smart TV fails everyone: the phone pays for 52 desktop fields it never renders, the TV stutters parsing JSON its weak CPU cannot chew, and every client feature request becomes a cross-team backend negotiation. The Backend-for-Frontend pattern gives each platform its own thin aggregation service: one cellular hop in, concurrent two-millisecond internal gRPC fan-out in the VPC, payload trimmed to exactly the fields the screen draws — with the client team owning and deploying the BFF outright.
Core Architectural Principles
- One BFF hop replaces N sequential 100ms+ cellular round-trips with parallel <2ms internal RPCs.
- Field trimming per form factor cuts payload bytes, battery drain, and parse-induced frame drops.
- Conway’s law: iOS owns the mobile BFF, web owns the web BFF — decoupled release lifecycles.
For multi-device products, propose per-platform BFFs and be precise about the numbers: N mobile round-trips collapse into one, and the mobile response shrinks to the fields rendered. Then draw the boundary: the gateway still owns TLS, auth, and global rate limits; the BFF only aggregates and shapes — letting it grow domain logic recreates the monolith.
Tailored payloads and team autonomy multiply deployables and risk duplicated glue code across BFFs.