Giải Quyết Các Vấn Đề Hóc Búa Về Routing Trong Kiến Trúc Microfrontend

Cập nhật gần nhất 29/12/2024

Chào các bạn, mình lại trở lại với series "Chập chững làm quen với Microfrontend". Trong bài viết hôm nay, chúng ta sẽ khám phá một trong những thách thức lớn mà đội ngũ phát triển có thể gặp phải khi làm việc với kiến trúc Microfrontend (MFE): Routing.

Hãy chuẩn bị sẵn sàng để cùng mình khám phá thế giới Microfrontend nào! 🛥️

Vấn Đề Hiện Tại

Trước đây, trong các bài viết trước, mình đã đề cập đến một số vấn đề đáng chú ý liên quan đến MFE, nhưng các ví dụ chỉ dừng lại ở mức hiển thị Widget. Tất cả các Widget đều nằm trên một route duy nhất: /main - MainComponent. Tuy nhiên, thực tế cho thấy, các ứng dụng thường yêu cầu phải có khả năng routing để:

Các Widget hoạt động như một ứng dụng độc lập (Standalone App), tức là giống như một Single Page Application (SPA) mà chúng ta thường sử dụng, giúp người dùng có trải nghiệm di chuyển giữa các màn hình mượt mà hơn.
Kết hợp với một SPA sẵn có, ví dụ như một ứng dụng React đã được cấu hình với react-router, và giờ chúng ta muốn tích hợp nó vào kiến trúc MFE.

Vậy chúng ta cần làm gì để hỗ trợ routing và những vấn đề nào có thể phát sinh?

Cài Đặt

Đầu tiên, bạn hãy clone source code mẫu của mình từ đây: viblo-mfe-routing.

Sau khi clone xong, hãy chạy các lệnh sau:

Copy

npm install

npm start

Ứng dụng sẽ tự động mở trên trình duyệt tại địa chỉ http://localhost:4200. Bạn sẽ thấy các MFE mà mình đã giới thiệu ở các bài viết trước, nhưng với một số cập nhật mới.

Chức Năng Mới

Khi mở ứng dụng, bạn sẽ thấy có thêm một nút để chuyển đổi giữa Widget View và App View. Khi vào App View, bạn sẽ thấy màn hình trắng và có dropdown chứa danh sách các MFE có thể hiển thị, cùng với khả năng routing được thiết lập sẵn.

Tổng Quan

Do việc thiết lập routing có thể khá phức tạp, mình đã chuẩn bị sẵn. Bài viết này sẽ không chỉ tập trung vào việc code thêm mà chủ yếu là giúp bạn hiểu rõ về các cấu hình và những vấn đề có thể gặp phải.

Cấu Trúc Tệp `loader.ts`

Cấu trúc thư mục của ứng dụng này bao gồm App Shell và ba MFE: Angular, React, Vue. Đặc biệt, trong tệp loader.ts của mỗi MFE, chúng ta đã cập nhật để hỗ trợ nhiều widget:

Copy

import App from "./App.vue";
import AppView from "./components/appview/AppView.vue";
import router from "./router";

const widget = {
  id: "VUE_WIDGET",
  framework: "vue",
  component: App,
  title: "My Vue Widget",
};

const app = {
  id: "VUE_APP",
  framework: "vue",
  component: AppView,
  routeName: "vue-app",
  appView: true,
  plugins: [router],
  title: "Vue App",
};

export { widget, app };

Mỗi widget cần phải có một ID duy nhất, với những widget muốn hiển thị ở App View, cần được đặt appView=true và định nghĩa thêm routeName.

Cấu Hình Routing

Vấn Đề Phụ Thuộc Vào App Shell

Khi cấu hình router ở mỗi MFE, bạn cần chú ý đến việc khai báo basename. Nếu không, routing của MFE sẽ không tương thích với App Shell, dẫn đến việc xung đột route.

Giải Pháp Khuyến Nghị

Chúng ta có thể truyền window.location.pathname cho mỗi MFE. Điều này giúp đảm bảo rằng MFE luôn biết mình đang ở đâu trong cấu trúc routing của ứng dụng.

Chuyển Tiếp Đường Dẫn Trực Tiếp Đến MFE

Khi người dùng truy cập trực tiếp vào URL của một MFE, nếu chưa đăng nhập, họ có thể được chuyển đến màn hình login.

Cấu Hình Tệp `loader.ts`

Cấu hình sẽ bị phân tách giữa các framework do mỗi framework có những yêu cầu riêng, ví dụ: Angular cần loadChildren, Vue cần khai báo plugins, trong khi React thì không yêu cầu.

Lazyload Các Module Angular

Để tối ưu hóa, chúng ta nên thiết lập lazy-loading cho các module Angular. Điều này giúp giảm kích thước của bundle khi người dùng chưa truy cập vào Angular App.

Re-render Trong App Shell

Khi điều chỉnh cấu hình router, việc re-render MainComponent sẽ làm ảnh hưởng đến trải nghiệm người dùng. Chúng ta cần cẩn thận trong việc quản lý trạng thái routing để tránh sự cố này.

Routing Không Tương Thích Giữa Các Library

Khi các MFE sử dụng các nền tảng routing khác nhau như Angular, Vue, hoặc React, việc chuyển tiếp giữa chúng có thể gây ra xung đột. Chúng ta cần giải pháp phù hợp để đảm bảo mọi thứ hoạt động suôn sẻ.

Kết Luận

Hy vọng rằng bài viết này sẽ cung cấp cho bạn cái nhìn sâu sắc về cách quản lý Routing trong kiến trúc Microfrontend. Các vấn đề có thể phát sinh đều phụ thuộc vào đặc điểm riêng của từng business, vì vậy hãy linh hoạt để đưa ra giải pháp phù hợp nhất cho công việc của bạn!

Chúc các bạn có một ngày làm việc hiệu quả và hy vọng sẽ gặp lại trong những bài viết tiếp theo! 👋👋
source: viblo