Giới thiệu Micro‑frontend là cách chia ứng dụng lớn thành nhiều phần nhỏ, độc lập, mỗi phần có thể phát triển, triển khai và mở rộng riêng biệt. Với React Web và React Native, cách tiếp cận này giúp các team song song làm việc mà không gây xung đột bundle hay version. Khi nào nên áp dụng - Dự án có nhiều team chức năng (ví dụ: thanh toán, hồ sơ người dùng, thông báo). - Cần phát hành tính năng độc lập mà không deploy toàn bộ app. - Yêu cầu công nghệ khác nhau cho từng miền (Web dùng Next.js, Native dùng Expo). Các bước triển khai cơ bản 1. Xác định ranh giới domain: Vẽ sơ đồ nghiệp vụ, gán từng domain cho một micro‑app. 2. Chọn shell/container: Web dùng Module Federation (Webpack 5) hoặc single‑spa; Native dùng React Native Host + Metro config custom. 3. Định nghĩa contract giao tiếp: Sử dụng Event Bus (mitt) hoặc Custom Native Bridge để truyền dữ liệu giữa shell và micro‑apps. 4. Cấu hình build riêng: Mỗi micro‑app có package.json, tsconfig, eslint riêng; CI/CD build từng repo riêng rồi publish lên registry nội bộ. 5. Quản lý version shared dependencies: React, React‑Native, navigation library đặt ở peerDependencies, shell cung cấp bản duy nhất. 6. Triển khai: Web deploy lên CDN (Vercel, Netlify) với cache‑busting hash; Native dùng CodePush hoặc OTA update cho từng micro‑app. Ví dụ thực tế - Repo "payment-web" (Next.js) và "payment-native" (Expo) cùng implement interface PaymentModule { init(config); render(); }. - Shell web import payment-web qua Module Federation; shell native load payment-native qua dynamic import() sau khi fetch manifest từ server. - Khi user bấm "Thanh toán", shell phát sự kiện "PAYMENT_START" kèm orderId; micro‑app xử lý UI, gọi API, sau đó emit "PAYMENT_DONE". Mẹo và cạm bẫy thường gặp - Tránh duplicate React instance: Luôn đặt react, react-dom, react-native ở peerDependencies và cung cấp từ shell. - Đồng bộ routing: Web dùng URL, Native dùng deep link; hãy chuẩn hóa schema (ví dụ: app://payment?order=123). - Testing: Viết contract test cho từng micro‑app, sau đó integration test trên shell với Cypress (web) và Detox (native). - Monitoring: Gắn Sentry scope riêng cho mỗi micro‑app để dễ dàng lọc lỗi. Kết luận Micro‑frontend mang lại sự tự chủ cho từng team nhưng đòi hỏi kỷ luật về contract, versioning và CI/CD. Bắt đầu từ một domain nhỏ, đo lường thời gian deploy và tỷ lệ lỗi trước khi mở rộng sang toàn bộ hệ thống.