JavaScript Module Federation: En Omfattende Guide til Mikro-Frontend Arkitektur

I det konstant udviklende landskab af webudvikling kan det hurtigt blive en overvældende opgave at bygge store, komplekse applikationer. Traditionelle monolitiske arkitekturer fører ofte til tæt koblede kodebaser, hvilket hæmmer skalerbarhed, vedligeholdelse og uafhængige udrulninger. Mikro-frontends tilbyder et overbevisende alternativ, der opdeler applikationen i mindre, uafhængigt udrulningsbare enheder. Blandt de forskellige mikro-frontend-teknikker skiller JavaScript Module Federation sig ud som en kraftfuld og elegant løsning.

Hvad er JavaScript Module Federation?

JavaScript Module Federation, introduceret af Webpack 5, gør det muligt for JavaScript-applikationer dynamisk at dele kode og afhængigheder under kørsel. I modsætning til traditionelle metoder til kodedeling, der er afhængige af afhængigheder på byggetidspunktet, gør Module Federation det muligt for applikationer at indlæse og eksekvere kode fra andre applikationer, selvom de er bygget med forskellige teknologier eller versioner af det samme bibliotek. Dette skaber en ægte distribueret og afkoblet arkitektur.

Forestil dig et scenarie, hvor du har flere teams, der arbejder på forskellige sektioner af et stort e-handelswebsted. Et team kan være ansvarlig for produktkataloget, et andet for indkøbskurven og et tredje for brugergodkendelse. Med Module Federation kan hvert team udvikle, bygge og udrulle deres mikro-frontend uafhængigt, uden at skulle bekymre sig om konflikter eller afhængigheder med andre teams. Hovedapplikationen ("host") kan derefter dynamisk indlæse og rendere disse mikro-frontends ("remotes") under kørsel, hvilket skaber en problemfri brugeroplevelse.

Nøglekoncepter i Module Federation

• Host: Hovedapplikationen, der forbruger og renderer de eksterne moduler.
• Remote: En uafhængig applikation, der eksponerer moduler til forbrug af andre applikationer.
• Delte Moduler: Afhængigheder, der deles mellem host og remotes. Dette undgår duplikering og sikrer konsistente versioner på tværs af applikationen.
• Module Federation Plugin: Et Webpack-plugin, der muliggør Module Federation-funktionalitet.

Fordele ved Module Federation

1. Uafhængige Udrulninger

Hver mikro-frontend kan udrulles uafhængigt uden at påvirke andre dele af applikationen. Dette giver mulighed for hurtigere udgivelsescyklusser, reduceret risiko og øget agilitet. Et team i Berlin kan udrulle opdateringer til produktkataloget, mens indkøbskurv-teamet i Tokyo fortsætter med at arbejde uafhængigt på deres funktioner. Dette er en betydelig fordel for globalt distribuerede teams.

2. Øget Skalerbarhed

Applikationen kan skaleres horisontalt ved at udrulle hver mikro-frontend på separate servere. Dette giver bedre ressourceudnyttelse og forbedret ydeevne. For eksempel kan godkendelsestjenesten, ofte en ydelsesflaskehals, skaleres uafhængigt for at håndtere spidsbelastninger.

3. Forbedret Vedligeholdelse

Mikro-frontends er mindre og mere håndterbare end monolitiske applikationer, hvilket gør dem lettere at vedligeholde og fejlfinde. Hvert team har ejerskab over deres egen kodebase, hvilket giver dem mulighed for at fokusere på deres specifikke ekspertiseområde. Forestil dig et globalt team, der specialiserer sig i betalingsgateways; de kan vedligeholde den specifikke mikro-frontend uden at påvirke andre teams.

4. Teknologiagnostisk

Mikro-frontends kan bygges ved hjælp af forskellige teknologier eller frameworks, hvilket giver teams mulighed for at vælge de bedste værktøjer til opgaven. En mikro-frontend kan være bygget med React, mens en anden bruger Vue.js. Denne fleksibilitet er især nyttig ved integration af ældre applikationer, eller når forskellige teams har forskellige præferencer eller ekspertise.

5. Genbrug af Kode

Delte moduler kan genbruges på tværs af flere mikro-frontends, hvilket reducerer kodeduplikering og forbedrer konsistensen. Dette er især nyttigt for fælles komponenter, hjælpefunktioner eller designsystemer. Forestil dig et globalt konsistent designsystem, der deles på tværs af alle mikro-frontends, hvilket sikrer en samlet brandoplevelse.

Implementering af Module Federation: Et Praktisk Eksempel

Lad os gennemgå et forenklet eksempel på, hvordan man implementerer Module Federation ved hjælp af Webpack 5. Vi vil oprette to applikationer: en host-applikation og en remote-applikation. Remote-applikationen vil eksponere en simpel komponent, som host-applikationen vil forbruge.

Trin 1: Opsætning af Host-applikationen

Opret en ny mappe til host-applikationen og initialiser et nyt npm-projekt:

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

              
                Copy
              
            
          

Installer Webpack og dets afhængigheder:

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

              
                Copy
              
            
          

