JavaScript Module Federation: Põhjalik juhend mikro-esirakenduste arhitektuurile

Pidevalt arenevas veebiarenduse maastikul võib suurte ja keerukate rakenduste ehitamine kiiresti muutuda hirmutavaks ülesandeks. Traditsioonilised monoliitsed arhitektuurid viivad sageli tihedalt seotud koodibaasideni, takistades skaleeritavust, hooldatavust ja sõltumatuid juurutusi. Mikro-esirakendused pakuvad köitvat alternatiivi, jaotades rakenduse väiksemateks, iseseisvalt juurutatavateks üksusteks. Erinevate mikro-esirakenduste tehnikate seas paistab JavaScript Module Federation silma võimsa ja elegantse lahendusena.

Mis on JavaScript Module Federation?

JavaScript Module Federation, mille tõi turule Webpack 5, võimaldab JavaScripti rakendustel dünaamiliselt jagada koodi ja sõltuvusi käitusajal. Erinevalt traditsioonilistest koodijagamise meetoditest, mis tuginevad ehitusaegsetele sõltuvustele, võimaldab Module Federation rakendustel laadida ja käivitada koodi teistest rakendustest, isegi kui need on ehitatud erinevate tehnoloogiate või sama teegi erinevate versioonidega. See loob tõeliselt hajutatud ja lahtisidestatud arhitektuuri.

Kujutage ette stsenaariumi, kus teil on mitu meeskonda, kes töötavad suure e-kaubanduse veebisaidi erinevate osade kallal. Üks meeskond võib vastutada tootekataloogi, teine ostukorvi ja kolmas kasutajate autentimise eest. Module Federation'iga saab iga meeskond arendada, ehitada ja juurutada oma mikro-esirakendust iseseisvalt, muretsemata konfliktide või sõltuvuste pärast teiste meeskondadega. Peamine rakendus ("host" ehk võõrustaja) saab seejärel dünaamiliselt laadida ja renderdada neid mikro-esirakendusi ("remotes" ehk kaugrakendused) käitusajal, luues sujuva kasutajakogemuse.

Module Federation'i põhimõisted

• Host (Võõrustaja): Peamine rakendus, mis tarbib ja renderdab kaugmooduleid.
• Remote (Kaugrakendus): Sõltumatu rakendus, mis eksponeerib mooduleid teiste rakenduste tarbeks.
• Shared Modules (Jagatud moodulid): Sõltuvused, mida jagatakse võõrustaja ja kaugrakenduste vahel. See väldib dubleerimist ja tagab ühtsed versioonid kogu rakenduses.
• Module Federation Plugin: Webpacki pistikprogramm, mis võimaldab Module Federation'i funktsionaalsust.

Module Federation'i eelised

1. Sõltumatud juurutused

Iga mikro-esirakendust saab juurutada sõltumatult, ilma et see mõjutaks rakenduse teisi osi. See võimaldab kiiremaid väljalasketsükleid, vähendatud riski ja suuremat paindlikkust. Berliinis asuv meeskond saab juurutada tootekataloogi uuendusi, samal ajal kui Tokyo ostukorvi meeskond jätkab iseseisvalt oma funktsioonide arendamist. See on oluline eelis globaalselt hajutatud meeskondade jaoks.

2. Suurenenud skaleeritavus

Rakendust saab skaleerida horisontaalselt, juurutades iga mikro-esirakenduse eraldi serveritesse. See võimaldab paremat ressursside kasutamist ja paremat jõudlust. Näiteks autentimisteenust, mis on sageli jõudluse pudelikael, saab skaleerida iseseisvalt, et tulla toime tippkoormustega.

3. Parem hooldatavus

Mikro-esirakendused on väiksemad ja paremini hallatavad kui monoliitsed rakendused, mis teeb nende hooldamise ja silumise lihtsamaks. Igal meeskonnal on oma koodibaasi omandiõigus, mis võimaldab neil keskenduda oma konkreetsele erialavaldkonnale. Kujutage ette ülemaailmset meeskonda, mis on spetsialiseerunud makseväravatele; nad saavad hooldada seda konkreetset mikro-esirakendust, ilma et see mõjutaks teisi meeskondi.

