JavaScript Module Federation: Komplexní průvodce architekturou Micro-Frontend

V neustále se vyvíjejícím světě webového vývoje se tvorba velkých a komplexních aplikací může rychle stát náročným úkolem. Tradiční monolitické architektury často vedou k pevně svázaným kódovým základnám, což brání škálovatelnosti, udržovatelnosti a nezávislým nasazením. Micro-frontendy nabízejí přesvědčivou alternativu, která rozděluje aplikaci na menší, nezávisle nasaditelné jednotky. Mezi různými technikami micro-frontendů vyniká JavaScript Module Federation jako výkonné a elegantní řešení.

Co je JavaScript Module Federation?

JavaScript Module Federation, představená ve Webpacku 5, umožňuje JavaScriptovým aplikacím dynamicky sdílet kód a závislosti za běhu. Na rozdíl od tradičních metod sdílení kódu, které se spoléhají na závislosti v době sestavení (build-time), Module Federation umožňuje aplikacím načítat a spouštět kód z jiných aplikací, i když byly vytvořeny s různými technologiemi nebo verzemi stejné knihovny. Tím se vytváří skutečně distribuovaná a oddělená architektura.

Představte si scénář, kde máte několik týmů pracujících na různých částech velkého e-commerce webu. Jeden tým může být zodpovědný za katalog produktů, další za nákupní košík a třetí za autentizaci uživatelů. S Module Federation může každý tým vyvíjet, sestavovat a nasazovat svůj micro-frontend nezávisle, aniž by se musel obávat konfliktů nebo závislostí s ostatními týmy. Hlavní aplikace („host“) pak může tyto micro-frontendy („remotes“) dynamicky načítat a vykreslovat za běhu, čímž vzniká bezproblémový uživatelský zážitek.

Klíčové koncepty Module Federation

• Host: Hlavní aplikace, která konzumuje a vykresluje vzdálené moduly (remotes).
• Remote: Nezávislá aplikace, která vystavuje moduly pro konzumaci jinými aplikacemi.
• Shared Modules: Závislosti, které jsou sdíleny mezi hostitelem (host) a vzdálenými aplikacemi (remotes). Tím se zabraňuje duplikaci a zajišťují se konzistentní verze napříč aplikací.
• Module Federation Plugin: Webpack plugin, který umožňuje funkcionalitu Module Federation.

Výhody Module Federation

1. Nezávislé nasazení (Deployment)

Každý micro-frontend může být nasazen nezávisle, aniž by ovlivnil ostatní části aplikace. To umožňuje rychlejší cykly vydávání, snížené riziko a zvýšenou agilitu. Tým v Berlíně může nasadit aktualizace katalogu produktů, zatímco tým pro nákupní košík v Tokiu pokračuje v nezávislé práci na svých funkcích. To je významná výhoda pro globálně distribuované týmy.

2. Zvýšená škálovatelnost

Aplikaci lze škálovat horizontálně nasazením každého micro-frontendu na samostatné servery. To umožňuje lepší využití zdrojů a zlepšený výkon. Například autentizační služba, která je často úzkým hrdlem výkonu, může být škálována nezávisle, aby zvládla špičkové zatížení.

3. Zlepšená udržovatelnost

Micro-frontendy jsou menší a lépe spravovatelné než monolitické aplikace, což usnadňuje jejich údržbu a ladění. Každý tým má vlastnictví své vlastní kódové základny, což mu umožňuje soustředit se na svou specifickou oblast odbornosti. Představte si globální tým specializující se na platební brány; může udržovat tento specifický micro-frontend bez dopadu na ostatní týmy.

4. Technologická nezávislost

Micro-frontendy mohou být vytvořeny pomocí různých technologií nebo frameworků, což týmům umožňuje vybrat si nejlepší nástroje pro danou práci. Jeden micro-frontend může být postaven na Reactu, zatímco jiný používá Vue.js. Tato flexibilita je zvláště užitečná při integraci starších aplikací nebo když mají různé týmy různé preference či odborné znalosti.

