JavaScript Module Federation: Kompleksowy przewodnik po architekturze mikrofrontendów

W stale ewoluującym świecie tworzenia stron internetowych, budowanie dużych, złożonych aplikacji może szybko stać się zniechęcającym zadaniem. Tradycyjne architektury monolityczne często prowadzą do silnie powiązanych baz kodu, utrudniając skalowalność, utrzymywalność i niezależne wdrożenia. Mikrofrontendy oferują atrakcyjną alternatywę, dzieląc aplikację na mniejsze, niezależnie wdrażalne jednostki. Wśród różnych technik mikrofrontendowych, JavaScript Module Federation wyróżnia się jako potężne i eleganckie rozwiązanie.

Czym jest JavaScript Module Federation?

JavaScript Module Federation, wprowadzona przez Webpack 5, pozwala aplikacjom JavaScript dynamicznie współdzielić kod i zależności w czasie wykonania. W przeciwieństwie do tradycyjnych metod współdzielenia kodu, które polegają na zależnościach w czasie budowania, Module Federation umożliwia aplikacjom ładowanie i wykonywanie kodu z innych aplikacji, nawet jeśli zostały zbudowane przy użyciu różnych technologii lub wersji tej samej biblioteki. Tworzy to prawdziwie rozproszoną i odseparowaną architekturę.

Wyobraź sobie scenariusz, w którym wiele zespołów pracuje nad różnymi sekcjami dużej witryny e-commerce. Jeden zespół może być odpowiedzialny za katalog produktów, inny za koszyk na zakupy, a trzeci za uwierzytelnianie użytkowników. Dzięki Module Federation każdy zespół może rozwijać, budować i wdrażać swój mikrofrontend niezależnie, nie martwiąc się o konflikty lub zależności z innymi zespołami. Główna aplikacja („host”) może następnie dynamicznie ładować i renderować te mikrofrontendy („remotes”) w czasie wykonania, tworząc płynne doświadczenie użytkownika.

Kluczowe koncepcje Module Federation

• Host: Główna aplikacja, która konsumuje i renderuje zdalne moduły.
• Remote: Niezależna aplikacja, która udostępnia moduły do konsumpcji przez inne aplikacje.
• Shared Modules: Zależności, które są współdzielone między hostem a zdalnymi aplikacjami. Unika się w ten sposób duplikacji i zapewnia spójne wersje w całej aplikacji.
• Module Federation Plugin: Wtyczka Webpack, która umożliwia funkcjonalność Module Federation.

Korzyści z Module Federation

1. Niezależne wdrożenia

Każdy mikrofrontend może być wdrażany niezależnie, bez wpływu na inne części aplikacji. Pozwala to na szybsze cykle wydawnicze, zmniejszone ryzyko i zwiększoną zwinność. Zespół w Berlinie może wdrożyć aktualizacje katalogu produktów, podczas gdy zespół ds. koszyka w Tokio kontynuuje niezależną pracę nad swoimi funkcjami. Jest to znacząca zaleta dla globalnie rozproszonych zespołów.

2. Zwiększona skalowalność

Aplikację można skalować horyzontalnie, wdrażając każdy mikrofrontend na oddzielnych serwerach. Pozwala to na lepsze wykorzystanie zasobów i poprawę wydajności. Na przykład usługa uwierzytelniania, często stanowiąca wąskie gardło wydajności, może być skalowana niezależnie, aby obsłużyć szczytowe obciążenia.

3. Lepsza utrzymywalność

Mikrofrontendy są mniejsze i łatwiejsze w zarządzaniu niż aplikacje monolityczne, co ułatwia ich utrzymanie i debugowanie. Każdy zespół jest właścicielem własnej bazy kodu, co pozwala im skupić się na swojej specyficznej dziedzinie wiedzy. Wyobraź sobie globalny zespół specjalizujący się w bramkach płatniczych; mogą oni utrzymywać ten konkretny mikrofrontend bez wpływu na inne zespoły.

