Frontendové Micro-Frontends: Zvládnutí architektury Module Federation

V dnešním rychle se vyvíjejícím světě webového vývoje se tvorba a údržba rozsáhlých frontendových aplikací může stát stále složitější. Tradiční monolitické architektury často vedou k problémům jako je nabobtnání kódu, pomalé časy sestavení a potíže s nezávislým nasazováním. Micro-frontends nabízejí řešení rozdělením frontendu na menší, lépe spravovatelné části. Tento článek se ponoří do Module Federation, výkonné techniky pro implementaci micro-frontends, a prozkoumá její výhody, architekturu a praktické implementační strategie.

Co jsou Micro-Frontends?

Micro-frontends je architektonický styl, kde je frontendová aplikace rozložena na menší, nezávislé a nasaditelné jednotky. Každý micro-frontend je obvykle vlastněn samostatným týmem, což umožňuje větší autonomii a rychlejší vývojové cykly. Tento přístup odráží architekturu mikroslužeb běžně používanou na backendu.

Klíčové vlastnosti micro-frontends zahrnují:

• Nezávislá nasaditelnost: Každý micro-frontend může být nasazen nezávisle, aniž by ovlivnil ostatní části aplikace.
• Autonomie týmů: Různé týmy mohou vlastnit a vyvíjet různé micro-frontends s použitím svých preferovaných technologií a pracovních postupů.
• Technologická rozmanitost: Micro-frontends mohou být vytvořeny pomocí různých frameworků a knihoven, což týmům umožňuje vybrat si nejlepší nástroje pro daný úkol.
• Izolace: Micro-frontends by měly být od sebe izolovány, aby se předešlo kaskádovým selháním a zajistila se stabilita.

Proč používat Micro-Frontends?

Přijetí architektury micro-frontend nabízí několik významných výhod, zejména pro velké a složité aplikace:

• Zlepšená škálovatelnost: Rozdělení frontendu na menší jednotky usnadňuje škálování aplikace podle potřeby.
• Rychlejší vývojové cykly: Nezávislé týmy mohou pracovat paralelně, což vede k rychlejšímu vývoji a kratším cyklům vydání.
• Zvýšená autonomie týmů: Týmy mají větší kontrolu nad svým kódem a mohou se rozhodovat nezávisle.
• Snadnější údržba: Menší kódové základny se snadněji udržují a ladí.
• Technologická nezávislost: Týmy si mohou vybrat nejlepší technologie pro své specifické potřeby, což umožňuje inovace a experimentování.
• Snížené riziko: Nasazení jsou menší a častější, což snižuje riziko rozsáhlých selhání.

Úvod do Module Federation

Module Federation je funkce představená ve Webpack 5, která umožňuje JavaScriptovým aplikacím dynamicky načítat kód z jiných aplikací za běhu. To umožňuje vytváření skutečně nezávislých a skládatelných micro-frontends. Namísto sestavování všeho do jednoho balíčku (bundle) umožňuje Module Federation různým aplikacím sdílet a využívat moduly ostatních, jako by se jednalo o lokální závislosti.

Na rozdíl od tradičních přístupů k micro-frontends, které se spoléhají na iframy nebo webové komponenty, poskytuje Module Federation plynulejší a integrovanější uživatelský zážitek. Vyhýbá se výkonnostní zátěži a složitosti spojené s těmito jinými technikami.

Jak funguje Module Federation

Module Federation funguje na principu „vystavování“ (exposing) a „spotřebovávání“ (consuming) modulů. Jedna aplikace („hostitel“ nebo „kontejner“) může vystavovat moduly, zatímco jiné aplikace („vzdálené“ – remotes) mohou tyto vystavené moduly spotřebovávat. Zde je rozpis procesu:

1. Vystavení modulu: Micro-frontend, nakonfigurovaný jako „vzdálená“ aplikace (remote) ve Webpacku, vystavuje určité moduly (komponenty, funkce, utility) prostřednictvím konfiguračního souboru. Tato konfigurace specifikuje moduly, které mají být sdíleny, a jejich odpovídající vstupní body.
2. Spotřebování modulu: Jiný micro-frontend, nakonfigurovaný jako „hostitelská“ aplikace (host) nebo „kontejner“, deklaruje vzdálenou aplikaci jako závislost. Specifikuje URL, na které lze nalézt manifest Module Federation vzdálené aplikace (malý JSON soubor popisující vystavené moduly).
3. Rozlišení za běhu: Když hostitelská aplikace potřebuje použít modul ze vzdálené aplikace, dynamicky načte manifest Module Federation vzdálené aplikace. Webpack poté vyřeší závislost modulu a za běhu načte požadovaný kód ze vzdálené aplikace.
4. Sdílení kódu: Module Federation také umožňuje sdílení kódu mezi hostitelskou a vzdálenou aplikací. Pokud obě aplikace používají stejnou verzi sdílené závislosti (např. React, lodash), kód bude sdílen, čímž se zabrání duplikaci a sníží se velikost balíčků.