Opret en `webpack.config.js`-fil i roden af host-applikationen med følgende konfiguration:

            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/', // Vigtigt 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'] // Tilføjet react-preset
 }
 }
 },
 {
 test: /\.css$/i,
 use: ["style-loader", "css-loader"],
 },
 ],
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'host',
 remotes: {
 remoteApp: 'remote@http://localhost:3001/remoteEntry.js', // Peger på remote's entry-fil
 },
 shared: ['react', 'react-dom'], // Del react
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

Denne konfiguration definerer indgangspunktet, outputmappen, indstillinger for udviklingsserveren og Module Federation-plugin'et. `remotes`-egenskaben specificerer placeringen af den eksterne applikations `remoteEntry.js`-fil. `shared`-egenskaben definerer de moduler, der deles mellem host- og remote-applikationerne. I dette eksempel deler vi 'react' og 'react-dom'.

Opret en `index.html`-fil i `public`-mappen:

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

              
                Copy
              
            
          

Opret en `src`-mappe og en `index.js`-fil indeni. Denne fil vil indlæse remote-komponenten og rendere den i host-applikationen:

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

import RemoteComponent from 'remoteApp/RemoteComponent';

const App = () => (
 <div>
 <h1>Host Application</h1>
 <p>Dette er host-applikationen, der forbruger en remote komponent.</p>
 <RemoteComponent />
 </div>
);

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

            

              
                Copy
              
            
          

Installer babel-loader og dens presets:

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

              
                Copy
              
            
          

Trin 2: Opsætning af Remote-applikationen

Opret en ny mappe til remote-applikationen og initialiser et nyt npm-projekt:

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

              
                Copy
              
            
          

Installer Webpack og dets afhængigheder:

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

              
                Copy
              
            
          

Opret en `webpack.config.js`-fil i roden af remote-applikationen med følgende konfiguration:

            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/', // Vigtigt for Module Federation
 },
 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', // Eksponerer komponenten
 },
 shared: ['react', 'react-dom'], // Del react
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

Denne konfiguration ligner host-applikationens, men med et par vigtige forskelle. `name`-egenskaben er sat til `remote`, og `exposes`-egenskaben definerer de moduler, der eksponeres til andre applikationer. I dette tilfælde eksponerer vi `RemoteComponent`.

Opret en `index.html`-fil i `public`-mappen:

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

              
                Copy
              
            
          

Opret en `src`-mappe og en `RemoteComponent.js`-fil indeni. Denne fil vil indeholde den komponent, der eksponeres til host-applikationen:

            import React from 'react';

const RemoteComponent = () => (
 <div style={{ border: '2px solid red', padding: '10px', margin: '10px' }}>
 <h2>Remote Komponent</h2>
 <p>Denne komponent er indlæst fra remote-applikationen.</p>
 </div>
);

export default RemoteComponent;

            

              
                Copy
              
            
          

Opret en `src`-mappe og en `index.js`-fil indeni. Denne fil vil rendere `RemoteComponent`, når remote-applikationen køres uafhængigt (valgfrit):

            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
              
            
          

Trin 3: Kørsel af Applikationerne

Tilføj start-scripts til begge `package.json`-filer:

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

              
                Copy
              
            
          

Start begge applikationer ved hjælp af `npm start`. Åbn din browser og naviger til `http://localhost:3000`. Du skulle se host-applikationen, der renderer remote-komponenten. Remote-komponenten vil have en rød kant omkring sig, hvilket indikerer, at den er indlæst fra remote-applikationen.

Avancerede Koncepter og Overvejelser

1. Versionering og Kompatibilitet

Når man deler afhængigheder mellem mikro-frontends, er det vigtigt at overveje versionering og kompatibilitet. Module Federation tilbyder mekanismer til at specificere versionsintervaller og løse konflikter. Værktøjer som semantisk versionering (semver) bliver afgørende for at styre afhængigheder og sikre kompatibilitet på tværs af forskellige mikro-frontends. En manglende korrekt håndtering af versionering kan føre til kørselsfejl eller uventet adfærd, især i komplekse systemer med talrige mikro-frontends.

2. Godkendelse og Autorisation

Implementering af godkendelse og autorisation i en mikro-frontend-arkitektur kræver omhyggelig planlægning. Almindelige tilgange inkluderer brugen af en delt godkendelsestjeneste eller implementering af token-baseret godkendelse. Sikkerhed er altafgørende, og det er afgørende at følge bedste praksis for at beskytte følsomme data. For eksempel kan en e-handelsplatform have en dedikeret godkendelses-mikro-frontend, der er ansvarlig for at verificere brugeroplysninger, før der gives adgang til andre mikro-frontends.

3. Kommunikation Mellem Mikro-Frontends

Mikro-frontends har ofte brug for at kommunikere med hinanden for at udveksle data eller udløse handlinger. Forskellige kommunikationsmønstre kan anvendes, såsom events, delt tilstandsstyring eller direkte API-kald. Valget af det rigtige kommunikationsmønster afhænger af de specifikke krav i applikationen. Værktøjer som Redux eller Vuex kan bruges til delt tilstandsstyring. Brugerdefinerede events kan bruges til løs kobling og asynkron kommunikation. API-kald kan bruges til mere komplekse interaktioner.

