JavaScript Module Federation: Odemknutí síly sdílení za běhu pro globální aplikace

V dnešním rychle se vyvíjejícím digitálním prostředí je budování škálovatelných, udržitelných a kolaborativních webových aplikací prvořadé. Jak se vývojové týmy rozrůstají a aplikace se stávají složitějšími, potřeba efektivního sdílení kódu a oddělení (decoupling) je stále kritičtější. JavaScript Module Federation, průlomová funkce představená s Webpack 5, nabízí výkonné řešení tím, že umožňuje sdílení kódu za běhu mezi nezávisle nasazenými aplikacemi. Tento blogový příspěvek se ponoří do základních konceptů Module Federation, zaměřuje se na její schopnosti sdílení za běhu a zkoumá, jak může revolučně změnit způsob, jakým globální týmy tvoří a spravují své webové aplikace.

Vyvíjející se prostředí webového vývoje a potřeba sdílení

Historicky webový vývoj často zahrnoval monolitické aplikace, kde veškerý kód sídlil v jediné kódové bázi. I když tento přístup může být vhodný pro menší projekty, rychle se stává neohrabaným, jakmile aplikace rostou. Závislosti se proplétají, časy sestavení (build times) se prodlužují a nasazování aktualizací může být složitým a riskantním podnikem. Vzestup mikroslužeb ve vývoji backendu připravil půdu pro podobné architektonické vzory na frontendu, což vedlo ke vzniku mikrofrontendů.

Mikrofrontendy si kladou za cíl rozdělit velké, komplexní frontendové aplikace na menší, nezávislé a nasaditelné jednotky. To umožňuje různým týmům pracovat na různých částech aplikace autonomně, což vede k rychlejším vývojovým cyklům a zlepšené autonomii týmů. Významnou výzvou v architekturách mikrofrontendů však vždy bylo efektivní sdílení kódu. Duplikování běžných knihoven, UI komponent nebo pomocných funkcí napříč několika mikrofrontendy vede k:

• Zvětšené velikosti balíčků (bundle): Každá aplikace nese vlastní kopii sdílených závislostí, což nafukuje celkovou velikost stahovaných dat pro uživatele.
• Nekonzistentní závislosti: Různé mikrofrontendy mohou používat různé verze stejné knihovny, což vede k problémům s kompatibilitou a nepředvídatelnému chování.
• Náklady na údržbu: Aktualizace sdíleného kódu vyžaduje změny napříč několika aplikacemi, což zvyšuje riziko chyb a zpomaluje nasazení.
• Plýtvání zdroji: Stahování stejného kódu vícekrát je neefektivní jak pro klienta, tak pro server.

Module Federation přímo řeší tyto problémy zavedením mechanismu pro skutečné sdílení kódu za běhu.

Co je JavaScript Module Federation?

JavaScript Module Federation, primárně implementovaná prostřednictvím Webpack 5, je funkce nástroje pro sestavení (build tool), která umožňuje JavaScriptovým aplikacím dynamicky načítat kód z jiných aplikací za běhu. Umožňuje vytváření více nezávislých aplikací, které mohou sdílet kód a závislosti bez nutnosti monorepa nebo složitého integračního procesu v době sestavení.

Základní myšlenkou je definovat "remotes" (aplikace, které zpřístupňují moduly) a "hosts" (aplikace, které konzumují moduly z remotes). Tyto remotes a hosts mohou být nasazeny nezávisle, což nabízí značnou flexibilitu při správě složitých aplikací a umožňuje rozmanité architektonické vzory.

Pochopení sdílení za běhu: Jádro Module Federation

Sdílení za běhu je základním kamenem síly Module Federation. Na rozdíl od tradičních technik code-splittingu nebo správy sdílených závislostí, které se často odehrávají v době sestavení, Module Federation umožňuje aplikacím objevovat a načítat moduly z jiných aplikací přímo v prohlížeči uživatele. To znamená, že běžná knihovna, sdílená knihovna UI komponent nebo dokonce funkční modul mohou být načteny jednou jednou aplikací a poté zpřístupněny ostatním aplikacím, které je potřebují.

Pojďme si rozebrat, jak to funguje:

Klíčové koncepty:

• Exposes (Zpřístupňuje): Aplikace může 'zpřístupnit' určité moduly (např. React komponentu, pomocnou funkci), které mohou ostatní aplikace konzumovat. Tyto zpřístupněné moduly jsou zabaleny do kontejneru, který lze načíst vzdáleně.
• Remotes (Vzdálené aplikace): Aplikace, která zpřístupňuje moduly, je považována za 'remote'. Zpřístupňuje své moduly prostřednictvím sdílené konfigurace.
• Consumes (Konzumuje): Aplikace, která potřebuje použít moduly z remote, je 'konzument' nebo 'host'. Konfiguruje se tak, aby věděla, kde najít vzdálené aplikace a které moduly načíst.
• Shared Modules (Sdílené moduly): Module Federation umožňuje definovat sdílené moduly. Když více aplikací konzumuje stejný sdílený modul, je načtena a sdílena mezi nimi pouze jedna instance tohoto modulu. To je klíčový aspekt pro optimalizaci velikostí balíčků a prevenci konfliktů závislostí.

Mechanismus:

Když hostitelská aplikace potřebuje modul z remote, vyžádá si ho z kontejneru remote. Kontejner remote pak dynamicky načte požadovaný modul. Pokud je modul již načten jinou konzumující aplikací, bude sdílen. Toto dynamické načítání a sdílení probíhá plynule za běhu, což poskytuje vysoce efektivní způsob správy závislostí.

Výhody Module Federation pro globální vývoj

Výhody přijetí Module Federation pro budování globálních aplikací jsou podstatné a dalekosáhlé:

1. Vylepšená škálovatelnost a udržitelnost:

Rozdělením velké aplikace na menší, nezávislé mikrofrontendy Module Federation přirozeně podporuje škálovatelnost. Týmy mohou pracovat na jednotlivých mikrofrontendech, aniž by ovlivňovaly ostatní, což umožňuje paralelní vývoj a nezávislá nasazení. Tím se snižuje kognitivní zátěž spojená se správou masivní kódové báze a aplikace se stává lépe udržitelnou v průběhu času.

2. Optimalizované velikosti balíčků a výkon:

Nejvýznamnější výhodou sdílení za běhu je snížení celkové velikosti stahovaných dat. Místo toho, aby každá aplikace duplikovala běžné knihovny (jako React, Lodash nebo vlastní knihovnu UI komponent), jsou tyto závislosti načteny jednou a sdíleny. To vede k:

• Rychlejší počáteční časy načítání: Uživatelé stahují méně kódu, což vede k rychlejšímu počátečnímu vykreslení aplikace.
• Zlepšená následná navigace: Při navigaci mezi mikrofrontendy, které sdílejí závislosti, jsou již načtené moduly znovu použity, což vede k svižnějšímu uživatelskému zážitku.
• Snížená zátěž serveru: Ze serveru se přenáší méně dat, což může potenciálně snížit náklady na hosting.

Představte si globální e-commerce platformu s odlišnými sekcemi pro výpisy produktů, uživatelské účty a pokladnu. Pokud je každá sekce samostatným mikrofrontendem, ale všechny se spoléhají na společnou knihovnu UI komponent pro tlačítka, formuláře a navigaci, Module Federation zajistí, že tato knihovna bude načtena pouze jednou, bez ohledu na to, kterou sekci uživatel navštíví jako první.

3. Zvýšená autonomie týmů a spolupráce:

Module Federation dává různým týmům, potenciálně umístěným v různých globálních regionech, možnost pracovat nezávisle na svých příslušných mikrofrontendech. Mohou si vybrat vlastní technologické stacky (v rozumných mezích, aby byla zachována určitá úroveň konzistence) a plány nasazení. Tato autonomie podporuje rychlejší inovace a snižuje komunikační zátěž. Nicméně schopnost sdílet společný kód také podporuje spolupráci, protože týmy mohou přispívat do sdílených knihoven a komponent a těžit z nich.

Představte si globální finanční instituci s oddělenými týmy v Evropě, Asii a Severní Americe, které jsou zodpovědné za různé produktové nabídky. Module Federation umožňuje každému týmu vyvíjet své specifické funkce a zároveň využívat společnou autentizační službu nebo sdílenou knihovnu pro grafy vyvinutou centrálním týmem. To podporuje znovupoužitelnost a zajišťuje konzistenci napříč různými produktovými řadami.

4. Technologická agnostičnost (s výhradami):

Ačkoli je Module Federation postavena na Webpacku, umožňuje určitý stupeň technologické agnostičnosti mezi různými mikrofrontendy. Jeden mikrofrontend může být vytvořen s Reactem, jiný s Vue.js a další s Angularem, pokud se dohodnou na způsobu zpřístupňování a konzumace modulů. Pro skutečné sdílení složitých frameworků jako React nebo Vue za běhu je však třeba věnovat zvláštní pozornost tomu, jak jsou tyto frameworky inicializovány a sdíleny, aby se zabránilo načtení více instancí a vzniku konfliktů.

