Мікрофронтенди: Повний посібник з Module Federation

У світі веб-розробки, що постійно розвивається, створення та підтримка великих, складних фронтенд-застосунків може стати значним викликом. Монолітні фронтенди, де весь застосунок є єдиною, тісно пов'язаною кодовою базою, часто призводять до сповільнення циклів розробки, підвищення ризиків при розгортанні та труднощів у масштабуванні окремих функцій.

Мікрофронтенди пропонують вирішення, розбиваючи фронтенд на менші, незалежні та керовані одиниці. Цей архітектурний підхід дозволяє командам працювати автономно, розгортати застосунки незалежно та обирати технології, що найкраще відповідають їхнім конкретним потребам. Однією з найперспективніших технологій для реалізації мікрофронтендів є Module Federation.

Що таке мікрофронтенди?

Мікрофронтенди — це архітектурний стиль, за якого фронтенд-застосунок складається з кількох менших, незалежних фронтенд-застосунків. Ці застосунки можуть розроблятися, розгортатися та підтримуватися різними командами, з використанням різних технологій і без необхідності координації на етапі збірки. Кожен мікрофронтенд відповідає за певну функцію або домен загального застосунку.

Ключові принципи мікрофронтендів:

• Незалежність від технологій: Команди можуть обирати найкращий технологічний стек для свого конкретного мікрофронтенду.
• Ізольовані кодові бази команд: Кожен мікрофронтенд має власну незалежну кодову базу, що дозволяє незалежну розробку та розгортання.
• Незалежне розгортання: Зміни в одному мікрофронтенді не вимагають повторного розгортання всього застосунку.
• Автономні команди: Команди відповідають за свій мікрофронтенд і можуть працювати незалежно.
• Прогресивне оновлення: Окремі мікрофронтенди можна оновлювати або замінювати, не впливаючи на решту застосунку.

Представляємо Module Federation

Module Federation — це архітектура JavaScript, представлена у Webpack 5, яка дозволяє застосунку JavaScript динамічно завантажувати код з іншого застосунку під час виконання. Це означає, що різні застосунки можуть спільно використовувати та споживати модулі один одного, навіть якщо вони створені з використанням різних технологій або розгорнуті на різних серверах.

Module Federation надає потужний механізм для реалізації мікрофронтендів, дозволяючи різним фронтенд-застосункам експонувати та споживати модулі один одного. Це забезпечує безшовну інтеграцію різних мікрофронтендів в єдиний, цілісний користувацький досвід.

Ключові переваги Module Federation:

• Спільне використання коду: Мікрофронтенди можуть спільно використовувати код та компоненти, зменшуючи дублювання та покращуючи узгодженість.
• Інтеграція під час виконання: Мікрофронтенди можна інтегрувати під час виконання, що дозволяє динамічну композицію та оновлення.
• Незалежні розгортання: Мікрофронтенди можна розгортати незалежно, не вимагаючи координації або повторного розгортання інших застосунків.
• Незалежність від технологій: Мікрофронтенди можуть бути створені з використанням різних технологій і все одно інтегруватися за допомогою Module Federation.
• Скорочення часу збірки: Завдяки спільному використанню коду та залежностей, Module Federation може скоротити час збірки та підвищити ефективність розробки.

Як працює Module Federation

Module Federation працює, визначаючи два типи застосунків: хост (host) та віддалений (remote). Застосунок-хост — це основний застосунок, який споживає модулі з інших застосунків. Віддалений застосунок — це застосунок, який експонує модулі для споживання іншими застосунками.

Коли застосунок-хост зустрічає інструкцію імпорту для модуля, який експонується віддаленим застосунком, Webpack динамічно завантажує віддалений застосунок і вирішує імпорт під час виконання. Це дозволяє хост-застосунку використовувати модуль з віддаленого застосунку так, ніби він є частиною його власної кодової бази.