4. Ydelsesoptimering

Indlæsning af eksterne moduler kan påvirke ydeevnen, især hvis modulerne er store, eller netværksforbindelsen er langsom. Optimering af modulernes størrelse, brug af code splitting og caching af eksterne moduler kan forbedre ydeevnen. Lazy loading af moduler, så de kun indlæses, når de er nødvendige, er en anden vigtig optimeringsteknik. Overvej også at bruge et Content Delivery Network (CDN) til at servere eksterne moduler fra geografisk tættere placeringer på slutbrugerne og derved reducere latenstid.

5. Test af Mikro-Frontends

Test af mikro-frontends kræver en anden tilgang end test af monolitiske applikationer. Hver mikro-frontend skal testes uafhængigt samt i integration med andre mikro-frontends. Contract testing kan bruges til at sikre, at mikro-frontends er kompatible med hinanden. Enhedstests, integrationstests og end-to-end tests er alle vigtige for at sikre kvaliteten af mikro-frontend-arkitekturen.

6. Fejlhåndtering og Overvågning

Implementering af robust fejlhåndtering og overvågning er afgørende for at identificere og løse problemer i en mikro-frontend-arkitektur. Centraliserede lognings- og overvågningssystemer kan give indsigt i applikationens sundhed og ydeevne. Værktøjer som Sentry eller New Relic kan bruges til at spore fejl og ydelsesmålinger på tværs af forskellige mikro-frontends. En veludformet fejlhåndteringsstrategi kan forhindre kaskadefejl og sikre en robust brugeroplevelse.

Anvendelsesscenarier for Module Federation

Module Federation er velegnet til en række anvendelsesscenarier, herunder:

• Store E-handelsplatforme: Opdeling af hjemmesiden i mindre, uafhængigt udrulningsbare enheder for produktkatalog, indkøbskurv, brugergodkendelse og checkout.
• Virksomhedsapplikationer: Bygning af komplekse dashboards og portaler, hvor forskellige teams er ansvarlige for forskellige sektioner.
• Content Management Systems (CMS): Giver udviklere mulighed for at oprette og udrulle brugerdefinerede moduler eller plugins uafhængigt.
• Mikroservice-arkitekturer: Integration af front-end-applikationer med mikroservice-backends.
• Progressive Web Apps (PWA'er): Dynamisk indlæsning og opdatering af funktioner i en PWA.

Overvej for eksempel en multinational bankapplikation. Med Module Federation kan de centrale bankfunktioner, investeringsplatformen og kundesupportportalen udvikles og udrulles uafhængigt. Dette giver specialiserede teams mulighed for at fokusere på specifikke områder, samtidig med at der sikres en samlet og konsistent brugeroplevelse på tværs af alle tjenester.

Alternativer til Module Federation

Selvom Module Federation tilbyder en overbevisende løsning til mikro-frontend-arkitekturer, er det ikke den eneste mulighed. Andre populære teknikker inkluderer:

• iFrames: En simpel, men ofte mindre fleksibel tilgang, der indlejrer en applikation i en anden.
• Web Components: Genanvendelige brugerdefinerede HTML-elementer, der kan bruges på tværs af forskellige applikationer.
• Single-SPA: Et framework til at bygge single-page-applikationer med flere frameworks.
• Build-time Integration: Kombination af alle mikro-frontends til en enkelt applikation under byggeprocessen.

Hver teknik har sine egne fordele og ulemper, og det bedste valg afhænger af de specifikke krav i applikationen. Module Federation adskiller sig med sin fleksibilitet under kørsel og evnen til at dele kode dynamisk uden at kræve en fuld genopbygning og genudrulning af alle applikationer.

Konklusion

JavaScript Module Federation er en kraftfuld teknik til at bygge skalerbare, vedligeholdelsesvenlige og uafhængige mikro-frontend-arkitekturer. Det tilbyder talrige fordele, herunder uafhængige udrulninger, øget skalerbarhed, forbedret vedligeholdelse, teknologiagnosticisme og genbrug af kode. Ved at forstå nøglekoncepterne, implementere praktiske eksempler og overveje avancerede koncepter kan udviklere udnytte Module Federation til at bygge robuste og fleksible webapplikationer. Efterhånden som webapplikationer fortsætter med at vokse i kompleksitet, giver Module Federation et værdifuldt værktøj til at håndtere denne kompleksitet og give teams mulighed for at arbejde mere effektivt og virkningsfuldt.

Omfavn kraften i decentraliseret webudvikling med JavaScript Module Federation og frigør potentialet for at bygge ægte modulære og skalerbare applikationer. Uanset om du bygger en e-handelsplatform, en virksomhedsapplikation eller et CMS, kan Module Federation hjælpe dig med at opdele applikationen i mindre, mere håndterbare enheder og levere en bedre brugeroplevelse.