JavaScript Module Federation: Hướng Dẫn Toàn Diện về Kiến Trúc Micro-Frontend

Trong bối cảnh phát triển web không ngừng thay đổi, việc xây dựng các ứng dụng lớn và phức tạp có thể nhanh chóng trở thành một nhiệm vụ khó khăn. Kiến trúc nguyên khối truyền thống thường dẫn đến các codebase bị ràng buộc chặt chẽ, cản trở khả năng mở rộng, bảo trì và triển khai độc lập. Micro-frontends cung cấp một giải pháp thay thế hấp dẫn, chia nhỏ ứng dụng thành các đơn vị nhỏ hơn, có thể triển khai độc lập. Trong số các kỹ thuật micro-frontend khác nhau, JavaScript Module Federation nổi bật như một giải pháp mạnh mẽ và tinh tế.

JavaScript Module Federation là gì?

JavaScript Module Federation, được giới thiệu bởi Webpack 5, cho phép các ứng dụng JavaScript chia sẻ mã và các phụ thuộc một cách linh động trong thời gian chạy. Không giống như các phương pháp chia sẻ mã truyền thống phụ thuộc vào các dependency tại thời điểm xây dựng (build-time), Module Federation cho phép các ứng dụng tải và thực thi mã từ các ứng dụng khác, ngay cả khi chúng được xây dựng bằng các công nghệ khác nhau hoặc các phiên bản khác nhau của cùng một thư viện. Điều này tạo ra một kiến trúc thực sự phân tán và tách rời.

Hãy tưởng tượng một kịch bản nơi bạn có nhiều nhóm làm việc trên các phần khác nhau của một trang web thương mại điện tử lớn. Một nhóm có thể chịu trách nhiệm về danh mục sản phẩm, nhóm khác về giỏ hàng, và nhóm thứ ba về xác thực người dùng. Với Module Federation, mỗi nhóm có thể phát triển, xây dựng và triển khai micro-frontend của họ một cách độc lập, mà không cần lo lắng về xung đột hoặc phụ thuộc với các nhóm khác. Ứng dụng chính ("host") sau đó có thể tải và hiển thị động các micro-frontends này ("remotes") trong thời gian chạy, tạo ra một trải nghiệm người dùng liền mạch.

Các khái niệm chính của Module Federation

• Host: Ứng dụng chính tiêu thụ và hiển thị các module từ xa.
• Remote: Một ứng dụng độc lập cung cấp các module để các ứng dụng khác tiêu thụ.
• Shared Modules: Các phụ thuộc được chia sẻ giữa host và remotes. Điều này tránh việc trùng lặp và đảm bảo các phiên bản nhất quán trên toàn bộ ứng dụng.
• Module Federation Plugin: Một plugin của Webpack cho phép sử dụng chức năng Module Federation.

Lợi ích của Module Federation

1. Triển khai độc lập

Mỗi micro-frontend có thể được triển khai độc lập mà không ảnh hưởng đến các phần khác của ứng dụng. Điều này cho phép chu kỳ phát hành nhanh hơn, giảm rủi ro và tăng tính linh hoạt. Một nhóm ở Berlin có thể triển khai cập nhật cho danh mục sản phẩm trong khi nhóm giỏ hàng ở Tokyo tiếp tục làm việc độc lập trên các tính năng của họ. Đây là một lợi thế đáng kể cho các nhóm làm việc phân tán trên toàn cầu.

2. Tăng khả năng mở rộng

Ứng dụng có thể được mở rộng theo chiều ngang bằng cách triển khai mỗi micro-frontend trên các máy chủ riêng biệt. Điều này cho phép sử dụng tài nguyên tốt hơn và cải thiện hiệu suất. Ví dụ, dịch vụ xác thực, thường là một điểm nghẽn về hiệu suất, có thể được mở rộng độc lập để xử lý các tải cao điểm.

3. Cải thiện khả năng bảo trì

Micro-frontends nhỏ hơn và dễ quản lý hơn các ứng dụng nguyên khối, giúp chúng dễ dàng bảo trì và gỡ lỗi hơn. Mỗi nhóm sở hữu codebase của riêng mình, cho phép họ tập trung vào lĩnh vực chuyên môn cụ thể của mình. Hãy tưởng tượng một nhóm toàn cầu chuyên về cổng thanh toán; họ có thể bảo trì micro-frontend cụ thể đó mà không ảnh hưởng đến các nhóm khác.

4. Đa dạng công nghệ

Micro-frontends có thể được xây dựng bằng các công nghệ hoặc framework khác nhau, cho phép các nhóm chọn công cụ tốt nhất cho công việc. Một micro-frontend có thể được xây dựng bằng React, trong khi một cái khác sử dụng Vue.js. Sự linh hoạt này đặc biệt hữu ích khi tích hợp các ứng dụng cũ hoặc khi các nhóm khác nhau có sở thích hoặc chuyên môn khác nhau.

