Giới thiệu

Xin chào các bạn! Chào mừng các bạn trở lại với series "Chập chững làm quen với Microfrontend". Hôm nay, trong bầu không khí của một ngày cuối tuần tươi đẹp, mình rất hứng khởi để chia sẻ với các bạn về cách tích hợp nhiều UI Frameworks vào kiến trúc Microfrontend.

Microfrontend là một kiến trúc hiện đại cho phép các nhóm phát triển tự do lựa chọn công nghệ mà họ ưa thích cho dự án của mình. Cụ thể, một trong những điểm mạnh của kiến trúc này là khả năng hỗ trợ nhiều UI Framework khác nhau, bao gồm React, Vue, Angular, và nhiều framework khác mà các team có thể tự do lựa chọn.

Bài viết hôm nay sẽ hướng dẫn các bạn cách thiết lập một ứng dụng shell với ba Microfrontend (MFE) dựa trên các framework React, Vue và Angular. Ngoài ra, chúng ta sẽ mở rộng để hỗ trợ thêm cho Preact và Svelte, cũng như các Web Component.

Cần chuẩn bị trước

• Đầu tiên, hãy clone mã nguồn từ kho chứa sau: GitHub Repository

• Chạy lệnh sau trong từng thư mục của ứng dụng:

  bash Copy

  npm install

• Cuối cùng, khởi động các ứng dụng:

  bash Copy

  # angular-app
  npm start
  
  # app-shell
  npm start
  
  # react-app
  npm run dev
  
  # vue-app
  npm run build
  npm run preview

Mở trình duyệt và truy cập địa chỉ http://localhost:4200, đăng nhập với tài khoản user/user để kiểm tra xem tất cả các MFE đã chạy chưa.

Hỗ trợ Preact

Chúng ta sẽ bắt đầu với Preact, một phiên bản nhẹ của React. Đầu tiên, tạo một project mới cho Preact bằng cách sử dụng module federation:

npm create rsbuild@latest

Khi được nhắc, chọn các tùy chọn phù hợp và sau đó cài đặt các gói cần thiết:

npm i
npm add @module-federation/enhanced

Tiếp theo, tạo tệp bootstrap.tsx và loader.ts, cấu hình module federation cho Preact để MFE có thể vận hành trong app shell.

Hỗ trợ Svelte

Giống như với Preact, Svelte cũng sẽ được tích hợp vào kiến trúc này. Thành lập một folder mới và dùng template hiện có của Svelte với Webpack.

npx degit sveltejs/template-webpack svelte-app

Cài đặt các dependencies và cấu hình module federation tương tự như đã nêu ở trên.

Hỗ trợ Web Component

Web Component là một lựa chọn tuyệt vời cho những ai đang làm việc với kiến trúc microfrontend. Các bước cài đặt và tích hợp Web Component là khá đơn giản. Thực hiện tương tự như từng bước với các framework trước đó.

Hỗ trợ Self-Run

Cuối cùng, chúng ta sẽ khám phá một thay thế nữa cho microfrontend: Self-Run. Với giải pháp này, MFE có thể chạy mã tự thực thi mà không cần phụ thuộc vào bất kỳ framework nào khác.

Kết luận

Việc mở rộng hỗ trợ cho nhiều UI Frameworks trong kiến trúc Microfrontend không còn là một nhiệm vụ khó khăn. Bằng cách sử dụng các wrapper cho từng framework, chúng ta có thể dễ dàng tổ chức mã và mở rộng các ứng dụng của mình.

Hy vọng các bạn sẽ có thêm nhiều ý tưởng thú vị để ứng dụng vào dự án của mình. Cảm ơn các bạn đã theo dõi, chúc các bạn một ngày cuối tuần vui vẻ và hẹn gặp lại trong các bài viết tiếp theo!
source: viblo