Micro Frontend Architecture, BFF, and Microservices — Explained Simply with Real‑World Examples

Source: Dev.to

1️⃣ Why Traditional Monolith Architecture Fails

❌ Monolithic Architecture

In a monolith:

• Frontend + Backend are tightly coupled
• One codebase
• One deployment

One failure = entire app down

[ UI ] → [ Backend ] → [ Database ]

Problems

• Slow deployments
• Hard to scale
• One small bug can crash everything
• Large teams block each other

👉 Solution

Break the system into smaller independent parts.

2️⃣ Microservices Architecture (Backend Level)

✅ What are Microservices?

Microservices split the backend into small, independent services, each owning its own data and logic.

User Service     Order Service     Payment Service
     │                  │                 │
     └────── API Gateway / BFF ────────┘

Example: E‑commerce App

• Each service has its own DB
• Can be deployed independently
• Scales independently

🧠 Simple Example (Node.js)

// user-service/index.js
app.get('/users/:id', (req, res) => {
  res.json({ id: 1, name: 'Kamal' })
})

3️⃣ What Problem Still Exists?

Even with microservices, the frontend must call multiple services. Different frontend apps (Web, Mobile) need different APIs, making the frontend complex.

Frontend → User Service
Frontend → Order Service
Frontend → Payment Service
Frontend → Notification Service

This is where BFF comes in.

4️⃣ Backend For Frontend (BFF)

✅ What is BFF?

BFF is a backend layer designed specifically for a frontend.

Web App   → Web BFF   → Microservices
Mobile App → Mobile BFF → Microservices

Why BFF?

• Simplifies frontend
• Aggregates multiple APIs
• Custom responses per device
• Better performance

🧠 Example

Frontend needs user info, orders, and wallet balance. Instead of three separate calls, it can request a single endpoint:

Frontend → /dashboard

BFF internally aggregates:

/dashboard → User Service
           → Order Service
           → Wallet Service

🧩 BFF Example (Node.js)

app.get('/dashboard', async (req, res) => {
  const user = await getUser()
  const orders = await getOrders()
  const wallet = await getWallet()

  res.json({ user, orders, wallet })
})

5️⃣ Micro Frontend Architecture (Frontend Level)

❓ What is Micro Frontend?

Micro Frontends apply microservices concepts to the frontend. The UI is split into independent apps, each owned by a different team.

Shell App
 ├── Header (Team A)
 ├── Product App (Team B)
 ├── Cart App (Team C)
 └── Payment App (Team D)

Real‑World Analogy – Shopping Mall

• Each shop runs independently
• The mall just hosts them

6️⃣ Micro Frontend Example

Structure

/container-app
/product-app
/cart-app
/payment-app

Container App (Host)

// load remote micro frontend
import('productApp/ProductList')

Product App

export default function ProductList() {
  return 
## Products

}

Each app:

• Has its own repository
• Has its own deployment pipeline
• Can use React, Vue, Angular, etc.

7️⃣ How Everything Fits Together (Big Picture)

Browser
   ↓
Micro Frontend Shell
   ↓
BFF (Web)
   ↓
Microservices
   ↓
Databases

Responsibilities

8️⃣ When to Use What?

Use Microservices When

• Large backend scope
• Need independent scaling
• Multiple backend teams

Use BFF When

• Multiple frontends (Web, Mobile, etc.)
• Heavy API aggregation required
• Need device‑specific responses

Use Micro Frontends When

• Large UI surface area
• Many frontend teams
• Independent UI deployments desired

9️⃣ Pros & Cons Summary

✅ Advantages

• Independent deployments
• Faster development cycles
• Better scalability
• Team autonomy

❌ Challenges

• Increased overall complexity
• Higher DevOps overhead
• Potential network latency from aggregation
• Need for robust observability

🔚 Final Thoughts

Microservices, BFF, and Micro Frontends are not buzzwords — they are survival tools for large‑scale systems.

Start small:

• Monolith → Microservices
• Add BFF when the frontend grows
• Add Micro Frontends when UI teams scale