5. Tái sử dụng mã

Các module được chia sẻ có thể được tái sử dụng trên nhiều micro-frontends, giảm thiểu việc trùng lặp mã và cải thiện tính nhất quán. Điều này đặc biệt hữu ích cho các thành phần chung, các hàm tiện ích hoặc hệ thống thiết kế. Hãy tưởng tượng một hệ thống thiết kế nhất quán toàn cầu được chia sẻ trên tất cả các micro-frontends, đảm bảo trải nghiệm thương hiệu thống nhất.

Triển khai Module Federation: Một ví dụ thực tế

Hãy cùng xem qua một ví dụ đơn giản về cách triển khai Module Federation bằng Webpack 5. Chúng ta sẽ tạo ra hai ứng dụng: một ứng dụng host và một ứng dụng remote. Ứng dụng remote sẽ cung cấp một component đơn giản để ứng dụng host sử dụng.

Bước 1: Thiết lập ứng dụng Host

Tạo một thư mục mới cho ứng dụng host và khởi tạo một dự án npm mới:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Cài đặt Webpack và các phụ thuộc của nó:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Tạo một tệp `webpack.config.js` trong thư mục gốc của ứng dụng host với cấu hình sau:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index.js',
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'bundle.js',
 publicPath: 'http://localhost:3000/', // Important for Module Federation
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true,
 },
 module: {
 rules: [
 {
 test: /\.js$/_MARKER_, // Updated regex to include JSX
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: ['@babel/preset-env', '@babel/preset-react'] // Added react preset
 }
 }
 },
 {
 test: /\.css$/i,
 use: ["style-loader", "css-loader"],
 },
 ],
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'host',
 remotes: {
 remoteApp: 'remote@http://localhost:3001/remoteEntry.js', // Pointing to the remote entry
 },
 shared: ['react', 'react-dom'], // Share react
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

Cấu hình này xác định điểm vào (entry point), thư mục đầu ra, cài đặt máy chủ phát triển và plugin Module Federation. Thuộc tính `remotes` chỉ định vị trí của tệp `remoteEntry.js` của ứng dụng remote. Thuộc tính `shared` xác định các module được chia sẻ giữa ứng dụng host và remote. Chúng ta đang chia sẻ 'react' và 'react-dom' trong ví dụ này.

Tạo một tệp `index.html` trong thư mục `public`:

            <!DOCTYPE html>
<html>
<head>
 <title>Host Application</title>
</head>
<body>
 <div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Tạo một thư mục `src` và một tệp `index.js` bên trong nó. Tệp này sẽ tải component từ remote và hiển thị nó trong ứng dụng host:

            import React from 'react';
import ReactDOM from 'react-dom/client';

import RemoteComponent from 'remoteApp/RemoteComponent';

const App = () => (
 <div>
 <h1>Host Application</h1>
 <p>This is the host application consuming a remote component.</p>
 <RemoteComponent />
 </div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

            

              
                Copy
              
            
          

Cài đặt babel-loader và các preset của nó

            npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react style-loader css-loader
            

              
                Copy
              
            
          

Bước 2: Thiết lập ứng dụng Remote

Tạo một thư mục mới cho ứng dụng remote và khởi tạo một dự án npm mới:

            mkdir remote-app
cd remote-app
npm init -y
            

              
                Copy
              
            
          

Cài đặt Webpack và các phụ thuộc của nó:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Tạo một tệp `webpack.config.js` trong thư mục gốc của ứng dụng remote với cấu hình sau:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index.js',
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'bundle.js',
 publicPath: 'http://localhost:3001/', // Important for Module Federation
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true,
 },
 module: {
 rules: [
 {
 test: /\.js$/_MARKER_, // Updated regex to include JSX
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: ['@babel/preset-env', '@babel/preset-react']
 }
 }
 },
 {
 test: /\.css$/i,
 use: ["style-loader", "css-loader"],
 },
 ],
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'remote',
 filename: 'remoteEntry.js',
 exposes: {
 './RemoteComponent': './src/RemoteComponent.js', // Exposing the component
 },
 shared: ['react', 'react-dom'], // Share react
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

Cấu hình này tương tự như ứng dụng host, nhưng có một vài điểm khác biệt chính. Thuộc tính `name` được đặt là `remote`, và thuộc tính `exposes` xác định các module được cung cấp cho các ứng dụng khác. Trong trường hợp này, chúng ta đang cung cấp `RemoteComponent`.

Tạo một tệp `index.html` trong thư mục `public`:

            <!DOCTYPE html>
<html>
<head>
 <title>Remote Application</title>
</head>
<body>
 <div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Tạo một thư mục `src` và một tệp `RemoteComponent.js` bên trong nó. Tệp này sẽ chứa component được cung cấp cho ứng dụng host:

            import React from 'react';

