Микро фронтенди: Цялостно ръководство за Module Federation

В постоянно развиващия се свят на уеб разработката, изграждането и поддържането на големи, сложни фронтенд приложения може да се превърне в значително предизвикателство. Монолитните фронтенди, където цялото приложение е една, тясно свързана кодова база, често водят до по-бавни цикли на разработка, повишени рискове при внедряване и трудности при мащабирането на отделни функции.

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

Какво представляват микро фронтендите?

Микро фронтендите са архитектурен стил, при който фронтенд приложението е съставено от множество по-малки, независими фронтенд приложения. Тези приложения могат да бъдат разработвани, внедрявани и поддържани от различни екипи, използвайки различни технологии и без да се изисква координация по време на компилация (build time). Всеки микро фронтенд е отговорен за специфична функция или домейн на цялостното приложение.

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

• Технологично независими: Екипите могат да изберат най-добрия технологичен стек за своя специфичен микро фронтенд.
• Изолирани кодови бази на екипите: Всеки микро фронтенд има своя собствена независима кодова база, което позволява независима разработка и внедряване.
• Независимо внедряване: Промените в един микро фронтенд не изискват повторно внедряване на цялото приложение.
• Автономни екипи: Екипите са отговорни за своя микро фронтенд и могат да работят независимо.
• Прогресивно надграждане: Отделни микро фронтенди могат да бъдат надграждани или заменяни, без това да засяга останалата част от приложението.

Представяне на Module Federation

Module Federation е JavaScript архитектура, въведена в Webpack 5, която позволява на едно JavaScript приложение динамично да зарежда код от друго приложение по време на изпълнение (runtime). Това означава, че различни приложения могат да споделят и консумират модули едно от друго, дори ако са създадени с различни технологии или са внедрени на различни сървъри.

Module Federation предоставя мощен механизъм за внедряване на микро фронтенди, като позволява на различни фронтенд приложения да експонират и консумират модули едно от друго. Това позволява безпроблемна интеграция на различни микро фронтенди в едно цялостно и единно потребителско изживяване.

Ключови предимства на Module Federation:

• Споделяне на код: Микро фронтендите могат да споделят код и компоненти, намалявайки дублирането и подобрявайки консистенцията.
• Интеграция по време на изпълнение: Микро фронтендите могат да бъдат интегрирани по време на изпълнение, което позволява динамично композиране и актуализации.
• Независими внедрявания: Микро фронтендите могат да бъдат внедрявани независимо, без да се изисква координация или повторно внедряване на други приложения.
• Технологично независими: Микро фронтендите могат да бъдат създадени с различни технологии и въпреки това да бъдат интегрирани с помощта на Module Federation.
• Намалено време за компилация: Чрез споделяне на код и зависимости, Module Federation може да намали времето за компилация (build times) и да подобри ефективността на разработката.

Как работи Module Federation

Module Federation работи, като дефинира два типа приложения: host (домакин) и remote (отдалечено). Приложението host е основното приложение, което консумира модули от други приложения. Приложението remote е приложение, което експонира модули, за да бъдат консумирани от други приложения.

Когато приложението host срещне команда за импортиране (import statement) на модул, който е експониран от отдалечено приложение, Webpack динамично зарежда отдалеченото приложение и разрешава импортирането по време на изпълнение. Това позволява на приложението host да използва модула от отдалеченото приложение, сякаш е част от собствената му кодова база.

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

• Host (Домакин): Приложението, което консумира модули от отдалечени приложения.
• Remote (Отдалечено): Приложението, което експонира модули, за да бъдат консумирани от други приложения.
• Exposed Modules (Експонирани модули): Модулите, които отдалеченото приложение предоставя за консумация от други приложения.
• Shared Modules (Споделени модули): Модули, които се споделят между host и remote приложенията, намалявайки дублирането и подобрявайки производителността.

Внедряване на микро фронтенди с Module Federation: Практически пример

Нека разгледаме просто приложение за електронна търговия с три микро фронтенда: продуктов каталог, пазарска количка и потребителски профил.

Всеки микро фронтенд е разработен от отделен екип и се внедрява независимо. Продуктовият каталог е създаден с React, пазарската количка с Vue.js, а потребителският профил с Angular. Основното приложение действа като host и интегрира тези три микро фронтенда в единен потребителски интерфейс.

Стъпка 1: Конфигуриране на отдалечените приложения (Remote Applications)