5. Znovupoužitelnost kódu

Sdílené moduly mohou být znovu použity napříč několika micro-frontendy, což snižuje duplicitu kódu a zlepšuje konzistenci. To je obzvláště užitečné pro běžné komponenty, pomocné funkce nebo design systémy. Představte si globálně konzistentní design systém sdílený napříč všemi micro-frontendy, který zajišťuje jednotný zážitek se značkou.

Implementace Module Federation: Praktický příklad

Projděme si zjednodušený příklad, jak implementovat Module Federation pomocí Webpacku 5. Vytvoříme dvě aplikace: hostitelskou aplikaci (host) a vzdálenou aplikaci (remote). Vzdálená aplikace bude vystavovat jednoduchou komponentu, kterou bude hostitelská aplikace konzumovat.

Krok 1: Nastavení hostitelské aplikace (Host)

Vytvořte nový adresář pro hostitelskou aplikaci a inicializujte nový npm projekt:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Nainstalujte Webpack a jeho závislosti:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Vytvořte soubor `webpack.config.js` v kořenovém adresáři hostitelské aplikace s následující konfigurací:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index.js',
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'bundle.js',
 publicPath: 'http://localhost:3000/', // Important for Module Federation
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true,
 },
 module: {
 rules: [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: ['@babel/preset-env', '@babel/preset-react']
 }
 }
 },
 {
 test: /\.css$/i,
 use: ["style-loader", "css-loader"],
 },
 ],
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'host',
 remotes: {
 remoteApp: 'remote@http://localhost:3001/remoteEntry.js',
 },
 shared: ['react', 'react-dom'],
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

Tato konfigurace definuje vstupní bod, výstupní adresář, nastavení vývojového serveru a plugin Module Federation. Vlastnost `remotes` specifikuje umístění souboru `remoteEntry.js` vzdálené aplikace. Vlastnost `shared` definuje moduly, které jsou sdíleny mezi hostitelskou a vzdálenou aplikací. V tomto příkladu sdílíme 'react' a 'react-dom'.

Vytvořte soubor `index.html` v adresáři `public`:

            <!DOCTYPE html>
<html>
<head>
 <title>Host Application</title>
</head>
<body>
 <div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Vytvořte adresář `src` a v něm soubor `index.js`. Tento soubor načte vzdálenou komponentu a vykreslí ji v hostitelské aplikaci:

            import React from 'react';
import ReactDOM from 'react-dom/client';

import RemoteComponent from 'remoteApp/RemoteComponent';

const App = () => (
 <div>
 <h1>Host Application</h1>
 <p>This is the host application consuming a remote component.</p>
 <RemoteComponent />
 </div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

            

              
                Copy
              
            
          

Nainstalujte babel-loader a jeho presety

            npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react style-loader css-loader
            

              
                Copy
              
            
          

Krok 2: Nastavení vzdálené aplikace (Remote)

Vytvořte nový adresář pro vzdálenou aplikaci a inicializujte nový npm projekt:

            mkdir remote-app
cd remote-app
npm init -y
            

              
                Copy
              
            
          

Nainstalujte Webpack a jeho závislosti:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Vytvořte soubor `webpack.config.js` v kořenovém adresáři vzdálené aplikace s následující konfigurací:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index.js',
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'bundle.js',
 publicPath: 'http://localhost:3001/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true,
 },
 module: {
 rules: [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: ['@babel/preset-env', '@babel/preset-react']
 }
 }
 },
 {
 test: /\.css$/i,
 use: ["style-loader", "css-loader"],
 },
 ],
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'remote',
 filename: 'remoteEntry.js',
 exposes: {
 './RemoteComponent': './src/RemoteComponent.js',
 },
 shared: ['react', 'react-dom'],
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

Tato konfigurace je podobná hostitelské aplikaci, ale s několika klíčovými rozdíly. Vlastnost `name` je nastavena na `remote` a vlastnost `exposes` definuje moduly, které jsou vystaveny ostatním aplikacím. V tomto případě vystavujeme `RemoteComponent`.

