Тема 2/5: Микрофронты для существующего стека → Урок 4/6

Инструменты для создания микрофронтендов

Допустим, вы уже понимаете, как будете реализовывать микрофронтенды. Вы определились с методом интеграции и методом композиции. Теперь нужно выбрать инструменты, которые вам подойдут.
Вариантов много, но сейчас популярны два решения — Webpack Module Federation и Single SPA. В этом уроке разберём их и расскажем про альтернативные варианты.

Webpack Module Federation

Webpack — это пакет модулей для JavaScript-приложений. Он позволяет управлять сложными архитектурами фронтендов.
📎 Для работы с микрофронтендами вам понадобится отдельный плагин Webpack — Module Federation.
Module Federation позволяет независимым приложениям использовать общий код во время выполнения. Команды, которые разрабатывают разные микрофронтенды, смогут получить доступ к коду друг друга до развёртывания.
Module Federation основан на функции lazy loading. Она позволяет приложению загружать фрагменты кода по требованию. Это сокращает время первоначальной загрузки и помогает оптимизировать использование ресурсов.

Как работает Module Federation

Module Federation объединяет разные модули приложения в единое целое и позволяет им использовать общий код. В такой композиции есть две роли — хост и удалённый модуль:
  • Хост (host) — это основное приложение. Когда вы его запускаете, оно динамически загружает удалённые модули.
  • Удалённый модуль (remote) — это отдельный микрофронтенд. Он предоставляет часть своей функциональности хосту или другим удалённым модулям.
Хост и удалённые модули могут использовать общие зависимости, хотя это разные сборки. Чтобы это получилось, Module Federation использует функцию shared dependencies. Она позволяет эффективно управлять версиями и гарантирует, что приложение загрузит одну версию библиотеки, если это возможно.

Задание 1

Какие преимущества предоставляет Webpack Module Federation? Выберите все правильные ответы.

Конфигурация Module Federation

Представьте онлайн-магазин. Его фронтенд разделили на три микрофронтенда: профиль пользователя, список товаров и оформление заказа. Команды используют разные версии React.
Чтобы создать микрофронтенды, нужно написать конфигурацию Module Federation для хоста и для каждого удалённого модуля. Это фрагмент кода Webpack, который содержит:
  • name — имя модуля. Например, "productListing". Его используют, что подключить модуль в другое приложение.
  • filename — имя файла. Это точка входа в микрофронтенд — код, который инициализирует необходимые объекты.
  • exposes — компоненты, которые нужно передать от одного приложения другому. Например, микрофронтенд отвечает за страницу товаров. Здесь нужно передать все компоненты, которые нужны для отображения этой страницы.
  • shared — зависимости, без которых сборка не будет работать. Например, мы работаем с React. Значит, используем в качестве общей библиотеки react.
  • remotes — список подключаемых микрофронтендов. Его пишут только в конфигурации для хоста.
Рассмотрим конфигурацию на примере одного модуля — списка товаров.
Конфигурация списка товаров — удалённый модуль:
JSX
// webpack.config.js for Product Listing
module.exports = {
    name: "productListing",
    filename: "remoteEntry.js",
    exposes: {
        './ProductPage': './src/ProductPage',
    },
    shared: ["react", "react-dom"]
    };
Конфигурация главного приложения — хост:
JSX
// webpack.config.js for Main App
module.exports = {
    name: "mainApp",
    remotes: {
        "productListing": "productListing@http://example.com/productListing/remoteEntry.js",
    },
    shared: ["react", "react-dom"]
    };
Теперь в основное приложение можно легко интегрировать компонент ProductPage из микрофронтенда productListing.
Когда загружается основное приложение, оно динамически извлекает файл remoteEntry.js из микрофронтенда productListing. А микрофронтенд включает экспортированный компонент ProductPage.

Задание 2

Какие шаги необходимы для настройки Webpack Module Federation? Выберите все правильные ответы.

Что почитать про Module Federation?

Single SPA

Сначала вспомним, что такое SPA.
SPA (Single Page Application, одностраничное приложение) — это приложение, которое загружает один веб-документ. Когда нужно показать другой контент, оно обновляет содержимое документа через API на JavaScript — например, Fetch. Такая архитектура повышает производительность и делает взаимодействие с сайтом более динамичным.
Single SPA переносит общий принцип SPA в микрофронтенды.
📎 Single SPA — это JavaScript-фреймворк. Он позволяет использовать несколько JavaScript-фреймворков на одной странице, не обновляя её целиком.
Single SPA предназначен для управления маршрутизацией и координацией между различными микрофронтендами. Это особенно полезно, если команды пишут микрофронтенды на разных фреймворках.
У Single SPA три ключевые особенности:
  • Framework agnostic (независимость от фреймворков) — приложение не зависит от какого-то конкретного фреймворка. Можно поддерживать сразу нескольких фреймворков на одной странице.
  • Lazy loading (ленивая загрузка) — приложение загружает фрагменты кода по требованию. Это улучшает время первоначальной загрузки и производительность.
  • Независимая развёртываемость — каждый микрофронтенд можно развернуть независимо. Так проще поддерживать большие приложения, над которыми работают несколько команд.

Как работает Single SPA

Single SPA объединяет микрофронтенды в единое приложение. Каждый микрофронтенд — это независимое приложение, которое можно смонтировать или размонтировать из DOM на основе маршрута.
Общий принцип похож на Module Federation. Здесь есть:
  • Root (рут, корень) — основное приложение, которое подгружает разные микрофронтенды.
  • Микрофронтенды, которые подключают к руту.

Задание 3

Какая ключевая особенность делает Single SPA удобным для работы с разными JavaScript-фреймворками в одном приложении? Выберите один правильный ответ.