Ключові концепції в Module Federation:

• Хост (Host): Застосунок, який споживає модулі з віддалених застосунків.
• Віддалений (Remote): Застосунок, який експонує модулі для споживання іншими застосунками.
• Експоновані модулі (Exposed Modules): Модулі, які віддалений застосунок робить доступними для споживання іншими застосунками.
• Спільні модулі (Shared Modules): Модулі, які є спільними для хоста та віддалених застосунків, що зменшує дублювання та покращує продуктивність.

Реалізація мікрофронтендів з Module Federation: Практичний приклад

Розглянемо простий застосунок електронної комерції з трьома мікрофронтендами: каталог товарів, кошик для покупок та профіль користувача.

Кожен мікрофронтенд розробляється окремою командою та розгортається незалежно. Каталог товарів створений на React, кошик для покупок на Vue.js, а профіль користувача на Angular. Основний застосунок діє як хост та інтегрує ці три мікрофронтенди в єдиний користувацький інтерфейс.

Крок 1: Налаштування віддалених застосунків

Спочатку нам потрібно налаштувати кожен мікрофронтенд як віддалений застосунок. Це включає визначення модулів, які будуть експоновані, та спільних модулів, які будуть використовуватися.

Каталог товарів (React)

webpack.config.js:

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

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'productCatalog',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductList': './src/components/ProductList',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

У цій конфігурації ми експонуємо компонент ProductList з файлу ./src/components/ProductList. Ми також робимо модулі react та react-dom спільними з хост-застосунком.

Кошик для покупок (Vue.js)

webpack.config.js:

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

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'shoppingCart',
      filename: 'remoteEntry.js',
      exposes: {
        './ShoppingCart': './src/components/ShoppingCart',
      },
      shared: ['vue'],
    }),
  ],
};

Тут ми експонуємо компонент ShoppingCart і робимо спільним модуль vue.

Профіль користувача (Angular)

webpack.config.js:

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

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'userProfile',
      filename: 'remoteEntry.js',
      exposes: {
        './UserProfile': './src/components/UserProfile',
      },
      shared: ['@angular/core', '@angular/common', '@angular/router'],
    }),
  ],
};

Ми експонуємо компонент UserProfile і робимо спільними необхідні модулі Angular.

Крок 2: Налаштування хост-застосунку

Далі нам потрібно налаштувати хост-застосунок для споживання модулів, експонованих віддаленими застосунками. Це включає визначення віддалених застосунків (remotes) та їх прив'язку до відповідних URL-адрес.

webpack.config.js:

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

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'mainApp',
      remotes: {
        productCatalog: 'productCatalog@http://localhost:3001/remoteEntry.js',
        shoppingCart: 'shoppingCart@http://localhost:3002/remoteEntry.js',
        userProfile: 'userProfile@http://localhost:3003/remoteEntry.js',
      },
      shared: ['react', 'react-dom', 'vue', '@angular/core', '@angular/common', '@angular/router'],
    }),
  ],
};

У цій конфігурації ми визначаємо три віддалені застосунки: productCatalog, shoppingCart та userProfile. Кожен віддалений застосунок прив'язаний до URL свого файлу remoteEntry.js. Ми також робимо спільними загальні залежності для всіх мікрофронтендів.

Крок 3: Споживання модулів у хост-застосунку

Нарешті, ми можемо споживати модулі, експоновані віддаленими застосунками, у хост-застосунку. Це включає імпорт модулів за допомогою динамічних імпортів та їх відображення у відповідних місцях.

import React, { Suspense } from 'react';
const ProductList = React.lazy(() => import('productCatalog/ProductList'));
const ShoppingCart = React.lazy(() => import('shoppingCart/ShoppingCart'));
const UserProfile = React.lazy(() => import('userProfile/UserProfile'));

