JavaScript Module Federation: Полное руководство по микрофронтенд-архитектуре

В постоянно меняющемся мире веб-разработки создание больших и сложных приложений может быстро стать непростой задачей. Традиционные монолитные архитектуры часто приводят к тесно связанным кодовым базам, что затрудняет масштабируемость, поддерживаемость и независимые развертывания. Микрофронтенды предлагают убедительную альтернативу, разделяя приложение на более мелкие, независимо развертываемые модули. Среди различных техник микрофронтенда JavaScript Module Federation выделяется как мощное и элегантное решение.

Что такое JavaScript Module Federation?

JavaScript Module Federation, представленная в Webpack 5, позволяет JavaScript-приложениям динамически обмениваться кодом и зависимостями во время выполнения. В отличие от традиционных методов обмена кодом, которые полагаются на зависимости на этапе сборки, Module Federation позволяет приложениям загружать и выполнять код из других приложений, даже если они были созданы с использованием разных технологий или версий одной и той же библиотеки. Это создает по-настоящему распределенную и слабосвязанную архитектуру.

Представьте себе сценарий, в котором несколько команд работают над разными разделами крупного сайта электронной коммерции. Одна команда может отвечать за каталог товаров, другая — за корзину покупок, а третья — за аутентификацию пользователей. С помощью Module Federation каждая команда может разрабатывать, собирать и развертывать свой микрофронтенд независимо, не беспокоясь о конфликтах или зависимостях с другими командами. Основное приложение («хост») может затем динамически загружать и отображать эти микрофронтенды («удаленные модули») во время выполнения, создавая бесшовный пользовательский опыт.

Ключевые концепции Module Federation

• Хост (Host): Основное приложение, которое потребляет и отображает удаленные модули.
• Удаленный модуль (Remote): Независимое приложение, которое предоставляет модули для использования другими приложениями.
• Общие модули (Shared Modules): Зависимости, которые являются общими для хоста и удаленных модулей. Это позволяет избежать дублирования и обеспечивает согласованность версий во всем приложении.
• Плагин Module Federation (Module Federation Plugin): Плагин для Webpack, который включает функциональность Module Federation.

Преимущества Module Federation

1. Независимые развертывания

Каждый микрофронтенд может быть развернут независимо, не затрагивая другие части приложения. Это позволяет сократить циклы выпуска, снизить риски и повысить гибкость. Команда в Берлине может развернуть обновления для каталога товаров, в то время как команда в Токио продолжает независимо работать над своими функциями для корзины покупок. Это значительное преимущество для глобально распределенных команд.

2. Повышенная масштабируемость

Приложение можно масштабировать горизонтально, развертывая каждый микрофронтенд на отдельных серверах. Это позволяет лучше использовать ресурсы и повысить производительность. Например, сервис аутентификации, часто являющийся узким местом производительности, может быть масштабирован независимо для обработки пиковых нагрузок.

3. Улучшенная поддерживаемость

Микрофронтенды меньше и более управляемы, чем монолитные приложения, что делает их проще в поддержке и отладке. Каждая команда владеет своей собственной кодовой базой, что позволяет им сосредоточиться на своей конкретной области экспертизы. Представьте себе глобальную команду, специализирующуюся на платежных шлюзах; они могут поддерживать этот конкретный микрофронтенд, не влияя на другие команды.

4. Технологическая независимость

Микрофронтенды могут быть созданы с использованием различных технологий или фреймворков, что позволяет командам выбирать лучшие инструменты для работы. Один микрофронтенд может быть написан на React, а другой — на Vue.js. Эта гибкость особенно полезна при интеграции устаревших приложений или когда у разных команд разные предпочтения или опыт.

5. Повторное использование кода

Общие модули могут повторно использоваться в нескольких микрофронтендах, что сокращает дублирование кода и повышает согласованность. Это особенно полезно для общих компонентов, вспомогательных функций или дизайн-систем. Представьте себе глобально согласованную дизайн-систему, используемую всеми микрофронтендами для обеспечения единого восприятия бренда.

Реализация Module Federation: Практический пример

Давайте рассмотрим упрощенный пример реализации Module Federation с использованием Webpack 5. Мы создадим два приложения: хост-приложение (host) и удаленное приложение (remote). Удаленное приложение будет предоставлять простой компонент, который будет использовать хост-приложение.

Шаг 1: Настройка хост-приложения

