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 ]
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 ────────┘
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' })
})
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
👉 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
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
BFF internally:
/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 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)
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
Container App (Host)
// load remote micro frontend
import('productApp/ProductList')
Product App
export default function ProductList() {
return <h2>Products</h2>
}
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
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