Chào Mừng Các Bạn Đến Với Bài Viết Về Microfrontend
Xin chào các bạn! Hôm nay, chúng ta sẽ cùng nhau khám phá một chủ đề thú vị trong kiến trúc Microfrontend (MFE) - đó là các giải pháp để xử lý CSS một cách hiệu quả.
Vấn Đề Hiện Tại
Trong kiến trúc MFE, mục tiêu là cho phép mỗi Microfrontend tự do trong việc chọn công nghệ, quản lý mã nguồn và tự triển khai. Tuy nhiên, điều này dẫn đến một vấn đề lớn: App Shell trở thành một môi trường chung, nơi CSS của các MFE có thể xung đột lẫn nhau. Hệ quả là các kiểu dáng (styles) của một MFE có thể làm “gãy” kiểu dáng của MFE khác.
Ví dụ, nếu MFE A dùng CSS toàn cục và MFE B cũng làm tương tự, rất dễ xảy ra xung đột do các quy tắc CSS không được giới hạn trong phạm vi của từng MFE. Điều này gây khó khăn trong việc duy trì và phát triển ứng dụng.
Hướng Dẫn Setup Dự Án
- Clone source code mẫu từ đây.
- Chạy
npm installcho từng thư mục dự án. - Cấu trúc dự án sẽ gồm các thành phần như sau:
- App Shell và Angular App sử dụng Webpack
- React App sử dụng rsbuild và module federation
- Vue App sử dụng Vite
- Mở trình duyệt và truy cập địa chỉ
http://localhost:4200, đăng nhập với tài khoảnuser/userđể xem kết quả.
Giải Pháp Để Giới Hạn CSS
1. Emulated CSS / Shadow DOM (Angular)
Angular tự động giới hạn CSS bằng cách sử dụng ViewEncapsulation.Emulated, điều này giúp tránh xung đột giữa các component. Bạn có thể thay đổi thuộc tính này trong file component. ViewEncapsulation.ShadowDom cũng là một lựa chọn nhưng có thể gây ra một số vấn đề khó khăn khi triển khai.
2. Scoped CSS (Vue)
Vue cho phép bạn sử dụng thuộc tính scoped trong thẻ <style>, giúp giới hạn CSS chỉ áp dụng cho component đó. Điều này rất hữu ích để ngăn chặn xung đột với CSS toàn cầu.
3. CSS Modules (React)
React sử dụng CSS Modules để giới hạn phạm vi của CSS. Bạn chỉ cần đặt tên file CSS theo quy tắc *.module.css và import vào component. Điều này đảm bảo rằng các tên class sẽ được đổi thành duy nhất, giảm thiểu xung đột.
Thảo Luận Về Hiệu Năng
Cần lưu ý rằng việc sử dụng Attribute Selectors trong Emulated CSS và Scoped CSS có thể gây ra vấn đề về hiệu năng so với việc sử dụng class thông thường. Điều này không quá nghiêm trọng đối với ứng dụng nhỏ, nhưng với ứng dụng lớn hơn, bạn có thể cần xem xét vấn đề này.
Khi Nào Cần Sử Dụng CSS Toàn Cục?
Nếu bạn phải sử dụng CSS toàn cục, hãy đặt các quy tắc CSS trong một class cha duy nhất cho từng MFE. Điều này giúp giảm thiểu xung đột giữa các component.
Khuyến Khích Sử Dụng Design System Chung
Việc sử dụng một design system chung cho toàn bộ hệ thống sẽ giúp các MFE tuân thủ một tiêu chuẩn nhất quán, giúp cải thiện trải nghiệm người dùng và giảm thiểu xung đột trong CSS.
Kết Luận
Giải quyết vấn đề xử lý CSS trong kiến trúc Microfrontend là một thách thức thú vị, đòi hỏi cách tiếp cận sáng tạo và linh hoạt. Hy vọng rằng bài viết này cung cấp cho bạn những giải pháp thực tiễn để áp dụng trong dự án của mình. Hãy cùng nhau phát triển và hoàn thiện ứng dụng Microfrontend, mang lại trải nghiệm tốt nhất cho người dùng.
Chúc các bạn thành công và hẹn gặp lại trong những bài viết tiếp theo!
source: viblo