Создайте новый каталог для хост-приложения и инициализируйте новый npm-проект:

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

              
                Copy
              
            
          

Установите Webpack и его зависимости:

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

              
                Copy
              
            
          

Создайте файл `webpack.config.js` в корне хост-приложения со следующей конфигурацией:

            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$/,
 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: 'host',
 remotes: {
 remoteApp: 'remote@http://localhost:3001/remoteEntry.js',
 },
 shared: ['react', 'react-dom'],
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

Эта конфигурация определяет точку входа, выходной каталог, настройки сервера разработки и плагин Module Federation. Свойство `remotes` указывает местоположение файла `remoteEntry.js` удаленного приложения. Свойство `shared` определяет модули, которые являются общими для хост- и удаленного приложений. В этом примере мы делаем общими 'react' и 'react-dom'.

Создайте файл `index.html` в каталоге `public`:

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

              
                Copy
              
            
          

Создайте каталог `src` и файл `index.js` внутри него. Этот файл будет загружать удаленный компонент и отображать его в хост-приложении:

            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
              
            
          

Установите babel-loader и его пресеты

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

              
                Copy
              
            
          

Шаг 2: Настройка удаленного приложения

Создайте новый каталог для удаленного приложения и инициализируйте новый npm-проект:

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

              
                Copy
              
            
          

Установите Webpack и его зависимости:

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

              
                Copy
              
            
          