function App() {
  return (
    <div>
      <h1>Застосунок електронної комерції</h1>
      <Suspense fallback={<div>Завантаження каталогу товарів...</div>}>
        <ProductList />
      </Suspense>
      <Suspense fallback={<div>Завантаження кошика...</div>}>
        <ShoppingCart />
      </Suspense>
      <Suspense fallback={<div>Завантаження профілю користувача...</div>}>
        <UserProfile />
      </Suspense>
    </div>
  );
}

export default App;

Ми використовуємо React.lazy та Suspense для динамічного завантаження модулів з віддалених застосунків. Це гарантує, що модулі завантажуються лише тоді, коли вони потрібні, покращуючи продуктивність застосунку.

Розширені аспекти та найкращі практики

Хоча Module Federation надає потужний механізм для реалізації мікрофронтендів, існує кілька розширених аспектів та найкращих практик, які варто враховувати.

Керування версіями та сумісність

При спільному використанні модулів між мікрофронтендами вкрай важливо керувати версіями та забезпечувати сумісність. Різні мікрофронтенди можуть мати різні залежності або вимагати різних версій спільних модулів. Використання семантичного версіонування та ретельне керування спільними залежностями може допомогти уникнути конфліктів та забезпечити безперебійну спільну роботу мікрофронтендів.

Розгляньте інструменти, такі як `@module-federation/automatic-vendor-federation`, щоб допомогти автоматизувати процес керування спільними залежностями.

Керування станом

Спільне використання стану між мікрофронтендами може бути складним завданням. Різні мікрофронтенди можуть мати різні рішення для керування станом або вимагати різного доступу до спільного стану. Існує кілька підходів до керування станом в архітектурі мікрофронтендів, зокрема:

• Спільні бібліотеки стану: Використання спільної бібліотеки стану, як-от Redux або Zustand, для керування глобальним станом.
• Кастомні події: Використання кастомних подій для передачі змін стану між мікрофронтендами.
• Стан на основі URL: Кодування стану в URL та його спільне використання між мікрофронтендами.

Найкращий підхід залежить від конкретних потреб застосунку та рівня зв'язності між мікрофронтендами.

Комунікація між мікрофронтендами

Мікрофронтендам часто потрібно спілкуватися один з одним для обміну даними або виклику дій. Існує кілька способів досягти цього, зокрема:

• Кастомні події: Використання кастомних подій для розсилки повідомлень між мікрофронтендами.
• Спільні сервіси: Створення спільних сервісів, до яких можуть звертатися всі мікрофронтенди.
• Черги повідомлень: Використання черги повідомлень для асинхронної комунікації між мікрофронтендами.

Вибір правильного механізму комунікації залежить від складності взаємодій та бажаного рівня роз'єднання між мікрофронтендами.

Аспекти безпеки

При реалізації мікрофронтендів важливо враховувати наслідки для безпеки. Кожен мікрофронтенд повинен відповідати за власну безпеку, включаючи автентифікацію, авторизацію та валідацію даних. Спільне використання коду та даних між мікрофронтендами повинно здійснюватися безпечно та з належним контролем доступу.

Забезпечте належну валідацію та санітизацію вхідних даних для запобігання вразливостям міжсайтового скриптингу (XSS). Регулярно оновлюйте залежності для виправлення вразливостей безпеки.

Тестування та моніторинг

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

Впроваджуйте наскрізні тести (end-to-end), які охоплюють кілька мікрофронтендів, щоб забезпечити безшовний користувацький досвід. Відстежуйте показники продуктивності застосунку для виявлення вузьких місць та областей для покращення.

Module Federation проти інших підходів до мікрофронтендів

Хоча Module Federation є потужним інструментом для створення мікрофронтендів, це не єдиний доступний підхід. Інші поширені підходи до мікрофронтендів включають:

