Một trong những yêu cầu quan trọng của micro-frontends là việc thực hiện điều hướng giữa các thành phần của ứng dụng. Việc lựa chọn các hình thức điều hướng khác nhau phụ thuộc vào cách thức triển khai trong kiến trúc ứng dụng. Như đã đề cập trong phần cơ chế tích hợp, chúng ta có hai phương pháp kết hợp các micro-frontends là “hợp thành phía máy chủ” và “hợp thành phía máy khách”. Vì vậy, sẽ có hai cơ chế điều hướng tương ứng được áp dụng là “điều hướng phía máy chủ” (server-side routing) và “điều hướng phía máy khách” (client-side routing).
2.3.3.1. Điều hướng phía máy chủ
Theo cách này, phía máy chủ chịu trách nhiệm điều hướng các yêu cầu từ phía người dùng tới các ứng dụng. Thông thường, để tránh tập trung quá nhiều việc xử lý logic vào một chỗ, người ta sẽ sử dụng một thành phần máy chủ điều hướng (thuật ngữ gọi là “routing server”, “frontend proxy” hay “reverse proxy”). Khi máy khách gửi các yêu cầu, frontend proxy tiếp nhận các yêu cầu này và thực hiện việc định tuyến để chuyển yêu cầu đến từng micro-frontend phù hợp [25]. Hình 2.13 minh họa cơ chế điều hướng thông qua frontend proxy.
Hình 2.13. Điều hướng các micro-frontends sử dụng frontend proxy
Mô hình điều hướng này có cùng ý tưởng và cách tiếp cận giống như cách sử dụng cổng API trong kiến trúc microservices.
2.3.3.2. Điều hướng phía máy khách
Một hướng tiếp cận khác được sử dụng gọi là “điều hướng phía máy khách”. Với cách này, tác vụ điều hướng được thực hiện bởi bộ phận điều hướng được định nghĩa ở phía máy khách.
37
Để thực hiện, người ta sử dụng một thành phần gọi là “app shell” hay “application shell”17. App shell có nhiệm vụ nạp các micro-frontends vào như một ứng dụng SPA và quản lý việc thực hiện điều hướng giữa các thành phần. Về bản chất, app shell được xem là một ứng dụng cha, nó sẽ chứa tất cả các micro-frontends. Mọi yêu cầu từ phía máy khách đều được đi qua app shell. App shell xử lý lựa chọn các micro-frontends phù hợp với yêu cầu từ máy khách, và thực hiện kết xuất các thành phần đó vào bên trong thẻ <body> của app shell [26].
Hình 2.14. Điều hướng micro-frontends sử dụng app shell
Hình 2.14 mô tả cơ chế điều hướng thông qua “app shell”. Thành phần app shell ở đây được gọi là bộ phận điều hướng, nhiệm vụ của nó bao gồm:
• Tiếp nhận các yêu cầu từ phía máy khách, lắng nghe các sự thay đổi trên URL.
• Thực hiện việc điều hướng yêu cầu tới các micro-frontends phù hợp.
• Thực hiện việc kết xuất để tạo ra phần nội dung và hiển thị các thành phần này vào màn hình ứng dụng cha.
Có một lưu ý rằng, để đảm bảo nguyên tắc đơn nhiệm trong thiết kế, thành phần app shell sẽ không nên chứa bất kỳ một xử lý nào liên quan đến nghiệp vụ của bài toán. Nhiệm vụ chính của nó chỉ là thực hiện việc định tuyến để kết xuất ra các micro- frontends phù hợp. Trong thực tế triển khai, có một số chức năng như việc thực hiện cơ
38
chế xác thực hoặc một số tác vụ liên quan đến tiền xử lý dữ liệu có thể được thực hiện tại đây.
Các framework như Angular hay ReactJS đều cung cấp các thành phần điều hướng, gọi là router để thực hiện cơ chế trên. Ví dụ trong hình 2.15 mô tả các thành phần của một RouterModule18 được cung cấp bởi Angular.
class RouterModule {
static forRoot(routes: Route[], config?: ExtraOptions): ModuleWithProviders<Rout
erModule>
static forChild(routes: Route[]): ModuleWithProviders<RouterModule> }
Hình 2.15. Ví dụ một RouterModule của Angular