1 tháng 9, 2025Tiếng Việt

Hướng dẫn toàn diện về định tuyến micro-frontend, khám phá chiến lược điều hướng đa ứng dụng, lợi ích, kỹ thuật triển khai và các thực tiễn tốt nhất để xây dựng ứng dụng web.

Bộ định tuyến Micro-Frontend trong Frontend: Điều hướng giữa các ứng dụng

Trong phát triển web hiện đại, kiến trúc micro-frontend đã trở nên phổ biến như một cách để xây dựng các ứng dụng lớn, phức tạp. Nó bao gồm việc chia một frontend nguyên khối thành các đơn vị nhỏ hơn, độc lập và có thể triển khai được (micro-frontends). Một trong những thách thức cốt lõi trong kiến trúc này là quản lý điều hướng giữa các ứng dụng, cho phép người dùng di chuyển liền mạch giữa các micro-frontend độc lập này. Bài viết này cung cấp hướng dẫn toàn diện về định tuyến micro-frontend trong frontend và điều hướng giữa các ứng dụng.

Micro-Frontend là gì?

Micro-frontend là một phong cách kiến trúc trong đó các ứng dụng frontend có thể triển khai độc lập được kết hợp thành một trải nghiệm người dùng duy nhất, gắn kết. Điều này tương tự như microservices ở backend. Mỗi micro-frontend thường thuộc sở hữu của một nhóm riêng biệt, cho phép tự chủ hơn, chu kỳ phát triển nhanh hơn và bảo trì dễ dàng hơn. Lợi ích của micro-frontend bao gồm:

Triển khai Độc lập: Các nhóm có thể triển khai micro-frontend của họ mà không ảnh hưởng đến các phần khác của ứng dụng.
Đa dạng Công nghệ: Các micro-frontend khác nhau có thể được xây dựng bằng các công nghệ khác nhau, cho phép các nhóm chọn công cụ tốt nhất cho công việc. Ví dụ, một nhóm có thể sử dụng React, trong khi nhóm khác sử dụng Vue.js hoặc Angular.
Khả năng Mở rộng: Ứng dụng có thể mở rộng dễ dàng hơn vì mỗi micro-frontend có thể được mở rộng độc lập.
Cải thiện Khả năng Bảo trì: Các codebase nhỏ hơn dễ hiểu và dễ bảo trì hơn.
Tính Tự chủ của Nhóm: Các nhóm có nhiều quyền kiểm soát hơn đối với mã và quy trình phát triển của riêng họ.

Sự cần thiết của một Bộ định tuyến Micro-Frontend

Nếu không có một chiến lược định tuyến được xác định rõ ràng, người dùng sẽ gặp phải trải nghiệm rời rạc và khó chịu khi điều hướng giữa các micro-frontend. Một bộ định tuyến micro-frontend giải quyết vấn đề này bằng cách cung cấp một cơ chế tập trung để quản lý điều hướng trên toàn bộ ứng dụng. Điều này bao gồm xử lý:

Quản lý URL: Đảm bảo rằng URL phản ánh chính xác vị trí hiện tại của người dùng trong ứng dụng.
Quản lý Trạng thái: Chia sẻ trạng thái giữa các micro-frontend khi cần thiết.
Tải lười (Lazy Loading): Chỉ tải các micro-frontend khi chúng thực sự cần thiết để cải thiện hiệu suất.
Xác thực và Ủy quyền: Xử lý xác thực và ủy quyền người dùng trên các micro-frontends khác nhau.

Các Chiến lược Điều hướng giữa các Ứng dụng

Có một số cách tiếp cận để triển khai điều hướng giữa các ứng dụng trong kiến trúc micro-frontend. Mỗi cách tiếp cận có những ưu điểm và nhược điểm riêng, và lựa chọn tốt nhất phụ thuộc vào các yêu cầu cụ thể của ứng dụng của bạn.

1. Sử dụng Bộ định tuyến Tập trung (Single-Spa)

Single-Spa là một framework phổ biến để xây dựng micro-frontend. Nó sử dụng một bộ định tuyến tập trung để quản lý điều hướng giữa các ứng dụng khác nhau. Ứng dụng chính đóng vai trò điều phối và chịu trách nhiệm hiển thị và gỡ bỏ các micro-frontend dựa trên URL hiện tại.

