Backend for Frontend (BFF)

The Personal Assistant Analogy

Imagine you are a busy executive, and you have two distinct areas of your life: Corporate Work and Family Life.

If you had one general assistant, they would try to manage both. When you asked for "my schedule," they would hand you a massive binder containing every corporate meeting, every flight, your kid's soccer games, and your grocery list. It's too much data, and you have to filter it yourself.

Instead, you hire two specialized assistants. One manages only your corporate life, presenting you with concise business briefs. The other manages only your personal life, reminding you of family events.

A Backend for Frontend (BFF) is exactly this: a specialized backend server tailored specifically to the needs of one specific type of client.

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.

Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

algobase.dev

The Web BFF aggregates rich data for the desktop UI. The Mobile BFF fetches only the fields the mobile app needs and strips everything else. Each BFF is owned by its client team. Both call the same underlying microservices.

1 / 10.5×1×2×3×Playground

The Web BFF returns rich payloads for the desktop UI. The Mobile BFF strips down the same data to the bare minimum. Each BFF calls the same underlying microservices but shapes the response for its client.

What is a BFF?

The Backend for Frontend (BFF) pattern is a variation of the API Gateway pattern.

In a standard API Gateway setup, you have one massive gateway that serves the Web App, the iOS App, the Android App, and maybe a Smart TV app.

The problem? These devices have wildly different needs:

• A desktop Web App has a big screen and a fast Wi-Fi connection. It wants a massive payload of data to render complex dashboards.
• An Apple Watch app has a tiny screen and a slow cellular connection. It only wants three specific numbers.

If you force them to use the same "one-size-fits-all" API Gateway, the Apple Watch ends up downloading huge amounts of useless data, draining its battery and slowing down the experience.

The BFF Solution

Instead of one generic gateway, you build multiple, client-specific gateways (BFFs).

• Web-BFF: Maintained by the web team. Aggregates data for the complex desktop UI.
• Mobile-BFF: Maintained by the mobile team. Strips down data, optimizes image URLs, and minimizes payload sizes for slow networks.
• TV-BFF: Tailored for television interfaces.

Real-World Example: SoundCloud

SoundCloud is one of the companies that popularized this pattern.

They realized that their web application and their mobile applications were drifting apart. The mobile app needed specific aggregations of tracks, playlists, and user profiles that the web app didn't care about.

When mobile developers needed a new API endpoint, they had to wait for the core backend team to update the monolithic API, which was slow and frustrating.

By adopting BFFs, SoundCloud gave the mobile team ownership of a Mobile BFF layer. The mobile developers (writing in Node.js) could now write their own backend aggregation logic to talk to internal microservices, format the data exactly how the iOS/Android apps needed it, and ship features rapidly without waiting on the core backend team.

Benefits and Trade-offs

Summary

The Backend for Frontend (BFF) pattern creates dedicated backend services for specific user interfaces. By shifting the API aggregation layer closer to frontend teams, organizations deliver optimized experiences across vastly different devices while letting teams ship independently.