Giới thiệu
Micro Frontend mở rộng ý tưởng Microservices lên frontend: chia ứng dụng web thành các phần nhỏ, mỗi phần do một team sở hữu, develop và deploy độc lập. Bài này giải thích tại sao cần Micro Frontend và khi nào nên (hoặc không nên) áp dụng.
1. Micro Frontend là gì?
1.1 Định nghĩa
"An architectural style where independently deliverable frontend applications are composed into a greater whole." — Cam Jackson, Martin Fowler Blog
Monolith Frontend: Micro Frontend:
┌─────────────────────────┐ ┌─────────────────────────┐
│ Single SPA │ │ Shell Application │
│ ┌─────────────────────┐ │ │ ┌──────┐ ┌──────┐ ┌──┐ │
│ │ Header │ │ │ │Shared│ │Shared│ │ │ │
│ ├──────┬──────┬───────┤ │ │ │Header│ │Footer│ │ │ │
│ │Produ-│ Cart │ Order │ │ │ └──────┘ └──────┘ │ │ │
│ │cts │ │ │ │ │ ┌──────┐ ┌──────┐ │ │ │
│ │ │ │ │ │ ──► │ │Produc│ │ Cart │ │Or│ │
│ │ │ │ │ │ │ │t MFE │ │ MFE │ │de│ │
│ │ │ │ │ │ │ │Team A│ │Team B│ │rC│ │
│ ├──────┴──────┴───────┤ │ │ └──────┘ └──────┘ └──┘ │
│ │ Footer │ │ │ Deploy Deploy De │
│ └─────────────────────┘ │ │ riêng riêng ploy │
└─────────────────────────┘ └─────────────────────────┘
1 team, 1 repo, 1 deploy N teams, N repos, N deploys
1.2 Micro Frontend vs Component Library
| Component Library | Micro Frontend | |
|---|---|---|
| Deploy | Cùng host app | Độc lập |
| Team ownership | Shared | Dedicated team |
| Tech stack | Same | Can differ |
| Runtime loading | Build-time | Runtime |
| Data/state | Shared in memory | Isolated |
2. Tại sao cần Micro Frontend?
2.1 Bài toán thực tế
Bạn có 5 teams làm việc trên 1 SPA monolith:
- PR conflicts liên tục (500+ components, shared state)
- Merge Queue dài → deploy 1 lần/tuần
- 1 team muốn upgrade React 18, nhưng cần toàn bộ app migrate
- Bug ở product page → rollback cả app (cart, order cũng bị affect)
→ Micro Frontend giải quyết organizational scaling problem.
2.2 Lợi ích chính
| Lợi ích | Mô tả |
|---|---|
| Independent Deployment | Ship product page mà không ảnh hưởng cart |
| Team Autonomy | Mỗi team own end-to-end (UI → BFF → Service) |
| Tech Flexibility | Team A dùng React, Team B dùng Vue (nếu cần) |
| Incremental Upgrade | Upgrade từng MFE, không cần big bang |
| Fault Isolation | Bug ở MFE A không crash MFE B |
| Faster Development | Smaller codebase = faster build, test, deploy |
3. Trade-offs & Challenges
3.1 Khi Micro Frontend KHÔNG phù hợp
- Team nhỏ (< 5 devs): overhead quá lớn so với lợi ích
- Simple app: landing page, blog, dashboard đơn giản
- Tight UX coupling: ứng dụng cần seamless UX giữa các phần
- Performance-critical: thêm runtime overhead (loading, bootstrapping)
3.2 Complexity costs
Micro Frontend thêm complexity:
├── Infrastructure: CI/CD cho nhiều apps
├── Shared dependencies: versioning hell
├── UX Consistency: design system bắt buộc
├── Communication: cross-MFE events
├── Performance: bundle size, load time
├── Testing: integration testing across MFEs
└── Developer Experience: local dev setup phức tạp
4. Decision Framework
Bạn nên dùng Micro Frontend khi:
✅ Team size: 15+ frontend developers
✅ Multiple teams working on same app
✅ Deploy frequency: team muốn deploy độc lập
✅ App complexity: 10+ distinct features/pages
✅ Tech migration: cần incremental migration
❌ Skip Micro Frontend khi:
❌ Team < 5 developers
❌ Single team, shared ownership
❌ App chưa đủ phức tạp
❌ Performance là yếu tố quyết định
❌ Team chưa có experience với Microservices
Tóm tắt
Micro Frontend không phải silver bullet — nó giải quyết organizational scaling problem. Nếu bạn không có vấn đề đó, đừng tạo ra complexity không cần thiết.
Bài tiếp theo: Bài 11: Micro Frontend Integration Strategies — Build-time vs Run-time