4. Niezależność technologiczna

Mikrofrontendy mogą być budowane przy użyciu różnych technologii lub frameworków, co pozwala zespołom wybierać najlepsze narzędzia do pracy. Jeden mikrofrontend może być zbudowany w React, podczas gdy inny używa Vue.js. Ta elastyczność jest szczególnie przydatna przy integracji starszych aplikacji lub gdy różne zespoły mają różne preferencje lub wiedzę.

5. Ponowne wykorzystanie kodu

Współdzielone moduły mogą być ponownie wykorzystywane w wielu mikrofrontendach, co zmniejsza duplikację kodu i poprawia spójność. Jest to szczególnie przydatne w przypadku wspólnych komponentów, funkcji użytkowych lub systemów projektowych. Wyobraź sobie globalnie spójny system projektowy współdzielony przez wszystkie mikrofrontendy, zapewniający jednolite doświadczenie marki.

Implementacja Module Federation: Praktyczny przykład

Przejdźmy przez uproszczony przykład implementacji Module Federation przy użyciu Webpack 5. Stworzymy dwie aplikacje: aplikację hosta i aplikację zdalną (remote). Aplikacja zdalna będzie udostępniać prosty komponent, który aplikacja hosta będzie konsumować.

Krok 1: Konfiguracja aplikacji hosta

Utwórz nowy katalog dla aplikacji hosta i zainicjuj nowy projekt npm:

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

              
                Copy
              
            
          

Zainstaluj Webpack i jego zależności:

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

              
                Copy
              
            
          

Utwórz plik `webpack.config.js` w głównym katalogu aplikacji hosta z następującą konfiguracją:

            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
              
            
          

Ta konfiguracja definiuje punkt wejścia, katalog wyjściowy, ustawienia serwera deweloperskiego oraz wtyczkę Module Federation. Właściwość `remotes` określa lokalizację pliku `remoteEntry.js` aplikacji zdalnej. Właściwość `shared` definiuje moduły, które są współdzielone między aplikacją hosta a aplikacjami zdalnymi. W tym przykładzie współdzielimy 'react' i 'react-dom'.

Utwórz plik `index.html` w katalogu `public`:

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

              
                Copy
              
            
          

Utwórz katalog `src` i plik `index.js` wewnątrz niego. Ten plik załaduje zdalny komponent i wyrenderuje go w aplikacji hosta:

            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
              
            
          

Zainstaluj babel-loader i jego presety

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

              
                Copy
              
            
          

Krok 2: Konfiguracja aplikacji zdalnej

Utwórz nowy katalog dla aplikacji zdalnej i zainicjuj nowy projekt npm:

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

              
                Copy
              
            
          

Zainstaluj Webpack i jego zależności:

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

              
                Copy
              
            
          

Utwórz plik `webpack.config.js` w głównym katalogu aplikacji zdalnej z następującą konfiguracją:

            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
              
            
          

Ta konfiguracja jest podobna do aplikacji hosta, ale z kilkoma kluczowymi różnicami. Właściwość `name` jest ustawiona на `remote`, a właściwość `exposes` definiuje moduły, które są udostępniane innym aplikacjom. W tym przypadku udostępniamy `RemoteComponent`.

Utwórz plik `index.html` w katalogu `public`:

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

              
                Copy
              
            
          

Utwórz katalog `src` i plik `RemoteComponent.js` wewnątrz niego. Ten plik będzie zawierał komponent, który jest udostępniany aplikacji hosta:

            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
              
            
          

Utwórz katalog `src` i plik `index.js` wewnątrz niego. Ten plik wyrenderuje `RemoteComponent`, gdy aplikacja zdalna zostanie uruchomiona niezależnie (opcjonalne):

            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: Uruchamianie aplikacji

Dodaj skrypty startowe do obu plików `package.json`:

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

              
                Copy
              
            
          

