Atklājiet mikro-priekšgala arhitektūru (micro-frontends) spēku ar JavaScript moduļu federāciju Webpack 5. Uzziniet, kā veidot mērogojamas, uzturamas un neatkarīgas tīmekļa lietotnes.
JavaScript moduļu federācija ar Webpack 5: Visaptveroša rokasgrāmata mikro-priekšgala arhitektūrām
Pastāvīgi mainīgajā tīmekļa izstrādes ainavā lielu un sarežģītu lietotņu veidošana var būt biedējošs uzdevums. Tradicionālās monolītās arhitektūras bieži noved pie pagarināta izstrādes laika, izvietošanas sastrēgumiem un grūtībām uzturēt koda kvalitāti. Mikro-priekšgala arhitektūras (Micro-frontends) ir parādījušās kā spēcīgs arhitektūras modelis, lai risinātu šos izaicinājumus, ļaujot komandām veidot un izvietot neatkarīgas lielākas tīmekļa lietotnes daļas. Viena no daudzsološākajām tehnoloģijām mikro-priekšgala arhitektūru ieviešanai ir JavaScript moduļu federācija, kas ieviesta Webpack 5.
Kas ir mikro-priekšgala arhitektūras (micro-frontends)?
Mikro-priekšgala arhitektūras ir arhitektūras stils, kurā priekšgala lietotne tiek sadalīta mazākās, neatkarīgās vienībās, kuras dažādas komandas var izstrādāt, testēt un izvietot autonomi. Katra mikro-priekšgala arhitektūra ir atbildīga par konkrētu biznesa domēnu vai funkciju, un tās tiek apvienotas izpildes laikā, lai izveidotu pilnīgu lietotāja saskarni.
Iedomājieties to kā uzņēmumu: tā vietā, lai būtu viena milzīga izstrādes komanda, jums ir vairākas mazākas komandas, kas koncentrējas uz konkrētām jomām. Katra komanda var strādāt neatkarīgi, ļaujot ātrāk veikt izstrādes ciklus un vieglāk uzturēt sistēmu. Apsveriet lielu e-komercijas platformu, piemēram, Amazon; dažādas komandas varētu pārvaldīt produktu katalogu, iepirkumu grozu, norēķinu procesu un lietotāja konta pārvaldību. Tās visas varētu būt neatkarīgas mikro-priekšgala arhitektūras.
Mikro-priekšgala arhitektūru priekšrocības:
- Neatkarīgas izvietošanas: Komandas var izvietot savas mikro-priekšgala arhitektūras neatkarīgi, neietekmējot citas lietotnes daļas. Tas samazina izvietošanas risku un ļauj ātrāk veikt izlaišanas ciklus.
- Tehnoloģiski agnostiskas: Dažādas mikro-priekšgala arhitektūras var veidot, izmantojot dažādas tehnoloģijas vai ietvarus (piem., React, Angular, Vue.js). Tas ļauj komandām izvēlēties labāko tehnoloģiju savām specifiskajām vajadzībām un pakāpeniski ieviest jaunas tehnoloģijas, nepārrakstot visu lietotni. Iedomājieties, ka viena komanda izmanto React produktu katalogam, cita izmanto Vue.js mārketinga galvenajām lapām, un trešā izmanto Angular norēķinu procesam.
- Uzlabota komandas autonomija: Komandām ir pilnīga atbildība par savām mikro-priekšgala arhitektūrām, kas nodrošina lielāku autonomiju, ātrāku lēmumu pieņemšanu un uzlabotu izstrādātāju produktivitāti.
- Palielināta mērogojamība: Mikro-priekšgala arhitektūras ļauj horizontāli mērogot lietotni, izvietojot atsevišķas mikro-priekšgala arhitektūras uz dažādiem serveriem.
- Koda atkārtota izmantošana: Koplietojamus komponentus un bibliotēkas var viegli koplietot starp mikro-priekšgala arhitektūrām.
- Viegāk uzturēt: Mazākas koda bāzes parasti ir vieglāk saprotamas, uzturamas un atkļūdojamas.
Mikro-priekšgala arhitektūru izaicinājumi:
- Palielināta sarežģītība: Vairāku mikro-priekšgala arhitektūru pārvaldība var palielināt kopējās arhitektūras sarežģītību, īpaši attiecībā uz komunikāciju, stāvokļa pārvaldību un izvietošanu.
- Veiktspējas slogs: Vairāku mikro-priekšgala arhitektūru ielāde var radīt veiktspējas slogu, īpaši, ja tās nav pareizi optimizētas.
- Šķērsgriezuma jautājumi: Tādu šķērsgriezuma jautājumu kā autentifikācija, autorizācija un tematizēšana risināšana mikro-priekšgala arhitektūrā var būt izaicinājums.
- Operacionālais slogs: Nepieciešamas nobriedušas DevOps prakses un infrastruktūra, lai pārvaldītu vairāku mikro-priekšgala arhitektūru izvietošanu un uzraudzību.
Kas ir JavaScript moduļu federācija?
JavaScript moduļu federācija ir Webpack 5 funkcija, kas ļauj koplietot kodu starp atsevišķi kompilētām JavaScript lietotnēm izpildes laikā. Tā ļauj eksponēt jūsu lietotnes daļas kā "moduļus", kurus var izmantot citas lietotnes, nepublicējot tos centrālā repozitorijā, piemēram, npm.
Uztveriet moduļu federāciju kā veidu, kā izveidot federētu lietotņu ekosistēmu, kur katra lietotne var piedāvāt savu funkcionalitāti un patērēt funkcionalitāti no citām lietotnēm. Tas novērš nepieciešamību pēc kompilēšanas laika atkarībām un ļauj veikt patiesi neatkarīgas izvietošanas.
Piemēram, dizaina sistēmas komanda var eksponēt lietotāja saskarnes komponentus kā moduļus, un dažādas lietotņu komandas var patērēt šos komponentus tieši no dizaina sistēmas lietotnes, neinstalējot tos kā npm pakotnes. Kad dizaina sistēmas komanda atjaunina komponentus, izmaiņas automātiski atspoguļojas visās patērējošajās lietotnēs.
Moduļu federācijas pamatjēdzieni:
- Saimnieks (Host): Galvenā lietotne, kas patērē attālinātos moduļus.
- Attālinātais (Remote): Lietotne, kas eksponē moduļus, lai tos varētu patērēt citas lietotnes.
- Koplietojamie moduļi: Moduļi, kas tiek koplietoti starp saimnieka un attālinātajām lietotnēm (piem., React, Lodash). Moduļu federācija var automātiski apstrādāt koplietojamo moduļu versiju kontroli un dublikātu noņemšanu, lai nodrošinātu, ka tiek ielādēta tikai viena katra moduļa versija.
- Eksponētie moduļi: Konkrēti moduļi no attālinātas lietotnes, kas tiek padarīti pieejami patēriņam citām lietotnēm.
- RemoteEntry.js: Fails, ko ģenerē Webpack un kas satur metadatus par attālinātās lietotnes eksponētajiem moduļiem. Saimnieka lietotne izmanto šo failu, lai atrastu un ielādētu attālinātos moduļus.
Moduļu federācijas iestatīšana ar Webpack 5: Praktiska rokasgrāmata
Apskatīsim praktisku piemēru, kā iestatīt moduļu federāciju ar Webpack 5. Mēs izveidosim divas vienkāršas lietotnes: saimnieka (Host) lietotni un attālināto (Remote) lietotni. Attālinātā lietotne eksponēs komponentu, un saimnieka lietotne to patērēs.
1. Projekta iestatīšana
Izveidojiet divus atsevišķus direktorijus savām lietotnēm: `host` un `remote`.
```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```2. Attālinātās lietotnes konfigurācija
Direktorijā `remote` izveidojiet šādus failus:
- `src/index.js`: Lietotnes ieejas punkts.
- `src/RemoteComponent.jsx`: Komponents, kas tiks eksponēts.
- `webpack.config.js`: Webpack konfigurācijas fails.
src/index.js:
```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (Remote Application
src/RemoteComponent.jsx:
```javascript import React from 'react'; const RemoteComponent = () => (This is a Remote Component!
Rendered from the Remote Application.
webpack.config.js:
```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```Izveidojiet `public/index.html` ar pamata HTML struktūru. Svarīgs ir `
`3. Saimnieka lietotnes konfigurācija
Direktorijā `host` izveidojiet šādus failus:
- `src/index.js`: Lietotnes ieejas punkts.
- `webpack.config.js`: Webpack konfigurācijas fails.
src/index.js:
```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (Host Application
webpack.config.js:
```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```Izveidojiet `public/index.html` ar pamata HTML struktūru (līdzīgi kā attālinātajai lietotnei). Svarīgs ir `
`4. Instalējiet Babel
Gan `host`, gan `remote` direktorijos instalējiet Babel atkarības:
```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```5. Palaidiet lietotnes
Gan `host`, gan `remote` direktorijos pievienojiet šādu skriptu failam `package.json`:
```json "scripts": { "start": "webpack serve" } ```Tagad palaidiet abas lietotnes:
```bash cd remote npm start cd ../host npm start ```Atveriet pārlūkprogrammu un dodieties uz `http://localhost:3000`. Jums vajadzētu redzēt saimnieka lietotni ar tajā renderētu attālināto komponentu.
Galveno konfigurācijas opciju skaidrojums:
- `name`: Unikāls nosaukums lietotnei.
- `filename`: Faila nosaukums, kas saturēs metadatus par eksponētajiem moduļiem (piem., `remoteEntry.js`).
- `exposes`: Moduļu nosaukumu un failu ceļu kartējums, kas norāda, kuri moduļi jāeksponē.
- `remotes`: Attālināto lietotņu nosaukumu un URL kartējums, kas norāda, kur atrast katras attālinātās lietotnes remoteEntry.js failu.
- `shared`: Moduļu saraksts, kuriem jābūt koplietotiem starp saimnieka un attālinātajām lietotnēm. Opcija `singleton: true` nodrošina, ka tiek ielādēta tikai viena katra koplietojamā moduļa instance. Opcija `eager: true` nodrošina, ka koplietojamais modulis tiek ielādēts nekavējoties (t.i., pirms jebkuriem citiem moduļiem).
Papildu moduļu federācijas tehnikas
Moduļu federācija piedāvā daudzas papildu funkcijas, kas var palīdzēt jums veidot vēl sarežģītākas mikro-priekšgala arhitektūras.
Dinamiskie attālinātie moduļi (Dynamic Remotes)
Tā vietā, lai cietkodētu attālināto lietotņu URL Webpack konfigurācijā, jūs varat tos ielādēt dinamiski izpildes laikā. Tas ļauj viegli atjaunināt attālināto lietotņu atrašanās vietu, nepārkompilējot saimnieka lietotni.
Piemēram, jūs varētu glabāt attālināto lietotņu URL konfigurācijas failā vai datu bāzē un ielādēt tos dinamiski, izmantojot JavaScript.
```javascript // In webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // Assume remoteUrl is something like 'http://localhost:3001/remoteEntry.js' const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // the key of module federation is that the remote app is // available using the name in the remote resolve(window.remote); }; document.head.appendChild(script); })`, }, ```Tagad jūs varat ielādēt saimnieka lietotni ar vaicājuma parametru `?remote=http://localhost:3001/remoteEntry.js`
Versiju koplietojamie moduļi
Moduļu federācija var automātiski apstrādāt koplietojamo moduļu versiju kontroli un dublikātu noņemšanu, lai nodrošinātu, ka tiek ielādēta tikai viena saderīga katra moduļa versija. Tas ir īpaši svarīgi, strādājot ar lielām un sarežģītām lietotnēm, kurām ir daudz atkarību.
Jūs varat norādīt katra koplietojamā moduļa versiju diapazonu Webpack konfigurācijā.
```javascript // In webpack.config.js shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```Pielāgoti moduļu ielādētāji
Moduļu federācija ļauj definēt pielāgotus moduļu ielādētājus, kurus var izmantot, lai ielādētu moduļus no dažādiem avotiem vai dažādos formātos. Tas var būt noderīgi, lai ielādētu moduļus no CDN vai no pielāgota moduļu reģistra.
Stāvokļa koplietošana starp mikro-priekšgala arhitektūrām
Viens no mikro-priekšgala arhitektūru izaicinājumiem ir stāvokļa koplietošana starp dažādām mikro-priekšgala arhitektūrām. Ir vairākas pieejas, ko varat izmantot, lai risinātu šo izaicinājumu:
- URL balstīta stāvokļa pārvaldība: Saglabājiet stāvokli URL un izmantojiet URL, lai sazinātos starp mikro-priekšgala arhitektūrām. Šī ir vienkārša un tieša pieeja, bet tā var kļūt apgrūtinoša sarežģītam stāvoklim.
- Pielāgoti notikumi: Izmantojiet pielāgotus notikumus, lai pārraidītu stāvokļa izmaiņas starp mikro-priekšgala arhitektūrām. Tas nodrošina vāju sasaisti starp mikro-priekšgala arhitektūrām, bet var būt grūti pārvaldīt notikumu abonementus.
- Koplietojama stāvokļa pārvaldības bibliotēka: Izmantojiet koplietojamu stāvokļa pārvaldības bibliotēku, piemēram, Redux vai MobX, lai pārvaldītu visas lietotnes stāvokli. Tas nodrošina centralizētu un konsekventu veidu, kā pārvaldīt stāvokli, bet var radīt atkarību no konkrētas stāvokļa pārvaldības bibliotēkas.
- Ziņojumu brokeris: Izmantojiet ziņojumu brokeri, piemēram, RabbitMQ vai Kafka, lai atvieglotu komunikāciju un stāvokļa koplietošanu starp mikro-priekšgala arhitektūrām. Šis ir sarežģītāks risinājums, bet tas piedāvā augstu elastības un mērogojamības pakāpi.
Labākās prakses mikro-priekšgala arhitektūru ieviešanai ar moduļu federāciju
Šeit ir dažas labākās prakses, kas jāpatur prātā, ieviešot mikro-priekšgala arhitektūras ar moduļu federāciju:
- Definējiet skaidras robežas katrai mikro-priekšgala arhitektūrai: Katrai mikro-priekšgala arhitektūrai jābūt atbildīgai par konkrētu biznesa domēnu vai funkciju un tai jābūt labi definētām saskarnēm.
- Izmantojiet konsekventu tehnoloģiju kopu: Lai gan moduļu federācija ļauj izmantot dažādas tehnoloģijas dažādām mikro-priekšgala arhitektūrām, parasti ir laba ideja izmantot konsekventu tehnoloģiju kopu, lai samazinātu sarežģītību un uzlabotu uzturēšanu.
- Izveidojiet skaidrus komunikācijas protokolus: Definējiet skaidrus komunikācijas protokolus, kā mikro-priekšgala arhitektūrām vajadzētu mijiedarboties savā starpā.
- Automatizējiet izvietošanas procesu: Automatizējiet izvietošanas procesu, lai nodrošinātu, ka mikro-priekšgala arhitektūras var izvietot neatkarīgi un uzticami. Apsveriet CI/CD cauruļvadu un infrastruktūras-kā-koda rīku izmantošanu.
- Pārraugiet savu mikro-priekšgala arhitektūru veiktspēju: Pārraugiet savu mikro-priekšgala arhitektūru veiktspēju, lai identificētu un novērstu jebkādus veiktspējas sastrēgumus. Izmantojiet tādus rīkus kā Google Analytics, New Relic vai Datadog.
- Ieviesiet robustu kļūdu apstrādi: Ieviesiet robustu kļūdu apstrādi, lai nodrošinātu, ka jūsu lietotne ir noturīga pret kļūmēm.
- Pieņemiet decentralizētu pārvaldības modeli: Dodiet komandām iespēju pieņemt lēmumus par savām mikro-priekšgala arhitektūrām, vienlaikus saglabājot vispārējo konsekvenci un kvalitāti.
Reāli piemēri moduļu federācijas darbībā
Lai gan konkrēti gadījumu pētījumi bieži ir konfidenciāli, šeit ir daži vispārināti scenāriji, kuros moduļu federācija var būt neticami noderīga:
- E-komercijas platformas: Kā minēts iepriekš, lielas e-komercijas platformas var izmantot moduļu federāciju, lai izveidotu neatkarīgas mikro-priekšgala arhitektūras produktu katalogam, iepirkumu grozam, norēķinu procesam un lietotāja konta pārvaldībai. Tas ļauj dažādām komandām strādāt pie šīm funkcijām neatkarīgi un izvietot tās, neietekmējot citas lietotnes daļas. Globāla platforma varētu pielāgot funkcijas dažādiem reģioniem, izmantojot attālinātos moduļus.
- Finanšu pakalpojumu lietotnes: Finanšu pakalpojumu lietotnēm bieži ir sarežģītas lietotāja saskarnes ar daudzām dažādām funkcijām. Moduļu federāciju var izmantot, lai izveidotu neatkarīgas mikro-priekšgala arhitektūras dažādiem kontu veidiem, tirdzniecības platformām un pārskatu paneļiem. Atbilstības funkcijas, kas ir unikālas noteiktām valstīm, var piegādāt, izmantojot moduļu federāciju.
- Veselības aprūpes portāli: Veselības aprūpes portāli var izmantot moduļu federāciju, lai izveidotu neatkarīgas mikro-priekšgala arhitektūras pacientu pārvaldībai, vizīšu plānošanai un medicīnisko ierakstu piekļuvei. Dažādus moduļus dažādiem apdrošināšanas pakalpojumu sniedzējiem vai reģioniem var ielādēt dinamiski.
- Satura pārvaldības sistēmas (CMS): CMS var izmantot moduļu federāciju, lai ļautu lietotājiem pievienot pielāgotu funkcionalitāti savām vietnēm, ielādējot attālinātos moduļus no trešo pušu izstrādātājiem. Dažādas tēmas, spraudņus un logrīkus var izplatīt kā neatkarīgas mikro-priekšgala arhitektūras.
- Mācību pārvaldības sistēmas (LMS): LMS var piedāvāt kursus, kas izstrādāti neatkarīgi un integrēti vienotā platformā, izmantojot moduļu federāciju. Atsevišķu kursu atjauninājumiem nav nepieciešama visas platformas pārinstalēšana.
Noslēgums
JavaScript moduļu federācija Webpack 5 nodrošina spēcīgu un elastīgu veidu, kā veidot mikro-priekšgala arhitektūras. Tā ļauj koplietot kodu starp atsevišķi kompilētām JavaScript lietotnēm izpildes laikā, nodrošinot neatkarīgas izvietošanas, tehnoloģiju daudzveidību un uzlabotu komandas autonomiju. Ievērojot šajā rokasgrāmatā izklāstītās labākās prakses, jūs varat izmantot moduļu federāciju, lai veidotu mērogojamas, uzturamas un inovatīvas tīmekļa lietotnes.
Priekšgala izstrādes nākotne neapšaubāmi virzās uz modulārām un sadalītām arhitektūrām. Moduļu federācija nodrošina būtisku rīku šo moderno sistēmu veidošanai, ļaujot komandām radīt sarežģītas lietotnes ar lielāku ātrumu, elastību un noturību. Tehnoloģijai attīstoties, mēs varam sagaidīt vēl inovatīvākus lietošanas gadījumus un labākās prakses.