Can you show me a Backend for Frontend architecture example?

Yes — here’s a simple Backend for Frontend (BFF) architecture example.

What BFF is

A Backend for Frontend is a backend service built specifically for one client type:

• Web app
• iOS app
• Android app
• Admin dashboard

Instead of one generic API serving every client, each frontend gets an API tailored to its needs.

---

Example scenario

Imagine an e-commerce system with:

• Product Service
• Inventory Service
• Order Service
• User Service

If the web app needs a “My Account” page, it might need data from multiple services:

• user profile
• recent orders
• loyalty points
• recommended products

Rather than making the frontend call 4 different APIs, a BFF handles that.

---

Architecture diagram

          +------------------+
          |   Web Frontend    |
          +---------+--------+
                    |
                    v
          +------------------+
          |   Web BFF API    |
          +---+----+----+----+
              |    |    |    |
              v    v    v    v
        +--------+ +--------+ +--------+ +--------+
        | User   | | Order  | | Promo  | | RecSys |
        | Service| | Service | | Service| | Service|
        +--------+ +--------+ +--------+ +--------+

          +------------------+
          |   Mobile App     |
          +---------+--------+
                    |
                    v
          +------------------+
          | Mobile BFF API   |
          +---+----+----+----+
              |    |    |
              v    v    v
        +--------+ +--------+ +--------+
        | User   | | Order  | | Catalog|
        | Service| | Service | | Service|
        +--------+ +--------+ +--------+

---

How it works

Web BFF

The web frontend calls:

GET /web/account-summary

The BFF:

1. Calls User Service for profile data
2. Calls Order Service for recent orders
3. Calls Recommendation Service for suggested products
4. Combines the data into one response

Example response:

{
  "user": {
    "name": "Alice",
    "tier": "Gold"
  },
  "recentOrders": [
    { "id": "O1001", "status": "Delivered" },
    { "id": "O1002", "status": "Processing" }
  ],
  "recommendations": [
    { "id": "P42", "name": "Wireless Headphones" }
  ]
}

---

Why use a BFF?

Benefits

• Frontend gets exactly what it needs
• Fewer API calls from the browser/mobile app
• Simpler frontend code
• Can hide microservice complexity
• Can optimize for device-specific needs
• Can handle auth/session logic per client

Common use cases

• Aggregating data from multiple services
• Transforming backend responses for specific UI needs
• Reducing overfetching/underfetching
• Adding client-specific caching or auth rules

---

When not to use it

A BFF may be unnecessary if:

• You only have one simple frontend
• Your backend API is already very simple
• You don’t need client-specific behavior

---

Common implementation patterns

A BFF is often built using:

• Node.js / Express
• .NET / ASP.NET
• Java / Spring Boot
• GraphQL server
• Serverless functions

---

Tiny code example

BFF endpoint in Node.js/Express

app.get('/web/account-summary', async (req, res) => {
  const user = await fetch('http://user-service/me').then(r => r.json());
  const orders = await fetch('http://order-service/recent').then(r => r.json());
  const recs = await fetch('http://rec-service/recommendations').then(r => r.json());

  res.json({
    user,
    recentOrders: orders,
    recommendations: recs
  });
});

---

If you want, I can also show:

1. a real-world microservices BFF example
2. a BFF implemented with GraphQL
3. a BFF architecture diagram for mobile + web