4. Tehnoloogiast sõltumatu

Mikro-esirakendusi saab ehitada erinevate tehnoloogiate või raamistike abil, mis võimaldab meeskondadel valida töö jaoks parimad vahendid. Üks mikro-esirakendus võib olla ehitatud Reactiga, samas kui teine kasutab Vue.js-i. See paindlikkus on eriti kasulik pärandrakenduste integreerimisel või kui erinevatel meeskondadel on erinevad eelistused või teadmised.

5. Koodi taaskasutatavus

Jagatud mooduleid saab taaskasutada mitmes mikro-esirakenduses, vähendades koodi dubleerimist ja parandades järjepidevust. See on eriti kasulik ühiste komponentide, abifunktsioonide või disainisüsteemide puhul. Kujutage ette globaalselt ühtset disainisüsteemi, mida jagatakse kõigi mikro-esirakenduste vahel, tagades ühtse brändikogemuse.

Module Federation'i rakendamine: Praktiline näide

Vaatame läbi lihtsustatud näite, kuidas rakendada Module Federation'i kasutades Webpack 5. Loome kaks rakendust: host (võõrustaja) rakendus ja remote (kaug) rakendus. Kaugrakendus eksponeerib lihtsa komponendi, mida võõrustajarakendus tarbib.

Samm 1: Võõrustajarakenduse seadistamine

Looge uus kataloog võõrustajarakenduse jaoks ja initsialiseerige uus npm-projekt:

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

              
                Copy
              
            
          

Installige Webpack ja selle sõltuvused:

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

              
                Copy
              
            
          

Looge `webpack.config.js` fail võõrustajarakenduse juurkataloogi järgmise konfiguratsiooniga:

            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/', // Oluline Module Federation'i jaoks
 },
 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', // Viitab kaugrakenduse sisenemispunktile
 },
 shared: ['react', 'react-dom'], // Jagame react'i
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

See konfiguratsioon määratleb sisenemispunkti, väljundkataloogi, arendusserveri seaded ja Module Federation'i pistikprogrammi. `remotes` omadus määrab kaugrakenduse `remoteEntry.js` faili asukoha. `shared` omadus defineerib moodulid, mida jagatakse võõrustaja ja kaugrakenduste vahel. Selles näites jagame 'react' ja 'react-dom'.

Looge `index.html` fail `public` kataloogi:

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

              
                Copy
              
            
          

Looge `src` kataloog ja sinna sisse `index.js` fail. See fail laeb kaugkomponendi ja renderdab selle võõrustajarakenduses:

            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
              
            
          

Installige babel-loader ja selle eelseaded:

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

              
                Copy
              
            
          

Samm 2: Kaugrakenduse seadistamine

Looge uus kataloog kaugrakenduse jaoks ja initsialiseerige uus npm-projekt:

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

              
                Copy
              
            
          

Installige Webpack ja selle sõltuvused:

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

              
                Copy
              
            
          

Looge `webpack.config.js` fail kaugrakenduse juurkataloogi järgmise konfiguratsiooniga:

            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/', // Oluline Module Federation'i jaoks
 },
 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', // Komponendi eksponeerimine
 },
 shared: ['react', 'react-dom'], // Jagame react'i
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

See konfiguratsioon on sarnane võõrustajarakenduse omaga, kuid mõne olulise erinevusega. `name` omaduseks on seatud `remote` ja `exposes` omadus määratleb moodulid, mis on teistele rakendustele avatud. Antud juhul eksponeerime `RemoteComponent`'i.

Looge `index.html` fail `public` kataloogi:

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

              
                Copy
              
            
          

Looge `src` kataloog ja sinna `RemoteComponent.js` fail. See fail sisaldab komponenti, mis eksponeeritakse võõrustajarakendusele:

            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
              
            
          

Looge `src` kataloog ja sinna `index.js` fail. See fail renderdab `RemoteComponent`'i, kui kaugrakendust käitatakse iseseisvalt (valikuline):

            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
              
            
          

Samm 3: Rakenduste käivitamine