Първо, трябва да конфигурираме всеки микро фронтенд като отдалечено приложение. Това включва дефиниране на модулите, които ще бъдат експонирани, и споделените модули, които ще се използват.

Продуктов каталог (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 с host приложението.

Пазарска количка (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: Конфигуриране на приложението-домакин (Host Application)

След това трябва да конфигурираме приложението-домакин да консумира модулите, експонирани от отдалечените приложения. Това включва дефиниране на отдалечените приложения (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: Консумиране на модулите в приложението-домакин

Накрая можем да консумираме модулите, експонирани от отдалечените приложения, в приложението-домакин. Това включва импортиране на модулите чрез динамични импорти (dynamic imports) и тяхното рендиране на подходящите места.

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`, които помагат за автоматизиране на процеса на управление на споделени зависимости.

Управление на състоянието (State Management)

Споделянето на състояние между микро фронтенди може да бъде предизвикателство. Различните микро фронтенди може да имат различни решения за управление на състоянието или да изискват различен достъп до споделеното състояние. Има няколко подхода за управление на състоянието в архитектура на микро фронтенди, включително:

• Библиотеки за споделено състояние: Използване на библиотека за споделено състояние като Redux или Zustand за управление на глобалното състояние.
• Персонализирани събития (Custom Events): Използване на персонализирани събития за комуникация на промени в състоянието между микро фронтенди.
• Състояние, базирано на URL: Кодиране на състоянието в URL адреса и споделянето му между микро фронтенди.

Най-добрият подход зависи от специфичните нужди на приложението и нивото на обвързаност между микро фронтендите.

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

Микро фронтендите често трябва да комуникират помежду си, за да обменят данни или да задействат действия. Има няколко начина за постигане на това, включително:

• Персонализирани събития (Custom Events): Използване на персонализирани събития за излъчване на съобщения между микро фронтенди.
• Споделени услуги (Shared Services): Създаване на споделени услуги, до които имат достъп всички микро фронтенди.
• Опашки за съобщения (Message Queues): Използване на опашка за съобщения за асинхронна комуникация между микро фронтенди.

Изборът на правилния комуникационен механизъм зависи от сложността на взаимодействията и желаното ниво на разграничаване между микро фронтендите.

Съображения за сигурност

При внедряването на микро фронтенди е важно да се вземат предвид последиците за сигурността. Всеки микро фронтенд трябва да бъде отговорен за собствената си сигурност, включително удостоверяване, оторизация и валидиране на данни. Споделянето на код и данни между микро фронтенди трябва да се извършва сигурно и с подходящ контрол на достъпа.

Осигурете правилна валидация и саниране на входа, за да предотвратите уязвимости от тип междусайтов скриптинг (XSS). Редовно актуализирайте зависимостите, за да коригирате уязвимости в сигурността.

Тестване и наблюдение

Тестването и наблюдението на микро фронтенди може да бъде по-сложно от тестването и наблюдението на монолитни приложения. Всеки микро фронтенд трябва да се тества независимо, като трябва да се извършват и интеграционни тестове, за да се гарантира, че микро фронтендите работят правилно заедно. Трябва да се внедри наблюдение за проследяване на производителността и състоянието на всеки микро фронтенд.

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

Module Federation срещу други подходи за микро фронтенди

Въпреки че Module Federation е мощен инструмент за изграждане на микро фронтенди, той не е единственият наличен подход. Други често срещани подходи за микро фронтенди включват:

• Интеграция по време на компилация (Build-Time): Интегриране на микро фронтенди по време на компилация с помощта на инструменти като Webpack или Parcel.
• Интеграция по време на изпълнение с iframes: Вграждане на микро фронтенди в iframes.
• Уеб компоненти (Web Components): Използване на уеб компоненти за създаване на UI елементи за многократна употреба, които могат да се споделят между микро фронтенди.
• Single-SPA: Използване на рамка като Single-SPA за управление на маршрутизацията и оркестрацията на микро фронтенди.

Всеки подход има своите предимства и недостатъци, а най-добрият подход зависи от специфичните нужди на приложението.

Module Federation срещу iframes

iframes предоставят силна изолация, но могат да бъдат тромави за управление и да повлияят отрицателно на производителността поради натоварването от всеки iframe. Комуникацията между iframes също може да бъде сложна.

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 предоставя солидна основа за изграждане на микро фронтенди и е ценен инструмент за всеки фронтенд разработчик, който иска да създава модерни, мащабируеми уеб приложения.