• Інтеграція на етапі збірки: Інтеграція мікрофронтендів під час збірки за допомогою таких інструментів, як Webpack або Parcel.
• Інтеграція під час виконання за допомогою iframe: Вбудовування мікрофронтендів в iframe.
• Веб-компоненти: Використання веб-компонентів для створення багаторазових елементів інтерфейсу, які можна спільно використовувати між мікрофронтендами.
• Single-SPA: Використання фреймворку, такого як Single-SPA, для керування маршрутизацією та оркестрацією мікрофронтендів.

Кожен підхід має свої переваги та недоліки, і найкращий підхід залежить від конкретних потреб застосунку.

Module Federation проти iframe

iframe забезпечують сильну ізоляцію, але можуть бути громіздкими в управлінні та негативно впливати на продуктивність через накладні витрати кожного iframe. Комунікація між iframe також може бути складною.

Module Federation пропонує більш безшовний досвід інтеграції з кращою продуктивністю та простішою комунікацією між мікрофронтендами. Однак це вимагає ретельного управління спільними залежностями та версіями.

Module Federation проти Single-SPA

Single-SPA — це мета-фреймворк, який надає уніфікований підхід до управління та оркестрації мікрофронтендів. Він пропонує такі функції, як спільний контекст, маршрутизація та управління станом.

Module Federation можна використовувати разом із Single-SPA для створення гнучкої та масштабованої архітектури для розробки складних мікрофронтенд-застосунків.

Сценарії використання Module Federation

Module Federation добре підходить для різноманітних сценаріїв використання, зокрема:

• Великі корпоративні застосунки: Створення та підтримка великих, складних корпоративних застосунків з кількома командами.
• Платформи електронної комерції: Створення модульних та масштабованих платформ електронної комерції з незалежними функціями, такими як каталоги товарів, кошики для покупок та процеси оформлення замовлення.
• Системи управління контентом (CMS): Розробка гнучких та розширюваних CMS-платформ з кастомізованими модулями контенту.
• Дашборди та аналітичні платформи: Створення інтерактивних дашбордів та аналітичних платформ з незалежними віджетами та візуалізаціями.

Наприклад, розглянемо глобальну компанію електронної комерції, таку як Amazon. Вони могли б використовувати Module Federation, щоб розбити свій веб-сайт на менші, незалежні мікрофронтенди, такі як сторінки товарів, кошик, процес оформлення замовлення та розділ керування обліковим записом користувача. Кожен з цих мікрофронтендів міг би розроблятися та розгортатися окремими командами, що дозволило б пришвидшити цикли розробки та підвищити гнучкість. Вони могли б використовувати різні технології для кожного мікрофронтенду, наприклад, React для сторінок товарів, Vue.js для кошика та Angular для процесу оформлення замовлення. Це дозволяє їм використовувати сильні сторони кожної технології та обирати найкращий інструмент для роботи.

Інший приклад — транснаціональний банк. Він міг би використовувати Module Federation для створення банківської платформи, адаптованої до конкретних потреб кожного регіону. Вони могли б мати різні мікрофронтенди для кожного регіону, з функціями, специфічними для банківських регуляцій та уподобань клієнтів цього регіону. Це дозволяє їм надавати більш персоналізований та релевантний досвід для своїх клієнтів.

Висновок

Module Federation пропонує потужний та гнучкий підхід до створення мікрофронтендів. Він дозволяє командам працювати незалежно, розгортати застосунки незалежно та обирати технології, що найкраще відповідають їхнім потребам. Завдяки спільному використанню коду та залежностей, Module Federation може скоротити час збірки, покращити продуктивність та спростити процес розробки.

Хоча Module Federation має свої виклики, такі як управління версіями та станом, їх можна вирішити за допомогою ретельного планування та використання відповідних інструментів і технік. Дотримуючись найкращих практик та враховуючи розширені аспекти, обговорені в цьому посібнику, ви зможете успішно реалізувати мікрофронтенди з Module Federation та створювати масштабовані, підтримувані та незалежні фронтенд-застосунки.

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