Chi tiết bằng tiếng Việt

💡 Điểm nổi bật trong ý tưởng:

• Ứng dụng được chia thành nhiều service/module (micro-apps), mỗi service/module  phụ trách một tính năng, dễ dàng nâng cấp, thay thế hay bảo trì.
• Mỗi service/module có codebase riêng, giúp dễ dàng bảo trì, nâng cấp hoặc thay thế mà không ảnh hưởng đến các phần khác của hệ thống.
• Các flie tĩnh (ví dụ: SVG, images, audio trong thư mục public) có thể chia sẻ sử dụng giữa các service/module.
• Các service có thể chia sẻ storage và cookies do main service quản lý, đảm bảo trạng thái đăng nhập (login states) và dữ liệu người dùng được đồng bộ.
• Tạo sự linh hoạt trong mô hình triển khai: service/module có thể được deploy riêng biệt (independent deployment) hoặc deploy gộp chung trong main app tùy theo nhu cầu.
• Hiệu suất build được tối ưu: Việc build từng service/module riêng lẻ nhanh hơn nhiều so với build toàn bộ hệ thống. Khi được kết hợp vào main source, thời gian build tổng thể vẫn giảm đáng kể.
• Hỗ trợ phát triển song song: dev hoặc team khác nhau có thể làm việc trên các service/module riêng biệt mà không bị xung đột mã, nâng cao hiệu quả làm việc so với monolithic codebase.
• Mỗi service có thể áp dụng công nghệ phù hợp riêng — ví dụ: một số service/module có thể dùng CSR (Client-Side Rendering) trong khi service/module khác dùng SSR (Server-Side Rendering).
• Tính linh hoạt về công nghệ: Các service có thể được xây dựng bằng React, Next, Vue hoặc Angualar tùy thuộc vào trường hợp sử dụng cụ thể và chuyên môn của nhóm.
• Khả năng mở rộng (Scalability): Các service/module mới có thể dễ dàng được thêm, gỡ bỏ hoặc cập nhật mà không làm gián đoạn toàn bộ hệ thống.
• Khả năng tái sử dụng (Reusability): một service/module có thể được dùng lại cho nhiều ứng dụng khác nhau.

🚀 Video demo hiện tại áp dụng kiến trúc này với 8 service/module (6 Next App, 1 React App, 1 Vue App), và em tự build và deploy tất cả các service/module cùng server NestJS, tất cả chạy trên môi trường production.

👉  video demo: Demo MicroFrontend

👉  ví dụ 1 service hoàn toàn có thể chạy độc lập trong demo : [Service Portfolio](https://l.facebook.com/l.php?u=https%3A%2F%2Fprofile-hoang.vercel.app%2F%3Ffbclid%3DIwZXh0bgNhZW0CMTAAYnJpZBExa0J6OG9jZ0ZXOUtUNFFHRgEeStBDCdA5oi_hTE6_z5ihDjkydVx5xS46iRoyXzkuiEQlNXnFE-AsKwufWFY_aem_Bbb8FbFl-0rx8BYce1IJVA&h=AT0RZOiPKXeZxmE9sFn83BdH_EJF_HVBriSqNs_dO-RjiKucdB9u1xtuJyep5qS7qIon64xXGvoB0bCpl4Ke8nz-h3I192luQTiDBkc24IeN8kh6K5kNDgFRHpaVjUG6HWExLYXxXz2CCjJJeGL3PQ&__tn__=R]-R&c[0]=AT2OoHSKyIL2oSlZO88VFtpKNF3mtCvuqCdb8-z_Fxl4Fr6_mPzopbaU46-gsoQuJvTTrdQf60wzpqD4jiw5wjR4Y4P9pHJ4Mjfl6cXIFIZM-gPwio-B5UEo33eoH1qPTQV-yp7ROuRx_iYixUqox_GQgFkpocdO3fwjSVq61YmZ) ,

👉 Cập nhật thêm: Đã thêm service Angualar app

Screen Recording 2025-09-05 at 22.07.58.mov

• Main service/module là Login page, cho phép điều hướng mượt mà giữa các service khác nhau.
• Hệ thống bao gồm 8 service/module: 6 ứng dụng Next,1 ứng dụng React, và 1 ứng dụng Vue, tất cả đều được tích hợp trong cùng một architecture.