Globální SaaS společnost může mít jádrovou platformu vyvinutou s jedním frameworkem a poté odštěpovat specializované funkční moduly vyvinuté různými regionálními týmy pomocí jiných frameworků. Module Federation může usnadnit integraci těchto různorodých částí za předpokladu, že jsou sdílené závislosti pečlivě spravovány.

5. Snadnější správa verzí:

Když je třeba aktualizovat sdílenou závislost, stačí aktualizovat a znovu nasadit pouze remote, který ji zpřístupňuje. Všechny konzumující aplikace si automaticky při dalším načtení stáhnou novou verzi. To zjednodušuje proces správy a aktualizace sdíleného kódu v celém aplikačním prostředí.

Implementace Module Federation: Praktické příklady a strategie

Podívejme se, jak v praxi nastavit a využít Module Federation. Použijeme zjednodušené konfigurace Webpacku k ilustraci základních konceptů.

Scénář: Sdílení knihovny UI komponent

Předpokládejme, že máme dvě aplikace: 'Product Catalog' (remote) a 'User Dashboard' (host). Obě potřebují používat sdílenou komponentu 'Button' z dedikované knihovny 'Shared UI'.

1. Knihovna 'Shared UI' (Remote):

Tato aplikace bude zpřístupňovat svou komponentu 'Button'.

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'remoteEntry.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://localhost:3001/dist/', // URL where the remote will be served
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'sharedUI',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button.js', // Expose Button component
      },
      shared: {
        // Define shared dependencies
        react: {
          singleton: true, // Ensure only one instance of React is loaded
        },
        'react-dom': {
          singleton: true,
        },
      },
    }),
  ],
  // ... other webpack configurations (babel, devServer, etc.)
};

            

              
                Copy
              
            
          

src/components/Button.js:

            
import React from 'react';

const Button = ({ onClick, children }) => (
  
    {children}
  
);

export default Button;

            

              
                Copy
              
            
          

V tomto nastavení 'Shared UI' zpřístupňuje svou komponentu Button a deklaruje react a react-dom jako sdílené závislosti s singleton: true, aby bylo zajištěno, že budou považovány za jediné instance napříč konzumujícími aplikacemi.

2. Aplikace 'Product Catalog' (Remote):

Tato aplikace bude také potřebovat konzumovat sdílenou komponentu Button a sdílet své vlastní závislosti.

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'remoteEntry.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://localhost:3002/dist/', // URL where this remote will be served
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'productCatalog',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductList': './src/components/ProductList.js', // Expose ProductList
      },
      remotes: {
        // Define a remote it needs to consume from
        sharedUI: 'sharedUI@http://localhost:3001/dist/remoteEntry.js',
      },
      shared: {
        // Shared dependencies with the same version and singleton: true
        react: {
          singleton: true,
        },
        'react-dom': {
          singleton: true,
        },
      },
    }),
  ],
  // ... other webpack configurations
};

            

              
                Copy
              
            
          

'Product Catalog' nyní zpřístupňuje svou komponentu ProductList a deklaruje své vlastní remotes, konkrétně odkazující na aplikaci 'Shared UI'. Také deklaruje stejné sdílené závislosti.

3. Aplikace 'User Dashboard' (Host):

Tato aplikace bude konzumovat komponentu Button z 'Shared UI' a ProductList z 'Product Catalog'.

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://localhost:3000/dist/', // URL where this app's bundles are served
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'userDashboard',
      remotes: {
        // Define the remotes this host application needs
        sharedUI: 'sharedUI@http://localhost:3001/dist/remoteEntry.js',
        productCatalog: 'productCatalog@http://localhost:3002/dist/remoteEntry.js',
      },
      shared: {
        // Shared dependencies that must match the remotes
        react: {
          singleton: true,
          import: 'react', // Specify the module name for import
        },
        'react-dom': {
          singleton: true,
          import: 'react-dom',
        },
      },
    }),
  ],
  // ... other webpack configurations
};

            

              
                Copy
              
            
          

src/index.js pro 'User Dashboard':

            
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';

// Dynamically import the shared Button component
const RemoteButton = React.lazy(() => import('sharedUI/Button'));

// Dynamically import the ProductList component
const RemoteProductList = React.lazy(() => import('productCatalog/ProductList'));

const App = () => {
  const handleClick = () => {
    alert('Button clicked from shared UI!');
  };

  return (
    

      
User Dashboard
      Loading Button...
}>
        Click Me
      

      
Products
      Loading Products...