DEV Community

KAMAL KISHOR
KAMAL KISHOR

Posted on

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

#webdev #programming #javascript #ai

Modern web applications like Netflix, Amazon, Uber, and LinkedIn are built using Microservices, Micro Frontends, and Backend for Frontend (BFF) patterns.

If these terms sound confusing, don’t worry. This blog explains them from zero to advanced, with easy analogies, simple code examples, and clear diagrams.

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 ]
Enter fullscreen mode Exit fullscreen mode

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 backend into small, independent services, each owning its own data and logic.

User Service     Order Service     Payment Service
     │                  │                 │
     └────── API Gateway / BFF ────────┘
Enter fullscreen mode Exit fullscreen mode

Example: E‑commerce App

Service Responsibility
User Service Login, signup, profile
Product Service Products, inventory
Order Service Orders, carts
Payment Service Payments

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' })
})
Enter fullscreen mode Exit fullscreen mode

3️⃣ What Problem Still Exists?

Even with microservices:

  • Frontend must call multiple services
  • Different frontend apps (Web, Mobile) need different APIs
  • Frontend becomes complex

❌ Frontend calling 5 services:

Frontend → User Service
Frontend → Order Service
Frontend → Payment Service
Frontend → Notification Service
Enter fullscreen mode Exit fullscreen mode

👉 This is where BFF comes in.

4️⃣ Backend For Frontend (BFF)

✅ What is BFF?

BFF is a backend layer designed specifically for a frontend.

One frontend → One dedicated backend

Web App → Web BFF → Microservices
Mobile App → Mobile BFF → Microservices
Enter fullscreen mode Exit fullscreen mode

Why BFF?

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

🧠 Example

Frontend needs:

  • User info
  • Orders
  • Wallet balance

Instead of 3 calls:

Frontend → /dashboard
Enter fullscreen mode Exit fullscreen mode

BFF internally:

/dashboard → User Service
           → Order Service
           → Wallet Service
Enter fullscreen mode Exit fullscreen mode

🧩 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 })
})
Enter fullscreen mode Exit fullscreen mode

5️⃣ Micro Frontend Architecture (Frontend Level)

❓ What is Micro Frontend?

Micro Frontends apply microservices concepts to frontend.

Split frontend into independent apps, owned by different teams.

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

Real‑World Analogy 🏬

Shopping Mall:

  • Each shop runs independently
  • Mall just hosts them

6️⃣ Micro Frontend Example

Structure 

/container-app
/product-app
/cart-app
/payment-app
Enter fullscreen mode Exit fullscreen mode

Container App (Host) 

// load remote micro frontend
import('productApp/ProductList')
Enter fullscreen mode Exit fullscreen mode

Product App 

export default function ProductList() {
  return <h2>Products</h2>
}
Enter fullscreen mode Exit fullscreen mode

Each app:

  • Has its own repo
  • Has its own deployment
  • Can use React / Vue / Angular

7️⃣ How Everything Fits Together (Big Picture) 

Browser
   ↓
Micro Frontend Shell
   ↓
BFF (Web)
   ↓
Microservices
   ↓
Databases
Enter fullscreen mode Exit fullscreen mode

Responsibilities

Layer Responsibility
Micro Frontend UI isolation
BFF API aggregation
Microservices Business logic

8️⃣ When to Use What?

Use Microservices When

✔ Large backend
✔ Independent scaling
✔ Multiple teams

Use BFF When

✔ Multiple frontends
✔ Heavy API aggregation
✔ Mobile + Web

Use Micro Frontends When

✔ Large UI
✔ Many frontend teams
✔ Independent UI deployments

9️⃣ Pros & Cons Summary

✅ Advantages

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

❌ Challenges

  • Increased complexity
  • DevOps overhead
  • Network latency
  • Observability required

🔚 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 frontend grows
  • Add Micro Frontends when UI teams scale

Top comments (0)