Kiến trúc tổng thể của một micro-frontend (gọi ngắn gọn là một module) được mô tả trong hình 3.24 gồm các thành phần: thành phần web (web component), bộ định tuyến (router), bộ khung chứa ứng dụng (app component container), điểm đầu vào của ứng dụng SPA (single spa entry) và thành phần gốc ứng dụng (root application).
Hình 3.24. Kiến trúc tổng thể của một micro-frontend
Nhiệm vụ của từng thành phần trong kiến trúc trên được diễn giải như sau:
• Web Component: cung cấp các thành phần web sẵn có hoặc do lập trình viên
tự định nghĩa bằng cách kế thừa lại các thành phần cơ bản ban đầu. Tùy theo framework sử dụng mà ta sẽ có các thành phần web tương ứng, ví dụ có Angular Component, React Component. Mã nguồn trong hình 3.25 minh họa việc tự định nghĩa một thành phần web có tên là “CemsCustomAppModule” trong Angular.
• Router: thực hiện điều hướng các URL tới cụ thể từng hàm hay phương thức
trong ứng dụng. Router cung cấp cơ chế để chuyển giữa các trang và thay đổi dữ liệu ở thanh điều hướng của trình duyệt. Đối với module viết bằng
64
Angular, chúng ta sử dụng thành phần Angular Router52. Còn với module viết bằng ReactJS, thành phần React Router53 sẽ được dùng.
• App Component Container: được xem như một khung chính để chứa các
thành phần của ứng dụng.
• Single SPA Entry: là điểm đầu vào thực thi của chương trình. Nó đảm nhiệm
một số tác vụ như thực hiện đăng ký ứng dụng, quản lý vòng đời của một đối tượng.
• Root Application: được xem là một thành phần cấu hình gốc của một ứng
dụng single-spa. Nhiệm vụ chính của nó là quản lý tiến trình đăng ký, nạp các module vào ứng dụng. Các module con sẽ được đăng ký bằng các quy tắc cấu hình tại thành phần này [31].
Hình 3.25. Ví dụ tạo một thành phần web trong Angular