Amikrofrontendzbaton parimin e mikroshërbimeve në shtresën e prezantimit: në vend të një aplikacioni të vetëm monolit Angular, pjesa e përparme ndahet në pjesë të pavarura (shpesh i lidhur me ekipe të veçanta produkti), secila me ndërtimin, vendosjen dhe tubacionin e vet Cikli i lëshimit, i përbërë së bashku me kohën e ekzekutimit ose kohën e ndërtimit në një përvojë të vetme përdoruesi. Përfitimi Kryesorja nuk është teknike, por organizative: ekipe të ndryshme mund të lëshojnë në mënyrë autonome pa koordinoni një vendosje të përbashkët monolit. Kompensimi po aq real është një kompleksitet shtesë të përbërjes, varësive të përbashkëta dhe testimit të integrimit - mikrofrontet nuk janë zgjidhja e drejtë për çdo projekt, dhe duhet të miratohet kur kostoja e koordinimit midis ekipeve tashmë tejkalon sot kostoja e kompleksitetit teknik që ato paraqesin.
Modeli i integrimit: Krahasimi
| Modelet | Pro | Kundër | Kur ta preferoni |
|---|---|---|---|
| Nga ana e klientit (predha + telekomandë) | Fleksibilitet maksimal i kohës së funksionimit, vendosje reale të pavarura | Kompleksiteti i ndarjes së varësive, rreziku i dyfishimit | Ekipe të shumta, publikime të shpeshta të pavarura |
| Përbërja nga ana e serverit | SEO vendase, pa JS shtesë për kompozim | Kërkon infrastrukturë të dedikuar të serverit (SSI/ESI) | Përmbajtje publike me trafik të lartë, SEO kritike |
| Proxy i skajit/kundërt | Përbërja e centralizuar, cache e grimcuar për fragment | Proxy bëhet një pikë e vetme dështimi | Ekipi infra i pjekur, nevoja e fortë për caching të skajeve |
| Komponentët e Uebit | Kornizë agnostike, enkapsulim origjinal i DOM-it | Komunikimi midis komponentëve më pak të natyrshëm se një kornizë vendase | Ekipet me grupe heterogjene në front (jo vetëm Angular) |
| iFrame | Izolim total, zero konflikte CSS/JS | UX e dobët, komunikim i vështirë ndër-kornizash, zero SEO | Vetëm për integrimin e palëve të treta të pabesueshme |
Për shumicën e ekipeve të ndërmarrjeve Angular, modeli nga ana e klientit meModuli Federatambetet zgjedhja e paracaktuar: balanconi fleksibilitetin e kohës së funksionimit dhe integrimin natyror me rrugëzimin dhe injektimin e varësisë së Angular, pa izolimin e tepërt të një iframe.
Federata e Modulit (Webpack 5): Shell dhe Remote
Shell (host) ngarkon në mënyrë dinamike paketat e largëta në kohën e ekzekutimit, duke ndarë varësitë ato të zakonshmet (Angular, RxJS) si singleton për të shmangur shkarkimin e tyre të shumëfishtë.
// webpack.config.js — SHELL (host)
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'shell',
remotes: {
checkout: 'checkout@https://cdn.example.com/checkout/remoteEntry.js',
},
shared: { '@angular/core': { singleton: true, strictVersion: true }, 'rxjs': { singleton: true } },
}),
],
};
// webpack.config.js — REMOTE (checkout)
new ModuleFederationPlugin({
name: 'checkout',
filename: 'remoteEntry.js',
exposes: { './Module': './src/app/checkout/checkout.module.ts' },
shared: { '@angular/core': { singleton: true, strictVersion: true }, 'rxjs': { singleton: true } },
});
// Routing shell — lazy load dinamico del remote
export const routes: Routes = [
{
path: 'checkout',
loadChildren: () => import('checkout/Module').then(m => m.CheckoutModule),
},
];
Single-SPA: Regjistrimi dhe cikli i jetës
// Registrazione di un microfrontend Angular in single-spa
registerApplication({
name: 'checkout',
app: () => import('./checkout.app'),
activeWhen: ['/checkout'],
});
// Lifecycle esposto dal microfrontend
export const { bootstrap, mount, unmount } = singleSpaAngular({
bootstrapFunction: singleSpaProps => bootstrapApplication(CheckoutRootComponent),
template: '',
});
Elementet këndore / Komponentët e Uebit
// Esporre un componente Angular come Web Component standard
const app = await bootstrapApplication(ProductCardComponent);
const element = createCustomElement(ProductCardComponent, { injector: app.injector });
customElements.define('product-card', element);
Konsumatori, megjithëse nuk bazohet në Angular, përdor komponentin si çdo etiketë vendase HTML:— kjo është ajo që e bën Web-in
Komponentët janë opsioni i duhur kur guaska ose mikrofrontet e tjera nuk janë Angular.
Alternativa më të lehta:harta e importitme module dinamike ES (pa mjete ndërtimi
kushtuar federatës, vetëmimport ()amtare e drejtuar drejt URL-ve të versionuara) për ekipet që
ata duan të shmangin kompleksitetin e konfigurimit të Federatës së Moduleve dhe modeleveNx
monorepokur mikrofrontet ndajnë të njëjtin depo gjithsesi por dëshirojnë
të mbajë tubacione të pavarura ndërtimi nëpërmjet grafikut të prekur.
Sistemi i Ndarjes dhe Dizajnimit të Varësisë
Angular dhe RxJS duhet të ndahen gjithmonë sisingleton: e vërtetënë Federatën Module: pa
Kështu, çdo telekomandë shkarkon kopjen e vet të kornizës, duke e fryrë paketën dhe duke e rrezikuar atë
ndryshimi i papajtueshmërisë së zbulimit midis shell dhe telekomandë të ngarkuar së bashku.
// package.json della libreria di design system condivisa — peerDependencies, non dependencies
{
"name": "@azienda/mfe-ui",
"peerDependencies": { "@angular/core": "^18.0.0", "rxjs": "^7.0.0" }
}
Publikoni komponentët kryesorë dhe argumentet e dizajnit si një bibliotekë e veçantë e versionuar (jo dublikuar në secilën microfrontend), i dokumentuar në Storybook - saktësisht i njëjti model si një sistem dizajni të centralizuar, me të vetmin ndryshim se këtu konsumatorët janë mikrofronte të pavarur në vend të aplikacione të veçanta.
Routing, Statusi dhe Komunikimi ndërmjet Microfrontends
Tërrugëtimi global(cili mikrofront për të treguar) mbetet përgjegjësi e guaskës; çdo telekomandë menaxhon të vetënitinerari lokal(nën-rrugët e brendshme) në një farë mënyre plotësisht i pavarur — guaska nuk ka nevojë të dijë strukturën e brendshme të rrugëzimit të a në distancë, vetëm shtegu i hyrjes.
// Event bus condiviso con RxJS — comunicazione shell/remote senza accoppiamento diretto
export class MfeEventBus {
private readonly subject = new Subject<{ type: string; payload: unknown }>();
emit(type: string, payload: unknown) { this.subject.next({ type, payload }); }
on(type: string) { return this.subject.pipe(filter(e => e.type === type), map(e => e.payload)); }
}
Për gjendjen e përbashkët, tre opsione me kompensime të ndryshme:URL-në(më e thjeshta dhe e fortë, por e kufizuar në gjendje të serializueshme), aautobus ngjarjeshsi më sipër (i shkëputur por pa gjendjen e vet të vazhdueshme), ose njëdyqan i përbashkëtbotuar si bibliotekë singleton (më i fuqishëm, por prezanton bashkim të nënkuptuar midis mikrofronteve që duhet të pajtohen në një formë të përbashkët shtetërore). Kontrata midis shell dhe telekomandë duhet të jetë gjithmonë e qartë dhe e shtypur - mbështetëse ngjarjet hyrëse dhe dalëse, asnjëherë akses i drejtpërdrejtë dhe i padokumentuar në gjendjen e brendshme të a telekomandë tjetër.
CI/CD, Testimi dhe vendosja
Çdo mikrofront ka linjën e vet të pavarur: ndërtimi, testimi i njësisë, Libri i tregimeve dhe publikimi i deleveRemoteEntry.jsgjurmët e gishtave në CDN, pa u varur nga vendosja e mikrofronteve të tjera.
# GitHub Actions — sintesi pipeline per un singolo microfrontend
jobs:
build-and-deploy:
steps:
- run: npm ci
- run: npm run build -- --configuration production
- run: npm test -- --watch=false
- run: npx cypress run
- run: aws s3 cp dist/checkout s3://cdn.example.com/checkout/$GITHUB_SHA --recursive
- run: node scripts/update-manifest.js checkout $GITHUB_SHA
// scripts/update-manifest.js — aggiorna il manifest che la shell legge per risolvere i remoteEntry
const manifest = JSON.parse(fs.readFileSync('manifest.json'));
manifest[process.argv[2]] = `https://cdn.example.com/${process.argv[2]}/${process.argv[3]}/remoteEntry.js`;
fs.writeFileSync('manifest.json', JSON.stringify(manifest, null, 2));
Për integrimin me guaskë dhe në distancë, dy nivele testimi:testi i kontratësse verifikoni që telekomanda ekspozon ndërfaqen e pritshme (produktet/ngjarjet) pa e vendosur të gjithë guaskën, p.sh.E2E kundrejt një mjedisi skenikme guaskën e vërtetë dhe telekomandat e vërteta, të rezervuara për flukse kritike ndër-mikro frontale — telekomanda tallëse në testet e njësisë së guaskës, mos u mbështetni vetëm për të vërtetuar integrimin real.
Performanca dhe Optimizimi
<!-- Prefetch del remoteEntry del prossimo microfrontend probabile, senza bloccare il rendering corrente -->
<link rel="prefetch" href="https://cdn.example.com/checkout/remoteEntry.js" as="script" />
- Ngarkimi dembelnga çdo telekomandë vetëm kur vizitohet rruga përkatëse, asnjëherë në paketën fillestare të guaskës.
- Gjurmët e gishtërinjve me hyrje në distancë(hash në shteg, jo emri i skedarit për pajtueshmërinë e Federatës së Modulit) për cache të gjatë pa anulime aksidentale.
- Analizuesi i grupit për secilën telekomandë në mënyrë të pavarur, jo vetëm në guaskën e përgjithshme, për të identifikuar dyfishimet e varësive që nuk ndahen siç duhet.
- TTI/LCP e matur për një mikrofront të vetëm, jo vetëm në faqen e përgjithshme: një telekomandë e ngadaltë degradon perceptimin e të gjithë guaskës edhe nëse pjesa tjetër është e shpejtë.
Siguria dhe Operacionet
# CSP che permette script solo dai domini CDN dei microfrontend fidati
Content-Security-Policy: script-src 'self' https://cdn.example.com; connect-src 'self' https://cdn.example.com;
Kërkohet HTTPS në çdo CDN që shërben një hyrje në distancë dhe CORS i konfiguruar në mënyrë eksplicite për lejojnë shell të ngarkojë skriptet me origjinë të kryqëzuar nga domenet e mikrofrontit. Gjithmonë menaxhoni dështimi për të ngarkuar një telekomandë me një komponent të qartë kthimi, asnjëherë një faqe bosh: një mikrofront dytësor që nuk përgjigjet nuk duhet të pengojë përdorimin e pjesës tjetër të aplikacionit.
// Fallback route nella shell se un remote non è raggiungibile
loadChildren: () => import('checkout/Module')
.then(m => m.CheckoutModule)
.catch(() => import('./fallback/checkout-unavailable.module').then(m => m.CheckoutUnavailableModule)),
Monitorimi duhet të vendoset për një mikrofront të vetëm, jo vetëm për një total: shkalla e gabimit, vendosja Frekuenca dhe vonesa e ngarkimit të hyrjes në distancë për çdo ekip, kështu që identifikohet një problem menjëherë në mikrofrontin përgjegjës në vend të gjeneralisht "në guaskë".
Shkallueshmëria dhe rikthimi
Çdo vendosje e një telekomande është e versionuar (rruga me hash/SHA e kryerjes në CDN); rikthimi përbëhet ngariposto manifestinnë versionin e mëparshëm, pa pasur nevojë për një vendosje të re ose rindërtimi - operacioni më i shpejtë i mundshëm në rast regresioni.
# Rollback: ripunta il manifest alla versione precedente del remote
node scripts/update-manifest.js checkout $PREVIOUS_SHA
Për paraqitje të qetë, përdornitipare flamujshnë nivelin e guaskës (cili version i manifest i shërbejnë sa përqindje përdoruesish) në vend të një kanarine të nivelit të infrastrukturës më shumë komplekse për të orkestruar për fragmente individuale të ndërfaqes së përdoruesit.
Studimi i rastit 1: Tregu me 4 ekipe produktesh
Një treg me 4 ekipe të pavarura (kërkim, produkt, arkë, llogari) ka miratuar Modulin Federata me guaskë të centralizuar. Përpjekja fillestare e konfigurimit: ~ 120 orë persona për shell, manifest dhe tubacion i përbashkët CI/CD. Pas 5 muajsh: frekuenca e vendosjes shkoi nga 1/javë (monolit) në 12/javë e grumbulluar në 4 ekipe, koha mesatare e rikthimit nga 25 minuta (rindërtimi i plotë) në 40 sekonda (përditësimi i manifestit), 0 konflikte të bashkimit ndërmjet ekipeve në front.
Rasti Studimi 2: Platforma SaaS që zgjerohet ndërkombëtarisht
Një platformë SaaS me ekipe të shpërndara në 3 zona kohore ka miratuar Komponentët e Uebit për të mundësuar një ekip me rafte React për t'u integruar në guaskën ekzistuese Angular pa rishkruar asgjë. Përpjekja: ~ 80 orë personash për Komponentin e parë të Uebit në distancë plus bibliotekën e përbashkët të dizajnit të tokenit. Rezultati: koha në treg e veçorisë së parë të ndërsjellë është zvogëluar nga 6 në 3 javë, pa varësi të detyruara nga një grup i vetëm frontend për ekipet e reja që hyjnë në bord.
Lista kontrolluese operative para fillimit
- Pastroni kufijtë e domenit të biznesit midis mikrofronteve, të lidhura me ekipet, jo arbitrare.
- Sistemi i përbashkët i dizajnit i publikuar para telekomandës së parë, jo pas.
- Kontrata e dokumentuar dhe e versionuar në mënyrë të qartë shell-mote (propozime/ngjarje).
- Tubacioni i pavarur CI/CD gati për të paktën telekomandën e parë përpara se të shtoni një të dytë.
Plani ditor 30/60/90
Ditët 1-30
- Shell dhe telekomanda e parë në prodhim me Federatën Module -KPI: ndërtimi i shkallës së suksesit 100%, vendosja e pavarur e verifikuar.
Ditët 31-60
- Telekomanda e dytë dhe e tretë në bord, monitorim aktiv për mikrofront -KPI: shkalla e gabimit gjurmohet veçmas për secilën telekomandë.
Ditët 61-90
- Rikthim i testuar nga fundi në fund, veçori flamujsh për paraqitje aktive graduale —KPI: Koha e rikthimit e matur nën një minutë.
FAQ
A dublikon gjithmonë Federata e Modulit Angular nëse nuk është konfiguruar mirë?
Po, pasingleton: e vërtetënë seksionin e përbashkët çdo telekomandë shkarkon kopjen e vet të kornizës, duke e fryrë paketën dhe duke rrezikuar papajtueshmërinë.
Si e menaxhoni itinerarin kur një telekomandë është e paarritshme?
Me një kthim të qartë në zinxhirin e ngarkimit dembel, duke mos e lënë kurrë gabimin e importit të përhapet si një faqe bosh.
A ju nevojitet vërtet Nx për të krijuar mikrofronte me Angular?
Jo, është i dobishëm për orkestrimin e projekteve të shumta në të njëjtën depo, por Federata e Modulit punon edhe me depo krejtësisht të veçanta.
Sa mikrofronte janë "shumë"?
Nuk ka numër fiks; flamuri i kuq është kur kostoja e koordinimit ndërmjet kontratave në distancë tejkalon përfitimin e vendosjeve të pavarura.
Si i testoni integrimet e guaskës dhe ato në distancë?
Me testimin e kontratës në telekomandat individuale plus E2E në një mjedis vendosjeje me predha të vërteta dhe telekomandë për flukse kritike.
A ngadalësojnë performancën mikrofrontet krahasuar me një monolit?
Ato mund, nëse nuk trajtohen me ngarkimin e saktë dembel dhe të ftohen paraprakisht; i konfiguruar mirë, ndikimi është margjinal në krahasim me përfitimet organizative.
Si i ndani argumentet e dizajnit midis mikrofronteve të ndryshme?
Me një bibliotekë të publikuar veçmas, të versionuar dhe të konsumuar si një varësi nga bashkëmoshatarët nga çdo telekomandë.
Komponentët e Uebit apo Federata e Moduleve?
Moduli i Federatës kur të gjitha mikrofrontet janë këndore; Komponentët e Uebit kur grumbulli është heterogjen ose kërkon izolim agnostik të kornizës.
Si ta ktheni shpejt një mikrofront të vetëm?
Rivendosja e manifestit në versionin e mëparshëm të remoteEntry, pa pasur nevojë për një vendosje të re.
Keni nevojë për një guaskë të dedikuar apo mund të jetë edhe një aplikacion aplikacioni?
Preferohet një guaskë e dedikuar, minimale dhe e qëndrueshme, për të reduktuar rrezikun që rishpërndarja e saj të prekë të gjitha telekomandat në të njëjtën kohë.
Si të shmangni dyfishimin e CSS midis mikrofronteve?
Me një sistem të përbashkët dizajni si burimi i vetëm i stileve bazë, dhe kapsulim (DOM hije ose konventë rigoroze e emërtimit) për stilet specifike të secilës telekomandë.
A kanë kuptim mikrofrontet për një ekip të vetëm?
Rrallëherë: përfitimi kryesor është organizativ, me një ekip të vetëm kostoja e përbërjes së kohës zakonisht tejkalon përfitimet.
Gabimet e zakonshme që duhen shmangur
- Angular nuk ndahet si teke: shkakton dyfishimin e kornizës dhe gabimin e zbulimit të ndryshimit midis guaskës dhe telekomandës.
- Nuk ka rikthim UX për telekomandat e paarritshme: Shndërron një problem të izoluar në një faqe të zbrazët për të gjithë aplikacionin.
- Kontrata e padokumentuar me guaskë në distancë: Çdo ekip merr me mend ndërfaqen, duke shkaktuar regresione të heshtura me çdo vendosje.
- Kufijtë arbitrar të domenit midis mikrofronteve: Gjeneron komunikim të tepruar në distancë në vend që të reduktojë bashkimin.
- Sistemi i dyfishtë i dizajnit në vend të përbashkët: Prodhon mospërputhje vizuale midis mikrofronteve brenda disa javësh.
- Nuk ka prova të kontratës midis shell dhe telekomandë: Regresionet e integrimit zbulohen vetëm në prodhim.
- Vendosja e paversionuar në distancë: E bën rikthimin po aq të ngadaltë dhe të rrezikshëm sa një rindërtim i plotë.
- Monitorimi i grumbulluar vetëm në guaskë: Ju pengon të identifikoni shpejt se cili mikrofront po shkakton një problem.
- iFrame përdoret për përbërjen e brendshme midis ekipeve të besuara: prezanton zero komunikim dhe kompleksitet SEO pa nevojën reale për izolim total.
- Asnjë marrje paraprake e telekomandave të mundshme: Çdo navigim në një mikrofront të ri paguan koston e plotë të ngarkimit të ftohtë.
Si të kontrolloni
- Ndërtimi i secilës telekomandë të izoluar:
npx uebpack --config webpack.config.jsdhe kontrollon për gabime. - Testet E2E në predha reale + telekomandë në skenë:
npx vrap selvi. - Verifikimi i manifestimit: Kontrolloni që çdo hyrje të tregojë a
RemoteEntry.jsrealisht e arritshme (kaçurrela -Inë çdo URL). - Kontrolloni madhësinë e paketës për telekomandë individuale me një analizues të paketave, jo vetëm në guaskën totale.
- Testi i kthimit: Çaktivizoni përkohësisht një telekomandë dhe verifikoni që guaska tregon komponentin e kthimit në vend të një gabimi.
- Monitorimi aktiv: Verifikoni që shkalla e gabimit, frekuenca e vendosjes dhe vonesa të gjurmohen veçmas për çdo mikrofront.
konkluzioni
Microfrontends me Angular zgjidhin një problem organizativ, jo kryesisht teknik: nevoja që ekipe të shumta të lëshohen në mënyrë autonome pa koordinuar një monolit të përbashkët. Moduli Federata me varësi të përbashkëta, si p.sh., një sistem i centralizuar projektimi, kontrata eksplicite midis shell dhe telekomandë, dhe një rikthim i versionuar i bazuar në manifest janë elementët që dalloni një arkitekturë vërtet të qëndrueshme të mikrofrontit nga kompleksiteti i shtuar pa përfitim real.
Dëshironi një depo të skeletit për të filluar ose një vlerësim të arkitekturës suaj të frontendit ekzistuese?Kërkoni një auditim teknik: në disa orë analize është e mundur të identifikohet Kufijtë e saktë të domenit dhe rreziqet kryesore të një adoptimi të mikrofrontit për ekipin tuaj.