Nastavení Module Federation: Praktický příklad

Pojďme si Module Federation ilustrovat na jednoduchém příkladu zahrnujícím dva micro-frontendy: „Katalog produktů“ a „Nákupní košík“. Katalog produktů bude vystavovat komponentu se seznamem produktů, kterou bude Nákupní košík spotřebovávat pro zobrazení souvisejících produktů.

Struktura projektu

  
  micro-frontend-example/
    product-catalog/
      src/
        components/
          ProductList.jsx
        index.js
        webpack.config.js
    shopping-cart/
      src/
        components/
          RelatedProducts.jsx
        index.js
        webpack.config.js
  

Katalog produktů (Remote)

webpack.config.js

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

  module.exports = {
    // ... other webpack configurations
    plugins: [
      new ModuleFederationPlugin({
        name: 'product_catalog',
        filename: 'remoteEntry.js',
        exposes: {
          './ProductList': './src/components/ProductList',
        },
        shared: {
          react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
          'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
        },
      }),
    ],
  };
  

Vysvětlení:

• name: Unikátní název vzdálené aplikace.
• filename: Název vstupního souboru, který bude vystaven. Tento soubor obsahuje manifest Module Federation.
• exposes: Definuje, které moduly bude tato aplikace vystavovat. V tomto případě vystavujeme komponentu `ProductList` z `src/components/ProductList.jsx` pod názvem `./ProductList`.
• shared: Specifikuje závislosti, které by měly být sdíleny mezi hostitelskou a vzdálenou aplikací. To je klíčové pro zamezení duplicitního kódu a zajištění kompatibility. `singleton: true` zajišťuje, že je načtena pouze jedna instance sdílené závislosti. `eager: true` načte sdílenou závislost hned na začátku, což může zlepšit výkon. `requiredVersion` definuje přijatelný rozsah verzí pro sdílenou závislost.

src/components/ProductList.jsx

  
  import React from 'react';

  const ProductList = ({ products }) => (
    

      {products.map((product) => (
        
{product.name} - ${product.price}
      ))}
    
  );

  export default ProductList;
  

Nákupní košík (Host)

webpack.config.js

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

  module.exports = {
    // ... other webpack configurations
    plugins: [
      new ModuleFederationPlugin({
        name: 'shopping_cart',
        remotes: {
          product_catalog: 'product_catalog@http://localhost:3001/remoteEntry.js',
        },
        shared: {
          react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
          'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
        },
      }),
    ],
  };
  

Vysvětlení:

• name: Unikátní název hostitelské aplikace.
• remotes: Definuje vzdálené aplikace, ze kterých bude tato aplikace spotřebovávat moduly. V tomto případě deklarujeme vzdálenou aplikaci s názvem `product_catalog` a specifikujeme URL, kde lze nalézt její soubor `remoteEntry.js`. Formát je `nazevVzdaleneAplikace: 'nazevVzdaleneAplikace@URLkRemoteEntry'`.
• shared: Podobně jako vzdálená aplikace, i hostitelská aplikace definuje své sdílené závislosti. Tím je zajištěno, že hostitelská a vzdálené aplikace používají kompatibilní verze sdílených knihoven.

src/components/RelatedProducts.jsx

  
  import React, { useEffect, useState } from 'react';
  import ProductList from 'product_catalog/ProductList';

  const RelatedProducts = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
      // Fetch related products data (e.g., from an API)
      const fetchProducts = async () => {
        // Replace with your actual API endpoint
        const response = await fetch('https://fakestoreapi.com/products?limit=3');
        const data = await response.json();
        setProducts(data);
      };

      fetchProducts();
    }, []);

    return (
      

        
Related Products
        {products.length > 0 ?  : 
Loading...
}
      
    );
  };

  export default RelatedProducts;
  

Vysvětlení:

• import ProductList from 'product_catalog/ProductList'; Tento řádek importuje komponentu `ProductList` ze vzdálené aplikace `product_catalog`. Syntaxe `nazevVzdaleneAplikace/nazevModulu` říká Webpacku, aby načetl modul ze zadané vzdálené aplikace.
• Komponenta pak používá importovanou komponentu `ProductList` k zobrazení souvisejících produktů.

Spuštění příkladu

