Inhaltsverzeechnes[Verstoppen][Show]
- Also, wat ass eng Modulfederatioun?
- Firwat Modul Federatioun?
- Modul Federatioun Kär Komponente
Modul Federatioun Kär Fonctiounen+- Déi
- Excellent Web Leeschtung
- Effektiv Entwécklung
- D'Kapazitéit fir Selbstbehandlung an Redundanz
- Effektiv Ëmgank mat gemeinsame Ofhängegkeeten
- Amplaz d'Konsumenten nei z'installéieren, deploy onofhängeg Code.
- Wann Dir leeft, importéiert Code vun anere baut.
- Erweidert Entwécklererfahrung wärend Clienterfarung erhaalen
- Mikro-Frontends funktionnéieren op eng monolithesch Manéier.
- Konklusioun
D'Konzept vu Mikrofrontends applizéiert Mikroservicer fir Frontend Entwécklung.
D'Iddi ass d'Applikatioun oder d'Websäit opzedeelen a méi kleng, onofhängeg entwéckelt Stécker, déi dann wärend der Runtime verbonne sinn, am Géigesaz zu se als eenzegen, kohäsive Monolith ze kreéieren.
D'Methode erlaabt Iech aner Komponenten vun der Applikatioun mat aneren Technologien a mat onofhängegen Teams ze kreéieren.
D'Iddi ass d'Ënnerhaltskäschte am Zesummenhang mat engem typesche Monolith ze reduzéieren andeems d'Entwécklung op dës Manéier segmentéiert gëtt.
Andeems se hinnen erlaben op e bestëmmte Beräich vun enger Applikatioun als kohärent Team ze konzentréieren, mécht et och nei Forme vu Kooperatioun tëscht Backend a Frontend Devs méiglech.
Zum Beispill kënnt Dir en Team hunn dat eleng verantwortlech ass fir d'Sichfäegkeet oder en aneren Aspekt vun engem Schlësselprodukt dat entscheedend ass fir e Geschäft.
Dank der Modulfederatioun hutt Dir genuch Funktionalitéit fir de Workflow ze handhaben deen den Mikro frontend Approche Mandater.
Dëse Post wäert en déiwe Bléck op d'Architektur vun der Modulfederatioun huelen, souwéi seng Haaptmerkmale an Uwendungsmuster.
Also, wat ass eng Modul Federatioun?
Javascript Modul Federatioun Design mécht Gebrauch vun weiderbenotzt Deeler an vill Uwendungen.
Et ass zimmlech grondleeënd Jargon, awer ech hunn et just einfach gemaach datt et esou schéngen wéi lëschteg.
Wéi mir all vertraut sinn mat Deele vun Komponenten an enger React Applikatioun, erreecht Modul Federation effektiv datselwecht Zil an der Praxis, mat Ausnam datt et dynamesch Applikatiounsmoduler fir Konsum vun aneren Uwendungen aussetzt.
Modul Federatioun probéiert de Problem vum Moduldeelen an engem verdeelte System ze iwwerwannen andeems se dës Schlëssel gedeelt Elementer als Makro oder Mikro wéi gewënscht liwweren.
Dëst gëtt erreecht andeems se se vun Ären Apps an dem Build Workflow ewechgeholl hunn.
Firwat Modul Federatioun?
Hei sinn e puer Faktoren déi d'Modulfederatioun einfach handhabe kann:
- Extern an DLLs (Dynamic Link Libraries) waren alles wat mir heiansdo haten fir Funktionalitéit tëscht Apps ze deelen. All dat huet d'Skaléierungscode Sharing extrem Erausfuerderung gemaach.
- NPM ass schwaach.
- Wann zwee separat Programmer entscheedend Code deelen, musse se dynamesch a flexibel sinn.
Fir Standalone Apps komplett an hirem eegene Repository ze sinn, getrennt z'installéieren an als hiren eegene onofhängege SPA operéieren, gouf Modul Federation erstallt.
Modul Federatioun Kär Komponente
Ier Dir méi déif daucht, kuerz iwwer e puer nei Konzepter diskutéieren, déi d'Modulfederatioun bréngt ass wichteg.
- Host: Wann eng Säit lued, gëtt de Bau oder de Modul initialiséiert am Ufank e Host genannt. E Provider kann als Host geduecht ginn.
- Remote: E Remote ass en anere Konstrukt deen en Deel vum Host benotzt. Si ginn och als Clienten bezeechent.
- Bi-Directional Host: e Webpack Build deen souwuel als Remote funktionéiert deen aner Hosten verbrauchen an e Host deen Remote verbraucht.
- Verkeefer Federatioun: erméiglecht deklarativ gedeelt Runtime Deele vun npm Modul Ofhängegkeeten fir e Host oder Remote, onofhängeg vun der Plaz vun där se gelueden sinn. Ee vun de grousse Performanceprobleemer mat Mikrofrontend gëtt op dës Manéier geléist.
Mustere vun Federated Applikatioun
Evergreen Design System
Eng vun de meescht Basisforme vu federéierten Uwendungen ass en "evergreen Remote", deen e gemeinsame Fernbedienung ass wéi e "Design System" oder "Component Library", deen onofhängeg fir all Benotzer verdeelt an aktualiséiert gëtt.
Ouni all App-Team brauch Zäit op Versiounen ze verbréngen, kann dëst hëllefräich sinn fir sécherzestellen datt all Online-Site un déi lescht Firmenidentitéit halen.
Fir d'Limiten a Prozeduren ze designen an ze setzen déi néideg sinn fir sécher, lafend Updates ze garantéieren, kann dëst eng nëtzlech Plaz sinn fir Geschäfter ze starten wann se eng federéiert Applikatiounsarchitektur berücksichtegen.
Folgend sinn e puer Benotzungsfäll wou onofhängeg ofgebaute gemeinsame Fernbedienunge passend passend sinn:
- Design Systemer
- Applikatioun Shells
- Komponent Bibliothéiken
- Konsumenten
- Gemeinsam Toolkits
- Alternativ Verdeelungsmodeller fir Widgets déi intern oder extern benotzt ginn
Multi-SPA Modul Deele
Rebenotzt scho exportéiert Funktiounen, wéi Komponenten, a verschiddene Standalone Single-page Apps. Virdeeler enthalen:
- Konsumenten kréien automatiséiert Updates
- Domain Expertise bleift am Team dat zoustänneg ass.
- Streamlines d'Deployment Prozedur well separat Modul Releases net néideg sinn.
Shell ugedriwwen Federatioun
D'Shell-Undriff Federatioun enthält:
- Wann Dir eng nei Produktversioun erstellt, waart d'Produktteam net op d'Checkout Team fir hir Aarbecht ofzeschléissen.
- Wann Dir Fernbedienung wiesselt, gëtt et keng Säit nei lued.
- Wann néideg, Shell bitt lues Fernbelaaschtung an (Top-Level) Routing.
- Routing iwwer Fernbedienunge gëtt iwwer Verkeeferfederatioun méiglech gemaach, wat d'Wiederbenotzen vun dacks benotzte npm Packagen erméiglecht.
- Shell bitt de Kader an aner gemeinsam Ofhängegkeeten, déi vun de faul geluedene Fernbedienungen erëmbenotzt ginn.
Multi-Shell Federatioun
Ähnlech wéi d'Schuel-Undriff Federatioun uewen beschriwwen, awer benotzt verschidde Muschelen.
Et enthält:
- eng Rei vun Muschelen
- Wäiss Label
- Net all Remote si vun Shell B erfuerderlech oder hunn onofhängeg Implementatiounen.
Modul Federatioun Kär Fonctiounen
Excellent Web Leeschtung
De Problem mat der normaler NPM Modul Zesummesetzung ass datt wéi d'Zuel vun den Ofhängegkeeten eropgeet, d'Gréisst vun der Applikatioun allgemeng wiisst.
Fir Bündelen ze vermeiden wann Är Applikatioun lued an nëmmen wann néideg lueden, bitt Module Federation Iech d'Fäegkeet fir faul Bündelen ze lueden.
Dëst verhënnert de Besoin fir Moduler erofzelueden ier se tatsächlech erfuerderlech sinn, wat d'Sitegeschwindegkeet verbessert.
Effektiv Entwécklung
All Projet kann isoléiert produzéiert a geliwwert ginn a ka vu verschiddenen Teams duerchgefouert ginn, well Module Federation Iech encouragéiert Är Applikatioun an diskret Projeten ze organiséieren, sou datt Dir se getrennt bauen an ofsetzen (an dofir parallel).
D'Kapazitéit fir Selbstbehandlung an Redundanz
Shared Ofhängegkeeten erlaben Modul Federatioun all Är Programmabhängegkeeten op enger Plaz ze halen.
Op dës Manéier, och wann eng Applikatioun keng Ofhängegkeet deklaréiert oder wann et Netzwierkprobleemer gëtt, weess se ëmmer nach wat se brauch a kann se eroflueden wéi néideg.
Effektiv Ëmgank mat gemeinsame Ofhängegkeeten
Zousätzlech, Modul Federatioun bitt eng super Ofhängegkeet Gestioun, effektiv Verkeefer an Drëtt Partei Ufuerderunge léisen sou datt Är Applikatioun wäert ni méi wéi eng Versioun vun enger Bibliothéik lued.
Amplaz d'Konsumenten nei z'installéieren, deploy onofhängeg Code.
Den Entwéckler ass ganz interesséiert fir ëmmergréng Funktionalitéit ze hunn. Wann ausgesat ofhängeg Funktionalitéit geännert huet, ass et net méi néideg d'Konsumenten nei z'installéieren.
Ech muss zouginn datt dëst eng héich mächteg Feature an sech selwer ass, eng déi virsiichteg Untersuchung brauch fir onerwaart Resultater ze vermeiden.
Wann Dir leeft, importéiert Code vun anere baut.
Wann Dir den NPM Package Modell adoptéiert, kënne mir Apps betruechten déi Modul Federatioun ähnlech wéi APIen benotzen anstatt Code ze deelen an un "Bibliothéik" ze denken.
Op déiselwecht Manéier wéi se och Funktionalitéit vun aneren Apps kënne kréien, kënnen Webapplikatiounen elo d'Funktionalitéit un aner Uwendungen ubidden.
Erweidert Entwécklererfahrung wärend Clienterfarung erhaalen
all JavaScript Entwéckler wäert ganz bequem sinn mat Module Federation well et e Webpack Plugin ass deen zougänglech ass wéi vun der Webpack Versioun 5.
Dëst ass tatsächlech zimlech staark an interessant wa mir et e bësse Gedanken maachen.
Andeems Dir Drëtt Partei Webpack Loader benotzt, betruecht all Komponenten déi Webpack Bündel, dorënner Scripten, Verméigen, Stiler, Biller, Markdowns, a méi.
Andeems Dir Modul Federatioun benotzt, kënnen all dës gedeelt a federéiert ginn.
Mikro-Frontends funktionnéieren op eng monolithesch Manéier.
Et ass zimmlech einfach fir gemeinsame Funktionalitéit op Är Applikatioun ze addéieren; importéiert just de Bündel wéi normal oder benotzt synchron Luede.
Alternativ kann asynchron Belaaschtung benotzt ginn fir nëmmen Ofhängegkeeten ze lueden wann néideg andeems Dir faul Luede benotzt.
Konklusioun
An dësem Post hu mir Modul Federatioun diskutéiert als eng fantastesch Wiel fir Är Mikro-Frontend Applikatioun z'entwéckelen.
D'Apps austauschen an d'Funktionalitéit während der Runtime verbrauchen encouragéiert d'Skalierbarkeet andeems verschidden Teams un onofhängegen Uwendungen schaffen.
Wann déi gemeinsam Funktionalitéit ännert, musst Dir Är Konsumenten net designen an ofsetzen, well et ëmmergréng Funktionalitéit ënnerstëtzt.
Äre Programm funktionnéiert wéi e Monolith nodeems et opgeriicht gouf, wat fantastesch ass.
Deelbar Ofhängegkeete gi benotzt fir d'Gréisst vun den Apps ze reduzéieren. Well vill Entwéckler scho mat der Webpack Ëmfeld vertraut sinn, ass d'Entwécklererfarung exzellent.
Hannerlooss eng Äntwert