Micro Frontend: Chia Nhỏ Giao Diện Web

Micro frontend architecture chia website lớn thành nhiều ứng dụng frontend nhỏ, độc lập — mỗi team phát triển, test, và deploy phần của mình riêng biệt. Giống concept microservices cho backend, micro frontend áp dụng cho giao diện. Ikea, Spotify, DAZN, và Zalando đã triển khai micro frontend cho website có hàng trăm developer làm việc cùng lúc.

Micro Frontend vs Monolithic Frontend

MONOLITHIC FRONTEND                 MICRO FRONTEND
┌─────────────────────┐       ┌─────────────────────┐
│    Một codebase      │       │  Team A    Team B    │
│    Một framework     │       │ ┌──────┐ ┌──────┐   │
│    Một build         │       │ │Header│ │Product│  │
│    Một deploy        │       │ │(React)│ │(Vue) │   │
│                      │       │ └──────┘ └──────┘   │
│  Tất cả team         │       │  Team C    Team D    │
│  merge vào 1 repo    │       │ ┌──────┐ ┌──────┐   │
│                      │       │ │Cart  │ │Footer│   │
│  ❌ Conflict nhiều   │       │ │(React)│ │(Svelte)│ │
│  ❌ Deploy chậm      │       │ └──────┘ └──────┘   │
│  ❌ Test toàn bộ     │       │  ✓ Deploy riêng      │
└─────────────────────┘       │  ✓ Tech stack riêng   │
                               └─────────────────────┘

3 Cách Triển Khai Micro Frontend

1. Module Federation (Webpack 5 / Vite)

Mỗi micro app build riêng → expose components → shell app import runtime. Phổ biến nhất, performance tốt, shared dependencies (React chỉ load 1 lần).

2. Web Components

Mỗi micro app đóng gói thành custom HTML element (<product-catalog>, <shopping-cart>). Framework-agnostic — React, Vue, Angular đều tạo được Web Components.

3. iFrames (Đơn giản nhất)

Mỗi micro app chạy trong iframe riêng. Cách cũ nhất, đơn giản nhất, nhưng hạn chế: khó chia sẻ state, SEO kém, UX không mượt.

Bảng So Sánh Phương Pháp

Khi Nào Nên Dùng?

Nên: Doanh nghiệp lớn có 3+ team frontend, website enterprise phức tạp, cần migrate dần từ legacy (Angular → React) mà không rewrite toàn bộ.

Không nên: Team nhỏ (< 10 dev), website SME, startup MVP, website landing page đơn giản. Micro frontend tăng overhead — cần infrastructure, build pipeline, và coordination giữa các team. Chỉ có giá trị khi giải quyết vấn đề tổ chức team, không phải vấn đề kỹ thuật.

Ví Dụ Thực Tế

Trang e-commerce lớn:

• Header/Navigation → Team Platform (React)
• Product Search/Filter → Team Discovery (Vue)
• Product Detail → Team Product (React)
• Cart/Checkout → Team Commerce (React)
• Reviews/Ratings → Team Social (Svelte)

Mỗi team deploy hàng ngày phần của mình — không ảnh hưởng team khác. Nếu Cart team có bug, chỉ rollback Cart, các phần khác vẫn hoạt động.

Chúng Tôi Xây Web tại Cái Răng, Cần Thơ tư vấn kiến trúc frontend phù hợp quy mô — từ website đơn giản (monolithic) đến hệ thống thương mại điện tử phức tạp (micro frontend).

Liên hệ tư vấn: Zalo 0817.771.184 | Hotline: 0817.771.184 | Form liên hệ