1. Spusťte obě aplikace, Katalog produktů i Nákupní košík, pomocí jejich příslušných vývojových serverů (např. `npm start`). Ujistěte se, že běží na různých portech (např. Katalog produktů na portu 3001 a Nákupní košík na portu 3000).
2. Přejděte v prohlížeči na aplikaci Nákupní košík.
3. Měli byste vidět sekci Související produkty, která je vykreslována komponentou `ProductList` z aplikace Katalog produktů.

Pokročilé koncepty Module Federation

Kromě základního nastavení nabízí Module Federation několik pokročilých funkcí, které mohou vylepšit vaši architekturu micro-frontend:

Sdílení kódu a verzování

Jak bylo ukázáno v příkladu, Module Federation umožňuje sdílení kódu mezi hostitelskou a vzdálenou aplikací. Toho je dosaženo pomocí konfigurační volby `shared` ve Webpacku. Specifikací sdílených závislostí se můžete vyhnout duplicitnímu kódu a zmenšit velikost balíčků. Správné verzování sdílených závislostí je klíčové pro zajištění kompatibility a předcházení konfliktům. Sémantické verzování (SemVer) je široce používaný standard pro verzování softwaru, který vám umožňuje definovat kompatibilní rozsahy verzí (např. `^17.0.0` povoluje jakoukoli verzi větší nebo rovnou 17.0.0, ale menší než 18.0.0).

Dynamické vzdálené aplikace (Dynamic Remotes)

V předchozím příkladu bylo URL vzdálené aplikace pevně zakódováno v souboru `webpack.config.js`. V mnoha reálných scénářích však můžete potřebovat dynamicky určit URL vzdálené aplikace za běhu. Toho lze dosáhnout použitím konfigurace vzdálené aplikace založené na promise:

  
  // webpack.config.js
  remotes: {
    product_catalog: new Promise(resolve => {
      // Fetch the remote URL from a configuration file or API
      fetch('/config.json')
        .then(response => response.json())
        .then(config => {
          const remoteUrl = config.productCatalogUrl;
          resolve(`product_catalog@${remoteUrl}/remoteEntry.js`);
        });
    }),
  },
  

To vám umožňuje konfigurovat URL vzdálené aplikace na základě prostředí (např. vývojové, staging, produkční) nebo jiných faktorů.

Asynchronní načítání modulů

Module Federation podporuje asynchronní načítání modulů, což vám umožňuje načítat moduly na vyžádání. To může zlepšit počáteční dobu načítání vaší aplikace odložením načítání nekritických modulů.

  
  // RelatedProducts.jsx
  import React, { Suspense, lazy } from 'react';

  const ProductList = lazy(() => import('product_catalog/ProductList'));

  const RelatedProducts = () => {
    return (
      

        
Related Products
        Loading...
}>
          
        
      
    );
  };
  

Pomocí `React.lazy` a `Suspense` můžete asynchronně načíst komponentu `ProductList` ze vzdálené aplikace. Komponenta `Suspense` poskytuje záložní UI (např. indikátor načítání), zatímco se modul načítá.

Federované styly a assety

Module Federation lze také použít ke sdílení stylů a assetů (zdrojů) mezi micro-frontendy. To může pomoci udržet konzistentní vzhled a dojem napříč vaší aplikací.

Pro sdílení stylů můžete vystavovat CSS moduly nebo styled-components ze vzdálené aplikace. Pro sdílení assetů (např. obrázků, písem) můžete nakonfigurovat Webpack tak, aby kopíroval assety na sdílené místo a poté na ně odkazoval z hostitelské aplikace.

Osvědčené postupy pro Module Federation

Při implementaci Module Federation je důležité dodržovat osvědčené postupy, abyste zajistili úspěšnou a udržitelnou architekturu:

• Definujte jasné hranice: Jasně definujte hranice mezi micro-frontendy, abyste se vyhnuli těsnému propojení a zajistili nezávislou nasaditelnost.
• Stanovte komunikační protokoly: Definujte jasné komunikační protokoly mezi micro-frontendy. Zvažte použití event busů, sdílených knihoven pro správu stavu nebo vlastních API.
• Pečlivě spravujte sdílené závislosti: Pečlivě spravujte sdílené závislosti, abyste se vyhnuli konfliktům verzí a zajistili kompatibilitu. Používejte sémantické verzování a zvažte použití nástroje pro správu závislostí jako npm nebo yarn.
• Implementujte robustní zpracování chyb: Implementujte robustní zpracování chyb, abyste předešli kaskádovým selháním a zajistili stabilitu vaší aplikace.
• Monitorujte výkon: Sledujte výkon vašich micro-frontends, abyste identifikovali úzká místa a optimalizovali výkon.
• Automatizujte nasazení: Automatizujte proces nasazení, abyste zajistili konzistentní a spolehlivé nasazení.
• Používejte konzistentní styl kódování: Vynucujte konzistentní styl kódování napříč všemi micro-frontendy pro zlepšení čitelnosti a udržovatelnosti. S tím mohou pomoci nástroje jako ESLint a Prettier.
• Dokumentujte svou architekturu: Dokumentujte svou architekturu micro-frontend, abyste zajistili, že všichni členové týmu rozumí systému a jak funguje.