const RemoteComponent = () => (
 <div style={{ border: '2px solid red', padding: '10px', margin: '10px' }}>
 <h2>Remote Component</h2>
 <p>This component is loaded from the remote application.</p>
 </div>
);

export default RemoteComponent;

            

              
                Copy
              
            
          

Tạo một thư mục `src` và một tệp `index.js` bên trong nó. Tệp này sẽ hiển thị `RemoteComponent` khi ứng dụng remote được chạy độc lập (tùy chọn):

            import React from 'react';
import ReactDOM from 'react-dom/client';
import RemoteComponent from './RemoteComponent';

const App = () => (
 <div>
 <h1>Remote Application</h1>
 <RemoteComponent />
 </div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

            

              
                Copy
              
            
          

Bước 3: Chạy ứng dụng

Thêm các script khởi động vào cả hai tệp `package.json`:

            "scripts": {
 "start": "webpack serve"
}
            

              
                Copy
              
            
          

Khởi động cả hai ứng dụng bằng `npm start`. Mở trình duyệt của bạn và truy cập `http://localhost:3000`. Bạn sẽ thấy ứng dụng host đang hiển thị component từ remote. Component remote sẽ có một đường viền màu đỏ xung quanh, cho biết nó được tải từ ứng dụng remote.

Các khái niệm nâng cao và lưu ý

1. Quản lý phiên bản và tính tương thích

Khi chia sẻ các phụ thuộc giữa các micro-frontends, điều quan trọng là phải xem xét việc quản lý phiên bản và tính tương thích. Module Federation cung cấp các cơ chế để chỉ định phạm vi phiên bản và giải quyết xung đột. Các công cụ như phiên bản ngữ nghĩa (semver) trở nên quan trọng trong việc quản lý các phụ thuộc và đảm bảo tính tương thích giữa các micro-frontends khác nhau. Việc không quản lý phiên bản đúng cách có thể dẫn đến lỗi thời gian chạy hoặc hành vi không mong muốn, đặc biệt là trong các hệ thống phức tạp với nhiều micro-frontends.

2. Xác thực và phân quyền

Việc triển khai xác thực và phân quyền trong kiến trúc micro-frontend đòi hỏi phải lập kế hoạch cẩn thận. Các phương pháp phổ biến bao gồm sử dụng một dịch vụ xác thực chung hoặc triển khai xác thực dựa trên token. Bảo mật là tối quan trọng, và việc tuân thủ các phương pháp hay nhất để bảo vệ dữ liệu nhạy cảm là rất cần thiết. Ví dụ, một nền tảng thương mại điện tử có thể có một micro-frontend xác thực chuyên dụng chịu trách nhiệm xác minh thông tin đăng nhập của người dùng trước khi cấp quyền truy cập vào các micro-frontends khác.

3. Giao tiếp giữa các Micro-Frontend

Các micro-frontend thường cần giao tiếp với nhau để trao đổi dữ liệu hoặc kích hoạt các hành động. Có thể sử dụng nhiều mẫu giao tiếp khác nhau, chẳng hạn như sự kiện (events), quản lý trạng thái chia sẻ (shared state management), hoặc các cuộc gọi API trực tiếp. Việc chọn mẫu giao tiếp phù hợp phụ thuộc vào các yêu cầu cụ thể của ứng dụng. Các công cụ như Redux hoặc Vuex có thể được sử dụng để quản lý trạng thái chia sẻ. Sự kiện tùy chỉnh có thể được sử dụng cho việc ghép nối lỏng và giao tiếp không đồng bộ. Các cuộc gọi API có thể được sử dụng cho các tương tác phức tạp hơn.

4. Tối ưu hóa hiệu suất

Việc tải các module từ xa có thể ảnh hưởng đến hiệu suất, đặc biệt nếu các module lớn hoặc kết nối mạng chậm. Tối ưu hóa kích thước của các module, sử dụng tách mã (code splitting), và lưu trữ cache các module từ xa có thể cải thiện hiệu suất. Tải lười (Lazy loading) các module chỉ khi cần thiết là một kỹ thuật tối ưu hóa quan trọng khác. Ngoài ra, hãy xem xét việc sử dụng Mạng phân phối nội dung (CDN) để phục vụ các module từ xa từ các vị trí địa lý gần hơn với người dùng cuối, qua đó giảm độ trễ.

5. Kiểm thử Micro-Frontend

Kiểm thử micro-frontends đòi hỏi một cách tiếp cận khác so với kiểm thử các ứng dụng nguyên khối. Mỗi micro-frontend nên được kiểm thử độc lập, cũng như trong quá trình tích hợp với các micro-frontends khác. Kiểm thử hợp đồng (Contract testing) có thể được sử dụng để đảm bảo rằng các micro-frontends tương thích với nhau. Kiểm thử đơn vị, kiểm thử tích hợp, và kiểm thử đầu cuối đều quan trọng để đảm bảo chất lượng của kiến trúc micro-frontend.

6. Xử lý lỗi và giám sát

Việc triển khai xử lý lỗi và giám sát mạnh mẽ là rất quan trọng để xác định và giải quyết các vấn đề trong kiến trúc micro-frontend. Các hệ thống ghi log và giám sát tập trung có thể cung cấp thông tin chi tiết về tình trạng và hiệu suất của ứng dụng. Các công cụ như Sentry hoặc New Relic có thể được sử dụng để theo dõi lỗi và các chỉ số hiệu suất trên các micro-frontends khác nhau. Một chiến lược xử lý lỗi được thiết kế tốt có thể ngăn chặn các lỗi dây chuyền và đảm bảo trải nghiệm người dùng ổn định.

Các trường hợp sử dụng Module Federation

Module Federation rất phù hợp cho nhiều trường hợp sử dụng, bao gồm:

• Các nền tảng thương mại điện tử lớn: Chia nhỏ trang web thành các đơn vị nhỏ hơn, có thể triển khai độc lập cho danh mục sản phẩm, giỏ hàng, xác thực người dùng và thanh toán.
• Ứng dụng doanh nghiệp: Xây dựng các bảng điều khiển và cổng thông tin phức tạp với các nhóm khác nhau chịu trách nhiệm cho các phần khác nhau.
• Hệ thống quản lý nội dung (CMS): Cho phép các nhà phát triển tạo và triển khai các module hoặc plugin tùy chỉnh một cách độc lập.
• Kiến trúc Microservices: Tích hợp các ứng dụng front-end với các backend microservices.
• Ứng dụng web tiến bộ (PWAs): Tải và cập nhật động các tính năng trong một PWA.

Ví dụ, hãy xem xét một ứng dụng ngân hàng đa quốc gia. Với module federation, các tính năng ngân hàng cốt lõi, nền tảng đầu tư và cổng hỗ trợ khách hàng có thể được phát triển và triển khai độc lập. Điều này cho phép các nhóm chuyên môn tập trung vào các lĩnh vực cụ thể trong khi vẫn đảm bảo trải nghiệm người dùng thống nhất và nhất quán trên tất cả các dịch vụ.

Các giải pháp thay thế cho Module Federation

Mặc dù Module Federation cung cấp một giải pháp hấp dẫn cho kiến trúc micro-frontend, nhưng đó không phải là lựa chọn duy nhất. Các kỹ thuật phổ biến khác bao gồm:

• iFrames: Một cách tiếp cận đơn giản nhưng thường kém linh hoạt, nhúng một ứng dụng vào bên trong một ứng dụng khác.
• Web Components: Các phần tử HTML tùy chỉnh có thể tái sử dụng trên các ứng dụng khác nhau.
• Single-SPA: Một framework để xây dựng các ứng dụng trang đơn với nhiều framework.
• Tích hợp tại thời điểm xây dựng: Kết hợp tất cả các micro-frontend thành một ứng dụng duy nhất trong quá trình xây dựng.

Mỗi kỹ thuật đều có những ưu 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. Module Federation tạo sự khác biệt với tính linh hoạt trong thời gian chạy và khả năng chia sẻ mã động mà không yêu cầu xây dựng lại và triển khai lại toàn bộ tất cả các ứng dụng.

Kết luận

JavaScript Module Federation là một kỹ thuật mạnh mẽ để xây dựng các kiến trúc micro-frontend có khả năng mở rộng, bảo trì và độc lập. Nó mang lại nhiều lợi ích, bao gồm triển khai độc lập, tăng khả năng mở rộng, cải thiện khả năng bảo trì, đa dạng công nghệ và tái sử dụng mã. Bằng cách hiểu các khái niệm chính, thực hiện các ví dụ thực tế và xem xét các khái niệm nâng cao, các nhà phát triển có thể tận dụng Module Federation để xây dựng các ứng dụng web mạnh mẽ và linh hoạt. Khi các ứng dụng web tiếp tục phát triển về độ phức tạp, Module Federation cung cấp một công cụ có giá trị để quản lý sự phức tạp đó và cho phép các nhóm làm việc hiệu quả hơn.

Hãy nắm bắt sức mạnh của phát triển web phi tập trung với JavaScript Module Federation và mở khóa tiềm năng xây dựng các ứng dụng thực sự theo module và có khả năng mở rộng. Dù bạn đang xây dựng một nền tảng thương mại điện tử, một ứng dụng doanh nghiệp hay một CMS, Module Federation có thể giúp bạn chia nhỏ ứng dụng thành các đơn vị nhỏ hơn, dễ quản lý hơn và mang lại trải nghiệm người dùng tốt hơn.