Конфигурация Single SPA

Представьте, что вы создаёте дашборд, который объединяет три функции:
  • профиль пользователя на React,
  • менеджер задач на Angular,
  • панель статистики на Vue.
Каждый раздел разрабатывают и развёртывают разные команды.
Чтобы использовать Single SPA, вам нужно написать Root config и подготовить входной файл для каждого микрофронтенда.
Root config. Здесь вы настраиваете Single SPA и указываете, как загружать разные микрофронтенды.
Вам понадобятся два метода из библиотеки single-spa:
  • registerApplication — регистрирует микрофронтенда.
  • start — запускает приложение.
Чтобы зарегистрировать модуль, нужно указать такие параметры:
  • name — имя модуля.
  • app — метод, с помощью которого модуль нужно загрузить по сети.
  • activeWhen — условие, по которому подгружать модуль.
Всё вместе будет так:
JSX
// root-config.js
import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'user-profile',
  app: () => import('userProfile/userProfile'),
  activeWhen: ['/profile']
});

registerApplication({
  name: 'task-manager',
  app: () => import('taskManager/taskManager'),
  activeWhen: ['/tasks']
});

registerApplication({
  name: 'statistics-panel',
  app: () => import('statisticsPanel/statisticsPanel'),
  activeWhen: ['/stats']
});

start();
Профиль пользователя на React. Входной файл для приложения профиля пользователя — это index.js. С фреймворком Single SPA он выглядит так:
JSX
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import UserProfile from './UserProfile';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: UserProfile,
  errorBoundary(err, info, props) {
    return <div>Error in UserProfile Microfrontend</div>;
  },
});

export const { bootstrap, mount, unmount } = reactLifecycles;
Менеджер задач на Angular. Входной файл для приложения Angular — main.single-spa.ts.
JSX
import { enableProdMode, NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Router } from '@angular/router';
import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
import { AppModule } from './app/app.module';

if (environment.production) {
  enableProdMode();
}

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<task-manager-root />',
  Router,
  NgZone: NgZone
});

export const { bootstrap, mount, unmount } = lifecycles;
Статистическая панель на Vue. Входной файл для приложения на Vue — main.js.
JSX
import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';
import StatisticsPanel from './StatisticsPanel.vue';

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    render(h) {
      return h(StatisticsPanel, {
        props: {
          // props go here
        },
      });
    },
  },
});

export const { bootstrap, mount, unmount } = vueLifecycles;

Задание 4

Что из этого относится к преимуществам Single SPA? Выберите все правильные ответы.

Что почитать про Single SPA?

Сергей
Какие ещё фреймворки есть?

Другие фреймворки для микрофронтендов

Single SPA и Webpack Module Federation — самые популярные фреймворки для микрофронтендов. Но есть и другие варианты.
Вот топ альтернативных фреймворков для создания микрофронтендов. Чем выше фреймворк в списке, тем он популярнее:
  1. Piral — позволяет создавать модульные фронтенд-приложения, которые расширяются во время выполнения с помощью разрозненных модулей.
  2. Luigi — помогает создавать модульные, расширяемые, масштабируемые и целостные пользовательские интерфейсы и веб-приложения.
  3. OpenComponents — упрощает создание и развёртывание компонентов фронтенда.
  4. Voltran — фреймворк для микрофронтендов, разработанный командой Hepsiburada Technology Team.
  5. Qiankun — позволяет создавать веб-приложения на базе архитектуры микрофронтендов. Вдохновлён Single SPA и основан на этом фреймворке.
  6. Bit — комплексное решение для создания составных приложений (composable applications). Упрощает создание, сопровождение и повторное использование независимых компонентов.
  7. PuzzleJs — микрофреймворк для создания масштабируемых и очень быстрых веб-сайтов.

Как выбрать фреймворк

Выбор инструмента для создания микрофронтендов — это четвёртый шаг перехода.
Webpack Module Federation позволяет микрофронтендам динамически обмениваться зависимостями во время выполнения. Вы сможете использовать разные версии библиотек без конфликтов. Single SPA делает упор на бесшовной интеграции и разнообразии фреймворков. И то, и другое решение поддерживает функцию lazy loading.
Если смотреть глобально, между этими технологиями нет принципиальных различий. Нет универсального ответа, в какой проект какой фреймворк встанет лучше. Рекомендуем ориентироваться на опыт своей команды и пощупать фреймворки самостоятельно. Так вы сможете оценить, какой вариант удобнее именно вам.
Если оба решения вам не подходят, изучите менее популярные альтернативы.
Осталось поговорить про последний — пятый этап перехода. На этом шаге настраивают коммуникацию между микрофронтендами. Как это сделать — расскажем в следующем уроке.

Итоги

Когда вы определили метод реализации микрофронтендов, нужно выбрать инструмент для их создания.
Сейчас популярны два фреймворка — Webpack Module Federation и Single SPA:
  • Webpack Module Federation позволяет независимым приложениям использовать общий код во время выполнения. Фреймворк поддерживает функции lazy loading и shared dependencies. В такой композиции есть две роли: хост (host) и ремоуты (remote). Хост — это основное приложение, а ремоуты — удалённые модули, то есть микрофронтенды.
  • Single SPA позволяет использовать несколько JavaScript-фреймворков на одной странице, не обновляя её целиком. В таком подходе микрофронтенды — это независимые приложения, которые монтируются в общую разметку (корневое приложение, root). Этот фреймворк тоже использует lazy loading. Ещё он поддерживает независимость от фреймворков (framework agnostic) и независимую развёртываемость модулей.
Между Webpack Module Federation и Single SPA нет принципиальных различий. Чтобы выбрать между ними, оцените комфортность каждого инструмента для себя и активность комьюнити.