Создайте файл `webpack.config.js` в корне удаленного приложения со следующей конфигурацией:

            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/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true,
 },
 module: {
 rules: [
 {
 test: /\.js$/,
 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',
 },
 shared: ['react', 'react-dom'],
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

Эта конфигурация похожа на конфигурацию хост-приложения, но с несколькими ключевыми отличиями. Свойство `name` установлено в `remote`, а свойство `exposes` определяет модули, которые предоставляются другим приложениям. В данном случае мы предоставляем `RemoteComponent`.

Создайте файл `index.html` в каталоге `public`:

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

              
                Copy
              
            
          

Создайте каталог `src` и файл `RemoteComponent.js` внутри него. Этот файл будет содержать компонент, который предоставляется хост-приложению:

            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
              
            
          

Создайте каталог `src` и файл `index.js` внутри него. Этот файл будет отображать `RemoteComponent`, когда удаленное приложение запускается независимо (необязательно):

            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
              
            
          

Шаг 3: Запуск приложений

Добавьте скрипты `start` в оба файла `package.json`:

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

              
                Copy
              
            
          

Запустите оба приложения с помощью `npm start`. Откройте браузер и перейдите по адресу `http://localhost:3000`. Вы должны увидеть, как хост-приложение отображает удаленный компонент. Удаленный компонент будет иметь красную рамку, указывающую на то, что он загружен из удаленного приложения.

Продвинутые концепции и соображения

1. Управление версиями и совместимость

При совместном использовании зависимостей между микрофронтендами важно учитывать управление версиями и совместимость. Module Federation предоставляет механизмы для указания диапазонов версий и разрешения конфликтов. Инструменты, такие как семантическое версионирование (semver), становятся критически важными для управления зависимостями и обеспечения совместимости между различными микрофронтендами. Неправильное управление версиями может привести к ошибкам во время выполнения или неожиданному поведению, особенно в сложных системах с множеством микрофронтендов.

2. Аутентификация и авторизация

Реализация аутентификации и авторизации в архитектуре микрофронтендов требует тщательного планирования. Распространенные подходы включают использование общего сервиса аутентификации или реализацию аутентификации на основе токенов. Безопасность имеет первостепенное значение, и крайне важно следовать лучшим практикам для защиты конфиденциальных данных. Например, платформа электронной коммерции может иметь выделенный микрофронтенд аутентификации, отвечающий за проверку учетных данных пользователя перед предоставлением доступа к другим микрофронтендам.

3. Взаимодействие между микрофронтендами

Микрофронтендам часто необходимо взаимодействовать друг с другом для обмена данными или запуска действий. Могут использоваться различные шаблоны взаимодействия, такие как события, общее управление состоянием или прямые вызовы API. Выбор правильного шаблона взаимодействия зависит от конкретных требований приложения. Инструменты, такие как Redux или Vuex, могут использоваться для общего управления состоянием. Пользовательские события могут использоваться для слабой связности и асинхронного взаимодействия. Вызовы API могут использоваться для более сложных взаимодействий.

4. Оптимизация производительности

Загрузка удаленных модулей может влиять на производительность, особенно если модули большие или сетевое соединение медленное. Оптимизация размера модулей, использование разделения кода и кэширование удаленных модулей могут улучшить производительность. Ленивая загрузка (Lazy loading) модулей только тогда, когда они необходимы, — еще один важный метод оптимизации. Также рассмотрите возможность использования сети доставки контента (CDN) для раздачи удаленных модулей из географически близких к конечным пользователям мест, тем самым уменьшая задержку.

5. Тестирование микрофронтендов

Тестирование микрофронтендов требует иного подхода, чем тестирование монолитных приложений. Каждый микрофронтенд должен тестироваться как независимо, так и в интеграции с другими микрофронтендами. Контрактное тестирование может использоваться для обеспечения совместимости микрофронтендов друг с другом. Модульные тесты, интеграционные тесты и сквозные тесты важны для обеспечения качества архитектуры микрофронтендов.

6. Обработка ошибок и мониторинг

Реализация надежной обработки ошибок и мониторинга имеет решающее значение для выявления и устранения проблем в архитектуре микрофронтендов. Централизованные системы логирования и мониторинга могут предоставить информацию о состоянии и производительности приложения. Инструменты, такие как Sentry или New Relic, могут использоваться для отслеживания ошибок и метрик производительности в различных микрофронтендах. Хорошо продуманная стратегия обработки ошибок может предотвратить каскадные сбои и обеспечить отказоустойчивый пользовательский опыт.

Сферы применения Module Federation

Module Federation хорошо подходит для различных сценариев использования, включая:

• Крупные платформы электронной коммерции: Разделение веб-сайта на более мелкие, независимо развертываемые модули для каталога товаров, корзины покупок, аутентификации пользователей и оформления заказа.
• Корпоративные приложения: Создание сложных панелей управления и порталов, где разные команды отвечают за разные разделы.
• Системы управления контентом (CMS): Позволяют разработчикам создавать и развертывать пользовательские модули или плагины независимо.
• Микросервисные архитектуры: Интеграция фронтенд-приложений с бэкендами на основе микросервисов.
• Прогрессивные веб-приложения (PWA): Динамическая загрузка и обновление функций в PWA.

Например, рассмотрим международное банковское приложение. С помощью Module Federation основные банковские функции, инвестиционная платформа и портал поддержки клиентов могут разрабатываться и развертываться независимо. Это позволяет специализированным командам сосредоточиться на конкретных областях, обеспечивая при этом единый и последовательный пользовательский опыт во всех сервисах.

Альтернативы Module Federation

Хотя Module Federation предлагает убедительное решение для микрофронтенд-архитектур, это не единственный вариант. Другие популярные техники включают:

• iFrames: Простой, но часто менее гибкий подход, который встраивает одно приложение в другое.
• Веб-компоненты (Web Components): Переиспользуемые пользовательские HTML-элементы, которые можно использовать в разных приложениях.
• Single-SPA: Фреймворк для создания одностраничных приложений с использованием нескольких фреймворков.
• Интеграция на этапе сборки: Объединение всех микрофронтендов в одно приложение в процессе сборки.

Каждая техника имеет свои преимущества и недостатки, и лучший выбор зависит от конкретных требований приложения. Module Federation отличается своей гибкостью во время выполнения и способностью динамически обмениваться кодом, не требуя полной пересборки и повторного развертывания всех приложений.

Заключение

JavaScript Module Federation — это мощная техника для создания масштабируемых, поддерживаемых и независимых микрофронтенд-архитектур. Она предлагает множество преимуществ, включая независимые развертывания, повышенную масштабируемость, улучшенную поддерживаемость, технологическую независимость и повторное использование кода. Понимая ключевые концепции, реализуя практические примеры и учитывая продвинутые аспекты, разработчики могут использовать Module Federation для создания надежных и гибких веб-приложений. Поскольку веб-приложения продолжают усложняться, Module Federation предоставляет ценный инструмент для управления этой сложностью и позволяет командам работать более эффективно и продуктивно.

Воспользуйтесь мощью децентрализованной веб-разработки с помощью JavaScript Module Federation и раскройте потенциал для создания по-настоящему модульных и масштабируемых приложений. Независимо от того, создаете ли вы платформу электронной коммерции, корпоративное приложение или CMS, Module Federation может помочь вам разбить приложение на более мелкие, более управляемые модули и обеспечить лучший пользовательский опыт.