Uruchom obie aplikacje za pomocą `npm start`. Otwórz przeglądarkę i przejdź do `http://localhost:3000`. Powinieneś zobaczyć aplikację hosta renderującą zdalny komponent. Zdalny komponent będzie miał wokół siebie czerwoną ramkę, co wskazuje, że został załadowany z aplikacji zdalnej.

Zaawansowane koncepcje i uwagi

1. Wersjonowanie i kompatybilność

Podczas współdzielenia zależności między mikrofrontendami ważne jest uwzględnienie wersjonowania i kompatybilności. Module Federation dostarcza mechanizmów do określania zakresów wersji i rozwiązywania konfliktów. Narzędzia takie jak semantic versioning (semver) stają się kluczowe w zarządzaniu zależnościami i zapewnianiu kompatybilności między różnymi mikrofrontendami. Błąd w prawidłowym zarządzaniu wersjonowaniem może prowadzić do błędów w czasie wykonania lub nieoczekiwanego zachowania, zwłaszcza w złożonych systemach z licznymi mikrofrontendami.

2. Uwierzytelnianie i autoryzacja

Implementacja uwierzytelniania i autoryzacji w architekturze mikrofrontendowej wymaga starannego planowania. Powszechne podejścia obejmują użycie współdzielonej usługi uwierzytelniania lub implementację uwierzytelniania opartego na tokenach. Bezpieczeństwo jest najważniejsze i kluczowe jest przestrzeganie najlepszych praktyk w zakresie ochrony danych wrażliwych. Na przykład platforma e-commerce może mieć dedykowany mikrofrontend uwierzytelniania odpowiedzialny za weryfikację poświadczeń użytkownika przed udzieleniem dostępu do innych mikrofrontendów.

3. Komunikacja między mikrofrontendami

Mikrofrontendy często muszą komunikować się ze sobą, aby wymieniać dane lub wywoływać akcje. Można używać różnych wzorców komunikacji, takich jak zdarzenia, współdzielone zarządzanie stanem lub bezpośrednie wywołania API. Wybór odpowiedniego wzorca komunikacji zależy od specyficznych wymagań aplikacji. Narzędzia takie jak Redux czy Vuex mogą być używane do współdzielonego zarządzania stanem. Niestandardowe zdarzenia mogą być używane do luźnego powiązania i komunikacji asynchronicznej. Wywołania API mogą być używane do bardziej złożonych interakcji.

4. Optymalizacja wydajności

Ładowanie zdalnych modułów może wpływać na wydajność, zwłaszcza jeśli moduły są duże lub połączenie sieciowe jest wolne. Optymalizacja rozmiaru modułów, używanie podziału kodu (code splitting) i buforowanie zdalnych modułów mogą poprawić wydajność. Leniwe ładowanie (lazy loading) modułów tylko wtedy, gdy są potrzebne, to kolejna ważna technika optymalizacji. Rozważ również użycie sieci dostarczania treści (CDN) do serwowania zdalnych modułów z lokalizacji geograficznie bliższych użytkownikom końcowym, co zmniejsza opóźnienia.

5. Testowanie mikrofrontendów

Testowanie mikrofrontendów wymaga innego podejścia niż testowanie aplikacji monolitycznych. Każdy mikrofrontend powinien być testowany niezależnie, a także w integracji z innymi mikrofrontendami. Testowanie kontraktowe może być używane do zapewnienia, że mikrofrontendy są ze sobą kompatybilne. Testy jednostkowe, testy integracyjne i testy end-to-end są wszystkie ważne dla zapewnienia jakości architektury mikrofrontendowej.

6. Obsługa błędów i monitorowanie