Lisage mõlema `package.json` faili käivitusskriptid:

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

              
                Copy
              
            
          

Käivitage mõlemad rakendused, kasutades käsku `npm start`. Avage oma brauser ja navigeerige aadressile `http://localhost:3000`. Peaksite nägema võõrustajarakendust, mis renderdab kaugkomponenti. Kaugkomponendil on ümber punane äär, mis näitab, et see on laaditud kaugrakendusest.

Edasijõudnute kontseptsioonid ja kaalutlused

1. Versioonihaldus ja ühilduvus

Mikro-esirakenduste vahel sõltuvuste jagamisel on oluline arvestada versioonihalduse ja ühilduvusega. Module Federation pakub mehhanisme versioonivahemike määramiseks ja konfliktide lahendamiseks. Tööriistad nagu semantiline versioonimine (semver) muutuvad ülioluliseks sõltuvuste haldamisel ja ühilduvuse tagamisel erinevate mikro-esirakenduste vahel. Korraliku versioonihalduse ebaõnnestumine võib põhjustada käitusaegseid vigu või ootamatut käitumist, eriti keerukates süsteemides, kus on arvukalt mikro-esirakendusi.

2. Autentimine ja autoriseerimine

Autentimise ja autoriseerimise rakendamine mikro-esirakenduste arhitektuuris nõuab hoolikat planeerimist. Levinud lähenemisviiside hulka kuuluvad jagatud autentimisteenuse kasutamine või märgipõhise (token-based) autentimise rakendamine. Turvalisus on esmatähtis ja oluline on järgida parimaid praktikaid tundlike andmete kaitsmiseks. Näiteks e-kaubanduse platvormil võib olla spetsiaalne autentimise mikro-esirakendus, mis vastutab kasutaja mandaatide kontrollimise eest enne juurdepääsu andmist teistele mikro-esirakendustele.

3. Mikro-esirakenduste vaheline suhtlus

Mikro-esirakendused peavad sageli omavahel suhtlema andmete vahetamiseks või toimingute käivitamiseks. Kasutada võib erinevaid suhtlusmustreid, näiteks sündmusi (events), jagatud olekuhaldust (shared state management) või otseseid API-kutseid. Õige suhtlusmustri valik sõltub rakenduse konkreetsetest nõuetest. Jagatud olekuhalduseks saab kasutada tööriistu nagu Redux või Vuex. Lahtise sidumise ja asünkroonse suhtluse jaoks saab kasutada kohandatud sündmusi. Keerukamate interaktsioonide jaoks saab kasutada API-kutseid.

4. Jõudluse optimeerimine

Kaugmoodulite laadimine võib mõjutada jõudlust, eriti kui moodulid on suured või võrguühendus on aeglane. Moodulite suuruse optimeerimine, koodi jaotamise (code splitting) kasutamine ja kaugmoodulite vahemällu salvestamine (caching) võivad jõudlust parandada. Laadimine nõudmisel (Lazy loading), st moodulite laadimine ainult siis, kui neid vaja läheb, on veel üks oluline optimeerimistehnika. Samuti kaaluge sisu edastamise võrgu (CDN) kasutamist, et serveerida kaugmooduleid lõppkasutajatele geograafiliselt lähematest asukohtadest, vähendades seeläbi latentsust.

5. Mikro-esirakenduste testimine

Mikro-esirakenduste testimine nõuab teistsugust lähenemist kui monoliitsete rakenduste testimine. Iga mikro-esirakendust tuleks testida iseseisvalt, samuti integratsioonis teiste mikro-esirakendustega. Lepingulist testimist (Contract testing) saab kasutada, et tagada mikro-esirakenduste omavaheline ühilduvus. Ühiktestid, integratsioonitestid ja otsast-lõpuni testid on kõik olulised mikro-esirakenduste arhitektuuri kvaliteedi tagamiseks.

6. Veakäsitlus ja monitooring

