The BFF (Backend for Frontend) Pattern

As systems grow, a "One Size Fits All" API Gateway can become a bottleneck. The BFF (Backend for Frontend) pattern offers a solution for complex multi-client applications.

The Problem: Diverse Clients

Imagine you have two clients:

Mobile App: Needs small payloads (to save data/battery). Needs to display a simple "Order Summary".

Web Dashboard: Needs huge payloads (bandwidth is cheap). Needs to display a complex "Order History with Analytics".

If you have a single General Purpose API /orders, you have to compromise:

Either you send too much data to Mobile (bloat).

Or you send too little to Web (forcing it to make 10 extra calls).

The Solution: A Dedicated Backend per Frontend

Instead of one General API Gateway, you create specific entry points (BFFs) for each client type.

Mobile BFF: Calls the underlying microservices (User, Order, Inventory), stitches the data into a compact JSON specifically designed for the iOS screen, and sends it back.

Web BFF: Calls the same microservices, but aggregates detailed data specifically for the Desktop view.

Benefits

Optimized Experience: The API matches the UI requirements perfectly. No over-fetching or under-fetching.

Team Autonomy: The Mobile Team can write their own BFF code (e.g., in Node.js) to format data exactly how they want, without waiting for the Backend Team to change the core microservices.

Encapsulation: If the Mobile App requires a specific legacy authentication flow, it stays in the Mobile BFF, not pollution the core system.

Comparison

Direct Approach: Mobile -> Microservices (Bad: tight coupling).

Gateway Approach: Mobile -> Gateway -> Microservices (Better: single entry).

BFF Approach: Mobile -> Mobile BFF -> Microservices (Best for complex APIs).

When to use BFF?

When you have multiple different client types (Mobile, Web, TV, Watch) with drastically different data needs.

When your UI teams are blocked by Backend teams.

Key Takeaways

One-Size-Fits-All APIs often lead to over-fetching on mobile or under-fetching on web.

BFF creates a dedicated API layer for each specific user interface, optimizing performance and developer autonomy.

Next Step: That wraps up the Gateway chapter! Let's review everything in the Chapter Summary.

The BFF (Backend for Frontend) Pattern

The Problem: Diverse Clients#

The Solution: A Dedicated Backend per Frontend#

Benefits#

Comparison#