Implementacja solidnej obsługi błędów i monitorowania jest kluczowa do identyfikacji i rozwiązywania problemów w architekturze mikrofrontendowej. Scentralizowane systemy logowania i monitorowania mogą dostarczać wglądu w stan i wydajność aplikacji. Narzędzia takie jak Sentry czy New Relic mogą być używane do śledzenia błędów i metryk wydajności w różnych mikrofrontendach. Dobrze zaprojektowana strategia obsługi błędów może zapobiegać kaskadowym awariom i zapewniać odporne doświadczenie użytkownika.

Przypadki użycia Module Federation

Module Federation jest dobrze dopasowane do różnych przypadków użycia, w tym:

• Duże platformy e-commerce: Dzielenie witryny na mniejsze, niezależnie wdrażalne jednostki dla katalogu produktów, koszyka na zakupy, uwierzytelniania użytkowników i procesu finalizacji zakupu.
• Aplikacje korporacyjne: Budowanie złożonych pulpitów nawigacyjnych i portali, gdzie różne zespoły są odpowiedzialne za różne sekcje.
• Systemy zarządzania treścią (CMS): Umożliwienie deweloperom tworzenia i wdrażania niestandardowych modułów lub wtyczek niezależnie.
• Architektury mikroserwisów: Integracja aplikacji frontendowych z backendami opartymi na mikroserwisach.
• Progresywne aplikacje internetowe (PWA): Dynamiczne ładowanie i aktualizowanie funkcji w PWA.

Na przykład, rozważmy międzynarodową aplikację bankową. Dzięki module federation, podstawowe funkcje bankowe, platforma inwestycyjna i portal obsługi klienta mogą być rozwijane i wdrażane niezależnie. Pozwala to wyspecjalizowanym zespołom skupić się na konkretnych obszarach, jednocześnie zapewniając jednolite i spójne doświadczenie użytkownika we wszystkich usługach.

Alternatywy dla Module Federation

Chociaż Module Federation oferuje przekonujące rozwiązanie dla architektur mikrofrontendowych, nie jest to jedyna opcja. Inne popularne techniki obejmują:

• iFrames: Proste, ale często mniej elastyczne podejście, które osadza jedną aplikację w drugiej.
• Web Components: Wielokrotnego użytku niestandardowe elementy HTML, które mogą być używane w różnych aplikacjach.
• Single-SPA: Framework do budowania aplikacji jednostronicowych z wieloma frameworkami.
• Integracja w czasie budowania: Łączenie wszystkich mikrofrontendów w jedną aplikację podczas procesu budowania.

Każda technika ma swoje zalety i wady, a najlepszy wybór zależy od specyficznych wymagań aplikacji. Module Federation wyróżnia się elastycznością w czasie wykonania i zdolnością do dynamicznego współdzielenia kodu bez konieczności pełnej przebudowy i ponownego wdrożenia wszystkich aplikacji.

Podsumowanie

JavaScript Module Federation to potężna technika budowania skalowalnych, łatwych w utrzymaniu i niezależnych architektur mikrofrontendowych. Oferuje liczne korzyści, w tym niezależne wdrożenia, zwiększoną skalowalność, lepszą utrzymywalność, niezależność technologiczną i ponowne wykorzystanie kodu. Rozumiejąc kluczowe koncepcje, implementując praktyczne przykłady i rozważając zaawansowane koncepcje, deweloperzy mogą wykorzystać Module Federation do budowania solidnych i elastycznych aplikacji internetowych. W miarę jak aplikacje internetowe stają się coraz bardziej złożone, Module Federation stanowi cenne narzędzie do zarządzania tą złożonością i umożliwia zespołom bardziej wydajną i efektywną pracę.

Wykorzystaj moc zdecentralizowanego tworzenia stron internetowych dzięki JavaScript Module Federation i odblokuj potencjał budowania prawdziwie modułowych i skalowalnych aplikacji. Niezależnie od tego, czy budujesz platformę e-commerce, aplikację korporacyjną czy CMS, Module Federation może pomóc Ci podzielić aplikację na mniejsze, łatwiejsze w zarządzaniu jednostki i zapewnić lepsze doświadczenie użytkownika.