Cách hoạt động:

Người dùng điều hướng đến một URL cụ thể.
Bộ định tuyến single-spa chặn sự thay đổi URL.
Dựa trên URL, bộ định tuyến xác định micro-frontend nào nên được kích hoạt.
Bộ định tuyến kích hoạt micro-frontend tương ứng và gỡ bỏ bất kỳ micro-frontend nào khác đang hoạt động.

Ví dụ (Single-Spa):

Giả sử bạn có ba micro-frontend: home, products và cart. Bộ định tuyến single-spa sẽ được cấu hình như sau:


import { registerApplication, start } from 'single-spa';

registerApplication(
  'home',
  () => import('./home/home.app.js'),
  location => location.pathname === '/'
);

registerApplication(
  'products',
  () => import('./products/products.app.js'),
  location => location.pathname.startsWith('/products')
);

registerApplication(
  'cart',
  () => import('./cart/cart.app.js'),
  location => location.pathname.startsWith('/cart')
);

start();

Trong ví dụ này, mỗi micro-frontend được đăng ký với single-spa, và một hàm được cung cấp để xác định khi nào micro-frontend nên hoạt động dựa trên URL. Khi người dùng điều hướng đến /products, micro-frontend products sẽ được kích hoạt.

Ưu điểm:

Kiểm soát định tuyến tập trung.
Quản lý trạng thái đơn giản hóa (có thể được xử lý bởi điều phối viên single-spa).
Dễ dàng tích hợp với các ứng dụng hiện có.

Nhược điểm:

Điểm lỗi duy nhất. Nếu bộ điều phối ngừng hoạt động, toàn bộ ứng dụng sẽ bị ảnh hưởng.
Có thể trở thành nút thắt cổ chai về hiệu suất nếu không được triển khai hiệu quả.

2. Module Federation (Webpack 5)

Module Federation của Webpack 5 cho phép bạn chia sẻ mã giữa các bản dựng Webpack khác nhau trong thời gian chạy. Điều này có nghĩa là bạn có thể phơi bày các component, module hoặc thậm chí toàn bộ ứng dụng từ một bản dựng (máy chủ - host) sang một bản dựng khác (từ xa - remote). Điều này tạo điều kiện thuận lợi cho việc xây dựng micro-frontend, trong đó mỗi micro-frontend là một bản dựng Webpack riêng biệt.

Cách hoạt động:

Mỗi micro-frontend được xây dựng như một dự án Webpack riêng biệt.
Một micro-frontend được chỉ định làm ứng dụng máy chủ (host).
Ứng dụng máy chủ xác định các module mà nó muốn tiêu thụ từ các micro-frontend từ xa.
Các micro-frontend từ xa xác định các module mà chúng muốn phơi bày cho ứng dụng máy chủ.
Trong thời gian chạy, ứng dụng máy chủ tải các module được phơi bày từ các micro-frontend từ xa khi cần thiết.

Ví dụ (Module Federation):

Giả sử có một ứng dụng host và một ứng dụng remote.

host/webpack.config.js:


const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        remote: 'remote@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

remote/webpack.config.js:


const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote',
      exposes: {
        './Button': './src/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

Trong ví dụ này, ứng dụng host tiêu thụ component Button từ ứng dụng remote. Tùy chọn shared đảm bảo rằng cả hai ứng dụng sử dụng cùng một phiên bản của react và react-dom.

Ưu điểm:

Kiến trúc phi tập trung. Mỗi micro-frontend độc lập và có thể được phát triển và triển khai riêng biệt.
Chia sẻ mã. Module Federation cho phép bạn chia sẻ mã giữa các ứng dụng khác nhau trong thời gian chạy.
Tải lười (Lazy loading). Các module chỉ được tải khi cần thiết, cải thiện hiệu suất.

Nhược điểm:

Phức tạp hơn để thiết lập và cấu hình so với single-spa.
Yêu cầu quản lý cẩn thận các phụ thuộc được chia sẻ để tránh xung đột phiên bản.

3. Web Components

Web Components là một tập hợp các tiêu chuẩn web cho phép bạn tạo các phần tử HTML tùy chỉnh có thể tái sử dụng. Các component này có thể được sử dụng trong bất kỳ ứng dụng web nào, bất kể framework được sử dụng. Điều này làm cho chúng phù hợp tự nhiên với kiến trúc micro-frontend, vì chúng cung cấp một cách xây dựng và chia sẻ các component UI không phụ thuộc công nghệ.

Cách hoạt động:

Mỗi micro-frontend phơi bày giao diện người dùng của mình dưới dạng một tập hợp các Web Components.
Ứng dụng chính (hoặc một micro-frontend khác) tiêu thụ các Web Components này bằng cách nhập chúng và sử dụng chúng trong HTML của mình.
Các Web Components tự xử lý việc render và logic của chúng.

Ví dụ (Web Components):

micro-frontend-a.js:


class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      
      Hello from Micro-Frontend A!
    `;
  }
}

customElements.define('micro-frontend-a', MyComponent);

index.html (ứng dụng chính):





  Main Application


  Main Application

Trong ví dụ này, tệp micro-frontend-a.js định nghĩa một Web Component có tên micro-frontend-a. Tệp index.html nhập tệp này và sử dụng Web Component trong HTML của nó. Trình duyệt sẽ render Web Component, hiển thị "Hello from Micro-Frontend A!".

Ưu điểm:

Không phụ thuộc công nghệ. Web Components có thể được sử dụng với bất kỳ framework nào hoặc không có framework nào cả.
Khả năng tái sử dụng. Web Components có thể dễ dàng tái sử dụng trên các ứng dụng khác nhau.
Tính đóng gói. Web Components đóng gói các style và logic riêng của chúng, ngăn ngừa xung đột với các phần khác của ứng dụng.

Nhược điểm:

Có thể dài dòng hơn để triển khai so với các cách tiếp cận khác.
Có thể yêu cầu polyfill để hỗ trợ các trình duyệt cũ hơn.

4. Iframes

Iframes (Inline Frames) là một lựa chọn cũ hơn nhưng vẫn khả thi để cô lập các micro-frontend. Mỗi micro-frontend chạy trong iframe riêng của nó, cung cấp mức độ cô lập cao. Giao tiếp giữa các iframe có thể đạt được bằng cách sử dụng API postMessage.

Cách hoạt động:

Mỗi micro-frontend được triển khai dưới dạng một ứng dụng web riêng biệt.
Ứng dụng chính bao gồm mỗi micro-frontend trong một iframe.
Giao tiếp giữa ứng dụng chính và các micro-frontend được thực hiện bằng cách sử dụng API postMessage.

Ví dụ (Iframes):

index.html (ứng dụng chính):





  Main Application


  Main Application

Trong ví dụ này, tệp index.html bao gồm hai iframe, mỗi iframe trỏ đến một micro-frontend khác nhau.

Ưu điểm:

Mức độ cô lập cao. Các micro-frontend hoàn toàn tách biệt với nhau, ngăn ngừa xung đột.
Dễ triển khai. Iframes là một công nghệ đơn giản và dễ hiểu.

Nhược điểm:

Có thể khó giao tiếp giữa các iframe.
Có thể gặp vấn đề về hiệu suất do chi phí của nhiều iframe.
Trải nghiệm người dùng kém do thiếu sự tích hợp liền mạch.

Quản lý trạng thái giữa các Micro-Frontend

Quản lý trạng thái giữa các micro-frontend là một khía cạnh quan trọng của điều hướng giữa các ứng dụng. Một số chiến lược có thể được sử dụng:

Trạng thái dựa trên URL: Mã hóa trạng thái trong URL. Cách tiếp cận này làm cho trạng thái ứng dụng có thể chia sẻ qua URL và dễ dàng đánh dấu trang.
Quản lý trạng thái tập trung (Redux, Vuex): Sử dụng thư viện quản lý trạng thái toàn cục để chia sẻ trạng thái giữa các micro-frontend. Điều này đặc biệt hữu ích cho các ứng dụng phức tạp với trạng thái chia sẻ đáng kể.
Sự kiện tùy chỉnh: Sử dụng các sự kiện tùy chỉnh để giao tiếp các thay đổi trạng thái giữa các micro-frontend. Cách tiếp cận này cho phép kết nối lỏng lẻo giữa các micro-frontend.
Bộ nhớ trình duyệt (LocalStorage, SessionStorage): Lưu trữ trạng thái trong bộ nhớ trình duyệt. Cách tiếp cận này phù hợp cho trạng thái đơn giản không cần chia sẻ trên tất cả các micro-frontend. Tuy nhiên, hãy lưu ý đến các cân nhắc bảo mật khi lưu trữ dữ liệu nhạy cảm.

Xác thực và Ủy quyền

Xác thực và ủy quyền là các khía cạnh quan trọng của bất kỳ ứng dụng web nào, và chúng càng trở nên quan trọng hơn trong kiến trúc micro-frontend. Các cách tiếp cận phổ biến bao gồm:

Dịch vụ xác thực tập trung: Một dịch vụ chuyên dụng xử lý xác thực người dùng và cấp phát token (ví dụ: JWT). Các micro-frontend sau đó có thể xác thực các token này để xác định quyền ủy quyền của người dùng.
Module xác thực chia sẻ: Một module chia sẻ chịu trách nhiệm xử lý logic xác thực. Module này có thể được sử dụng bởi tất cả các micro-frontend.
Xác thực biên (Edge Authentication): Xác thực được xử lý ở biên mạng (ví dụ: sử dụng reverse proxy hoặc API gateway). Cách tiếp cận này có thể đơn giản hóa logic xác thực trong các micro-frontend.

Các Thực tiễn Tốt nhất cho Định tuyến Micro-Frontend

Dưới đây là một số thực tiễn tốt nhất cần ghi nhớ khi triển khai định tuyến micro-frontend:

Giữ đơn giản: Chọn chiến lược định tuyến đơn giản nhất đáp ứng nhu cầu của bạn.
Tách rời Micro-Frontends: Giảm thiểu sự phụ thuộc giữa các micro-frontend để thúc đẩy phát triển và triển khai độc lập.
Sử dụng cấu trúc URL nhất quán: Duy trì cấu trúc URL nhất quán trên tất cả các micro-frontend để cải thiện trải nghiệm người dùng và SEO.
Triển khai tải lười (Lazy Loading): Chỉ tải các micro-frontend khi chúng cần thiết để cải thiện hiệu suất.
Giám sát hiệu suất: Thường xuyên giám sát hiệu suất của ứng dụng micro-frontend của bạn để xác định và giải quyết mọi nút thắt cổ chai.
Thiết lập các kênh giao tiếp rõ ràng: Đảm bảo rằng các nhóm làm việc trên các micro-frontend khác nhau có các kênh giao tiếp rõ ràng để phối hợp nỗ lực phát triển và giải quyết mọi vấn đề tích hợp.
Triển khai xử lý lỗi mạnh mẽ: Triển khai xử lý lỗi mạnh mẽ để xử lý các lỗi trong từng micro-frontend một cách duyên dáng và ngăn chúng ảnh hưởng đến toàn bộ ứng dụng.
Kiểm thử tự động: Triển khai kiểm thử tự động toàn diện, bao gồm kiểm thử đơn vị, kiểm thử tích hợp và kiểm thử đầu cuối, để đảm bảo chất lượng và sự ổn định của ứng dụng micro-frontend của bạn.

Kết luận

Định tuyến micro-frontend là một khía cạnh phức tạp nhưng thiết yếu để xây dựng các ứng dụng web có khả năng mở rộng và dễ bảo trì. Bằng cách xem xét cẩn thận các chiến lược định tuyến khác nhau và các thực tiễn tốt nhất được nêu trong bài viết này, bạn có thể tạo ra trải nghiệm liền mạch và thân thiện với người dùng. Việc chọn cách tiếp cận phù hợp, cho dù đó là bộ định tuyến tập trung như Single-Spa, Module Federation, Web Components hay thậm chí là Iframes, phụ thuộc vào nhu cầu và ưu tiên cụ thể của bạn. Hãy nhớ ưu tiên tính tách rời, cấu trúc URL nhất quán và tối ưu hóa hiệu suất. Bằng cách triển khai một chiến lược định tuyến được thiết kế tốt, bạn có thể khai thác toàn bộ tiềm năng của kiến trúc micro-frontend và xây dựng các ứng dụng web thực sự vượt trội cho đối tượng toàn cầu.