Tugeva veakäsitluse ja monitooringu rakendamine on ülioluline probleemide tuvastamiseks ja lahendamiseks mikro-esirakenduste arhitektuuris. Tsentraliseeritud logimis- ja monitooringusüsteemid võivad anda ülevaate rakenduse tervisest ja jõudlusest. Tööriistu nagu Sentry või New Relic saab kasutada vigade ja jõudlusnäitajate jälgimiseks erinevates mikro-esirakendustes. Hästi läbimõeldud veakäsitlusstrateegia võib vältida kaskaadseid rikkeid ja tagada vastupidava kasutajakogemuse.

Module Federation'i kasutusjuhud

Module Federation sobib hästi mitmesuguste kasutusjuhtude jaoks, sealhulgas:

• Suured e-kaubanduse platvormid: Veebisaidi jaotamine väiksemateks, iseseisvalt juurutatavateks üksusteks tootekataloogi, ostukorvi, kasutajate autentimise ja kassasüsteemi jaoks.
• Ettevõtte rakendused: Keerukate armatuurlaudade ja portaalide ehitamine, kus erinevad meeskonnad vastutavad erinevate osade eest.
• Sisuhaldussüsteemid (CMS): Võimaldades arendajatel iseseisvalt luua ja juurutada kohandatud mooduleid või pistikprogramme.
• Mikroteenuste arhitektuurid: Esirakenduste integreerimine mikroteenuste taustsüsteemidega.
• Progressiivsed veebirakendused (PWA): Funktsioonide dünaamiline laadimine ja värskendamine PWA-s.

Näiteks kaaluge rahvusvahelist pangandusrakendust. Module Federation'iga saab põhilisi pangandusteenuseid, investeerimisplatvormi ja klienditoe portaali arendada ja juurutada iseseisvalt. See võimaldab spetsialiseerunud meeskondadel keskenduda konkreetsetele valdkondadele, tagades samal ajal ühtse ja järjepideva kasutajakogemuse kõigis teenustes.

Alternatiivid Module Federation'ile

Kuigi Module Federation pakub köitvat lahendust mikro-esirakenduste arhitektuuridele, ei ole see ainus võimalus. Teiste populaarsete tehnikate hulka kuuluvad:

• iFrames: Lihtne, kuid sageli vähem paindlik lähenemine, mis manustab ühe rakenduse teise sisse.
• Web Components (Veebikomponendid): Taaskasutatavad kohandatud HTML-elemendid, mida saab kasutada erinevates rakendustes.
• Single-SPA: Raamistik üheleheküljeliste rakenduste ehitamiseks mitme raamistikuga.
• Ehitusaegne integratsioon: Kõigi mikro-esirakenduste kombineerimine üheks rakenduseks ehitusprotsessi käigus.

Igal tehnikal on omad eelised ja puudused ning parim valik sõltub rakenduse konkreetsetest nõuetest. Module Federation eristub oma käitusaegse paindlikkuse ja võimega jagada koodi dünaamiliselt, ilma et oleks vaja kõiki rakendusi uuesti ehitada ja juurutada.

Kokkuvõte

JavaScript Module Federation on võimas tehnika skaleeritavate, hooldatavate ja sõltumatute mikro-esirakenduste arhitektuuride ehitamiseks. See pakub arvukalt eeliseid, sealhulgas sõltumatud juurutused, suurenenud skaleeritavus, parem hooldatavus, tehnoloogiast sõltumatus ja koodi taaskasutatavus. Mõistes põhimõisteid, rakendades praktilisi näiteid ja arvestades edasijõudnute kontseptsioone, saavad arendajad kasutada Module Federation'it tugevate ja paindlike veebirakenduste ehitamiseks. Kuna veebirakenduste keerukus jätkuvalt kasvab, pakub Module Federation väärtuslikku tööriista selle keerukuse haldamiseks ning meeskondade tõhusamaks ja tulemuslikumaks töötamiseks.

Võtke omaks detsentraliseeritud veebiarenduse jõud JavaScript Module Federation'iga ja avage potentsiaal tõeliselt modulaarsete ja skaleeritavate rakenduste ehitamiseks. Olenemata sellest, kas ehitate e-kaubanduse platvormi, ettevõtte rakendust või CMS-i, aitab Module Federation teil jaotada rakenduse väiksemateks, paremini hallatavateks üksusteks ja pakkuda paremat kasutajakogemust.