Module Federation vs. jiné přístupy k Micro-Frontends

Ačkoli je Module Federation výkonnou technikou pro implementaci micro-frontends, není to jediný přístup. Mezi další populární metody patří:

• Iframy: Iframy poskytují silnou izolaci mezi micro-frontendy, ale jejich plynulá integrace může být obtížná a mohou mít negativní dopad na výkon.
• Webové komponenty: Webové komponenty vám umožňují vytvářet znovupoužitelné UI prvky, které lze použít napříč různými micro-frontendy. Jejich implementace však může být složitější než Module Federation.
• Integrace v době sestavení (Build-Time Integration): Tento přístup zahrnuje sestavení všech micro-frontends do jedné aplikace v době sestavení. I když to může zjednodušit nasazení, snižuje to autonomii týmu a zvyšuje riziko konfliktů.
• Single-SPA: Single-SPA je framework, který vám umožňuje kombinovat více single-page aplikací do jedné aplikace. Poskytuje flexibilnější přístup než integrace v době sestavení, ale jeho nastavení může být složitější.

Volba, který přístup použít, závisí na specifických požadavcích vaší aplikace a velikosti a struktuře vašeho týmu. Module Federation nabízí dobrou rovnováhu mezi flexibilitou, výkonem a snadností použití, což z ní činí populární volbu pro mnoho projektů.

Příklady Module Federation z reálného světa

Ačkoli jsou specifické implementace ve firmách často důvěrné, obecné principy Module Federation se uplatňují v různých odvětvích a scénářích. Zde jsou některé možné příklady:

• E-commerce platformy: E-commerce platforma by mohla použít Module Federation k oddělení různých sekcí webu, jako je katalog produktů, nákupní košík, proces pokladny a správa uživatelských účtů, do samostatných micro-frontends. To umožňuje různým týmům pracovat na těchto sekcích nezávisle a nasazovat aktualizace bez ovlivnění zbytku platformy. Například tým v *Německu* by se mohl soustředit na katalog produktů, zatímco tým v *Indii* spravuje nákupní košík.
• Aplikace finančních služeb: Aplikace pro finanční služby by mohla použít Module Federation k izolaci citlivých funkcí, jako jsou obchodní platformy a správa účtů, do samostatných micro-frontends. To zvyšuje bezpečnost a umožňuje nezávislý audit těchto kritických komponent. Představte si tým v *Londýně* specializující se na funkce obchodní platformy a další tým v *New Yorku* spravující správu účtů.
• Systémy pro správu obsahu (CMS): CMS by mohl použít Module Federation, aby vývojářům umožnil vytvářet a nasazovat vlastní moduly jako micro-frontends. To umožňuje větší flexibilitu a přizpůsobení pro uživatele CMS. Tým v *Japonsku* by mohl vytvořit specializovaný modul galerie obrázků, zatímco tým v *Brazílii* vytváří pokročilý textový editor.
• Zdravotnické aplikace: Zdravotnická aplikace by mohla použít Module Federation k integraci různých systémů, jako jsou elektronické zdravotní záznamy (EHR), pacientské portály a fakturační systémy, jako samostatné micro-frontends. To zlepšuje interoperabilitu a umožňuje snadnější integraci nových systémů. Například tým v *Kanadě* by mohl integrovat nový telemedicínský modul, zatímco tým v *Austrálii* se zaměřuje na zlepšení zážitku z pacientského portálu.

Závěr

Module Federation poskytuje výkonný a flexibilní přístup k implementaci micro-frontends. Tím, že umožňuje aplikacím dynamicky načítat kód od sebe navzájem za běhu, umožňuje vytváření skutečně nezávislých a skládatelných frontendových architektur. Ačkoli vyžaduje pečlivé plánování a implementaci, výhody v podobě zvýšené škálovatelnosti, rychlejších vývojových cyklů a větší autonomie týmů z ní činí přesvědčivou volbu pro velké a komplexní webové aplikace. Jak se prostředí webového vývoje neustále vyvíjí, je Module Federation připravena hrát stále důležitější roli při formování budoucnosti frontendové architektury.

Porozuměním konceptům a osvědčeným postupům popsaným v tomto článku můžete využít Module Federation k budování škálovatelných, udržitelných a inovativních frontendových aplikací, které splňují požadavky dnešního rychle se měnícího digitálního světa.