Vytvořte soubor `index.html` v adresáři `public`:

            <!DOCTYPE html>
<html>
<head>
 <title>Remote Application</title>
</head>
<body>
 <div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Vytvořte adresář `src` a v něm soubor `RemoteComponent.js`. Tento soubor bude obsahovat komponentu, která je vystavena hostitelské aplikaci:

            import React from 'react';

const RemoteComponent = () => (
 <div style={{ border: '2px solid red', padding: '10px', margin: '10px' }}>
 <h2>Remote Component</h2>
 <p>This component is loaded from the remote application.</p>
 </div>
);

export default RemoteComponent;

            

              
                Copy
              
            
          

Vytvořte adresář `src` a v něm soubor `index.js`. Tento soubor vykreslí `RemoteComponent`, když je vzdálená aplikace spuštěna samostatně (volitelné):

            import React from 'react';
import ReactDOM from 'react-dom/client';
import RemoteComponent from './RemoteComponent';

const App = () => (
 <div>
 <h1>Remote Application</h1>
 <RemoteComponent />
 </div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

            

              
                Copy
              
            
          

Krok 3: Spuštění aplikací

Přidejte startovací skripty do obou souborů `package.json`:

            "scripts": {
 "start": "webpack serve"
}
            

              
                Copy
              
            
          

Spusťte obě aplikace pomocí `npm start`. Otevřete prohlížeč a přejděte na `http://localhost:3000`. Měli byste vidět hostitelskou aplikaci, která vykresluje vzdálenou komponentu. Vzdálená komponenta bude mít kolem sebe červený okraj, což značí, že je načtena ze vzdálené aplikace.

Pokročilé koncepty a úvahy

1. Správa verzí a kompatibilita

Při sdílení závislostí mezi micro-frontendy je důležité zvážit správu verzí a kompatibilitu. Module Federation poskytuje mechanismy pro specifikaci rozsahů verzí a řešení konfliktů. Nástroje jako sémantické verzování (semver) se stávají klíčovými pro správu závislostí a zajištění kompatibility napříč různými micro-frontendy. Neschopnost správně spravovat verze by mohla vést k běhovým chybám nebo neočekávanému chování, zejména v komplexních systémech s mnoha micro-frontendy.

2. Autentizace a autorizace

Implementace autentizace a autorizace v micro-frontend architektuře vyžaduje pečlivé plánování. Běžné přístupy zahrnují použití sdílené autentizační služby nebo implementaci autentizace založené na tokenech. Bezpečnost je prvořadá a je klíčové dodržovat osvědčené postupy pro ochranu citlivých dat. Například e-commerce platforma může mít dedikovaný autentizační micro-frontend zodpovědný za ověřování přihlašovacích údajů uživatelů před udělením přístupu k dalším micro-frontendům.

3. Komunikace mezi micro-frontendy

Micro-frontendy často potřebují vzájemně komunikovat, aby si vyměňovaly data nebo spouštěly akce. Lze použít různé komunikační vzory, jako jsou události, sdílená správa stavu nebo přímá volání API. Výběr správného komunikačního vzoru závisí na specifických požadavcích aplikace. Pro sdílenou správu stavu lze použít nástroje jako Redux nebo Vuex. Vlastní události lze použít pro volné propojení a asynchronní komunikaci. Volání API lze použít pro složitější interakce.

4. Optimalizace výkonu

Načítání vzdálených modulů může ovlivnit výkon, zejména pokud jsou moduly velké nebo je síťové připojení pomalé. Optimalizace velikosti modulů, použití code splittingu a cachování vzdálených modulů může výkon zlepšit. Líné načítání (lazy loading) modulů pouze tehdy, když jsou potřeba, je další důležitou optimalizační technikou. Zvažte také použití Content Delivery Network (CDN) k poskytování vzdálených modulů z geograficky bližších lokalit koncovým uživatelům, čímž se sníží latence.

5. Testování micro-frontendů

Testování micro-frontendů vyžaduje odlišný přístup než testování monolitických aplikací. Každý micro-frontend by měl být testován samostatně, stejně jako v integraci s ostatními micro-frontendy. Contract testing lze použít k zajištění, že jsou micro-frontendy vzájemně kompatibilní. Unit testy, integrační testy a end-to-end testy jsou všechny důležité pro zajištění kvality micro-frontend architektury.

6. Zpracování chyb a monitoring

Implementace robustního zpracování chyb a monitoringu je klíčová pro identifikaci a řešení problémů v micro-frontend architektuře. Centralizované systémy logování a monitoringu mohou poskytnout vhled do zdraví a výkonu aplikace. Nástroje jako Sentry nebo New Relic lze použít ke sledování chyb a výkonnostních metrik napříč různými micro-frontendy. Dobře navržená strategie zpracování chyb může zabránit kaskádovým selháním a zajistit odolný uživatelský zážitek.

Případy použití Module Federation

Module Federation se dobře hodí pro různé případy použití, včetně:

• Velké e-commerce platformy: Rozdělení webu na menší, nezávisle nasaditelné jednotky pro katalog produktů, nákupní košík, autentizaci uživatelů a pokladnu.
• Podnikové aplikace: Tvorba komplexních dashboardů a portálů s různými týmy zodpovědnými za různé sekce.
• Systémy pro správu obsahu (CMS): Umožnění vývojářům vytvářet a nasazovat vlastní moduly nebo pluginy nezávisle.
• Architektury mikroslužeb: Integrace front-endových aplikací s microservices backendy.
• Progresivní webové aplikace (PWA): Dynamické načítání a aktualizace funkcí v PWA.

Zvažte například nadnárodní bankovní aplikaci. S module federation mohou být klíčové bankovní funkce, investiční platforma a portál zákaznické podpory vyvíjeny a nasazovány nezávisle. To umožňuje specializovaným týmům soustředit se na specifické oblasti a zároveň zajistit jednotný a konzistentní uživatelský zážitek napříč všemi službami.

Alternativy k Module Federation

Ačkoli Module Federation nabízí přesvědčivé řešení pro micro-frontend architektury, není to jediná možnost. Mezi další populární techniky patří:

• iFrames: Jednoduchý, ale často méně flexibilní přístup, který vkládá jednu aplikaci do druhé.
• Web Components: Znovu použitelné vlastní HTML elementy, které lze použít napříč různými aplikacemi.
• Single-SPA: Framework pro tvorbu single-page aplikací s více frameworky.
• Integrace v době sestavení (Build-time): Kombinování všech micro-frontendů do jedné aplikace během procesu sestavení.

Každá technika má své vlastní výhody a nevýhody a nejlepší volba závisí na specifických požadavcích aplikace. Module Federation se odlišuje svou flexibilitou za běhu a schopností dynamicky sdílet kód bez nutnosti kompletního přebudování a opětovného nasazení všech aplikací.

Závěr

JavaScript Module Federation je výkonná technika pro tvorbu škálovatelných, udržovatelných a nezávislých micro-frontend architektur. Nabízí řadu výhod, včetně nezávislých nasazení, zvýšené škálovatelnosti, zlepšené udržovatelnosti, technologické nezávislosti a znovupoužitelnosti kódu. Porozuměním klíčovým konceptům, implementací praktických příkladů a zvážením pokročilých konceptů mohou vývojáři využít Module Federation k tvorbě robustních a flexibilních webových aplikací. Jak webové aplikace neustále rostou na složitosti, Module Federation poskytuje cenný nástroj pro správu této složitosti a umožňuje týmům pracovat efektivněji a účinněji.

Přijměte sílu decentralizovaného webového vývoje s JavaScript Module Federation a odemkněte potenciál pro tvorbu skutečně modulárních a škálovatelných aplikací. Ať už vytváříte e-commerce platformu, podnikovou aplikaci nebo CMS, Module Federation vám může pomoci rozdělit aplikaci na menší, lépe spravovatelné jednotky a poskytnout lepší uživatelský zážitek.