Table di cuntinutu[Piattà][Mostra]
- Allora, chì hè una federazione di moduli?
- Perchè a federazione di moduli?
- Cumpunenti core di a federazione di moduli
Funzioni principali di u Modulu Federazione+-
- Eccellente prestazione web
- Sviluppu efficace
- A capacità di auto-guaricà è redundancy
- Trattamentu efficace di dipendenze cumuni
- Invece d'avè da ridistribuisce i cunsumatori, implementate codice indipendente.
- Quandu eseguite, impurtate u codice da altre build.
- Esperienza di sviluppatore rinfurzata mentre cunservà l'esperienza di u cliente
- I micro-frontends operanu in una moda monolitica.
- cunchiusioni
U cuncettu di micro frontends applica microservizi à u sviluppu di frontend.
L'idea hè di scumpressà l'applicazione o u situ web in pezzi più chjuchi è sviluppati indipendentemente chì sò allora cunnessi durante u runtime, invece di creà cum'è un monolitu unicu è coesiu.
U metudu permette di creà altri cumpunenti di l'applicazione utilizendu altre tecnulugia è cù squadre indipendenti.
L'idea hè di riduce e spese di mantenimentu ligati à un monolitu tipicu segmentendu u sviluppu in questu modu.
Permettenu di cuncentrazione in una zona particulare di una applicazione cum'è una squadra coherente, rende ancu possibili novi forme di cooperazione trà i devs backend è frontend.
Per esempiu, pudete avè una squadra chì hè solu rispunsevule per a capacità di ricerca o un altru aspettu di un pruduttu chjave chì hè cruciale per un affari.
Grazie à a federazione di moduli, avete abbastanza funziunalità per trattà u flussu di travagliu chì u micro frontend mandati di avvicinamentu.
Questu post hà da piglià un ochju prufondu à l'architettura di a federazione di moduli, è e so caratteristiche principali è i mudelli di l'applicazione.
Allora, chì hè un federazione di moduli?
U disignu di a federazione di moduli di Javascript face usu di parti riutilizate in parechje applicazioni.
Hè un gergo abbastanza basicu, ma aghju solu fattu chì pareva cusì ventu.
Cume avemu tutti familiarizati cù cumpunenti di spartera in una applicazione React, a Federazione di Moduli rializeghja in modu efficace u listessu scopu in pratica, cù l'eccezzioni chì espone dinamicamente i moduli di l'applicazione per u cunsumu da altre applicazioni.
A Federazione di Moduli cerca di superà u prublema di spartera di moduli in un sistema distribuitu offrendu quelli elementi chjave spartuti cum'è macro o micro cum'è desideratu.
Questu hè realizatu da esse eliminati da e vostre app è u flussu di travagliu di creazione.
Perchè a federazione di moduli?
Eccu alcuni fatturi chì a federazione di moduli pò trattà facilmente:
- Esterni è DLL (Biblioteche di ligami dinamichi) eranu tuttu ciò chì avemu avutu in ocasioni per sparta funziunalità trà app. Tuttu ciò chì hà fattu a scala di spartera di codice estremamente sfida.
- NPM hè lento.
- Quandu dui prugrammi separati sparte codice cruciale, devenu esse dinamichi è flessibili.
Per chì l'applicazioni standalone sò totalmente in u so propiu repository, implementate separatamente, è operanu cum'è a so propria SPA indipendente, a Federazione di Moduli hè stata creata.
Cumpunenti core di a federazione di moduli
Prima di immersione più profonda, discute brevemente uni pochi di cuncetti novi chì a federazione di moduli porta hè impurtante.
- Host: Quandu una pagina carica, a custruzione o u modulu inizializatu inizialmente hè chjamatu host. Un fornitore pò esse cunsideratu cum'è un host.
- Remote: Un remoto hè una custruzzione sfarente chì usa una parte di l'ospite. Sò ancu chjamati clienti.
- Host bidirezionale: una custruzzione Webpack chì funziona sia cum'è un remotu chì altri ospiti cunsumanu è un òspite chì cunsuma telecomandi.
- Federazione di venditori: permette a spartera di runtime di modu dichjarazione spartutu di dipendenze di moduli npm per un host o remoto, indipendentemente da u locu da quale sò caricati. Unu di i prublemi maiò di rendiment cù i micro frontends hè risoltu in questu modu.
Modelli di Applicazioni Federati
Sistema di cuncepimentu Evergreen
Una di e forme più basi di l'applicazioni federate hè un "remota evergreen", chì hè un remoto spartutu cum'è un "Sistema di Design" o "Biblioteca di cumpunenti" chì hè distribuitu è aghjurnatu indipindente per tutti l'utilizatori.
Senza chì ogni squadra di l'app hà bisognu di passà u tempu nantu à rivisioni, questu puderia esse utile per assicurà chì tutti i siti in linea aderiscenu à l'identità corporativa più recente.
Per cuncepisce è mette in piazza i limiti è e prucedure necessarii per guarantisce l'aghjurnamenti sicuri è in corso, questu puderia esse un locu utile per l'imprese per inizià quandu si cunsidereghja una architettura d'applicazione federata.
Eccu alcuni casi d'usu induve i telecomandi spartuti distribuiti indipindentamente ponu esse adattati:
- Sistemi di disignu
- Conchiglie di l'applicazione
- Biblioteche di cumpunenti
- I consumenti
- Toolkits spartuti
- Modelli di distribuzione alternativu per i widgets utilizati da interni o esterni
Modulu di spartera multi-SPA
Riutilice e funzioni digià esportate, cum'è cumpunenti, in diverse app autonome di una sola pagina. I benefici includenu:
- I cunsumatori ricevenu aghjurnamenti automatizati
- L'expertise di u duminiu resta nantu à a squadra chì hè in carica.
- Simplifica a prucedura di implementazione perchè e versioni di moduli separati ùn sò micca necessarii.
Federazione guidata da Shell
A federazione guidata da shell include:
- Quandu crea una nova versione di produttu, a squadra di u produttu ùn aspetta micca chì a squadra di Checkout compie u so travagliu.
- Quandu cambiate i telecomandi, ùn ci hè micca una ricarica di pagina.
- Quandu hè necessariu, Shell offre una carica remota lenta è un routing (altu livellu).
- L'instradamentu attraversu i telecomandi hè pussibule via a federazione di venditori, chì permette a reutilizazione di pacchetti npm aduprati frequentemente.
- Shell offre u framework è altre dipendenze cumuni chì sò riutilizzati da i telecomandi lazy loaded.
Federazione multi-shell
Simile à a federazione guidata da cunchiglia descritta sopra, ma hà utilizatu cunchiglia differenti.
Contene:
- un numeru di cunchiglia
- Etichetta bianca
- Ùn sò micca tutti i telecomandi richiesti da Shell B o avè implementazioni indipendenti.
Funzioni principali di u Modulu Federazione
Eccellente prestazione web
U prublema cù a cumpusizioni normale di u modulu NPM hè chì quandu u numeru di dipendenti aumenta, a dimensione di l'applicazione cresce in generale.
Per evità di carricà i fascii quandu a vostra applicazione carica è solu caricali quandu hè necessariu, a Federazione di Moduli vi offre a capacità di carricà pigramente i fasci.
Questu impedisce a necessità di scaricà moduli prima ch'elli sò veramente necessarii, chì migliurà a velocità di u situ.
Sviluppu efficace
Ogni prughjettu pò esse pruduciutu è consegnatu in isolamentu è pò esse realizatu da diverse squadre perchè Module Federation vi incuraghjenu à urganizà a vostra applicazione in prughjetti discreti in modu chì pudete custruisce è implementà separatamente (è dunque in parallelu).
A capacità di auto-guaricà è redundancy
Dipendenze spartute permettenu à a Federazione di Moduli di seguità tutte e dipendenze di u vostru prugramma in un locu.
In questu modu, ancu quandu una applicazione ùn dichjarà micca una dipendenza o quandu ci sò prublemi di rete, sà sempre ciò chì hà bisognu è pò gestisce u scaricamentu cumu necessariu.
Trattamentu efficace di dipendenze cumuni
Inoltre, a Federazione di Moduli offre una gestione di a dependenza superiore, risolve in modu efficace i requisiti di u venditore è di terze parti in modu chì a vostra applicazione ùn caricherà mai più di una versione di una biblioteca.
Invece d'avè da ridistribuisce i cunsumatori, implementate codice indipendente.
U sviluppatore hè assai interessatu à avè una funziunalità sempreverde. Una volta chì a funziunalità dipendente esposta hè cambiata, ùn serà più necessariu reinstallà i cunsumatori.
Devu ammette chì questu hè una funzione assai putente in sè stessu, una chì avarà bisognu di un esame attentu per prevene risultati inespettati.
Quandu eseguite, impurtate u codice da altre build.
Quandu aduttà u mudellu di pacchettu NPM, pudemu cunsiderà l'applicazioni chì utilizanu Module Federation simili à l'API invece di sparte codice è pensendu à "biblioteca".
In u listessu modu chì ponu ancu riceve funziunalità da altre app, l'applicazioni web ponu avà furnisce a funziunalità à altre applicazioni.
Esperienza di sviluppatore rinfurzata mentre cunservà l'esperienza di u cliente
Any Sviluppatore JavaScript Serà abbastanza cunfortu cù Module Federation perchè hè un plugin Webpack chì hè accessibile da a versione Webpack 5.
Questu hè in realtà piuttostu forte è intrigante se ci pensemu.
Utilizendu i caricatori Webpack di terzu, cunzidira tutti i cumpunenti chì Webpack bundles, cumpresi scripts, assets, stili, stampi, markdowns, è più.
Utilizendu a Federazione di Moduli, tutti questi ponu esse spartuti è federati.
I micro-frontends operanu in una moda monolitica.
Hè abbastanza faciule per aghjunghje funziunalità cumuni à a vostra applicazione; basta à impurtà u fasciu cum'è normale o aduprate a carica sincrona.
In alternativa, a carica asincrona pò esse usata per carica solu dipendenze quandu hè necessariu utilizendu a carica lazy.
cunchiusioni
In questu post, avemu discututu a Federazione di Moduli cum'è una scelta fantastica per sviluppà a vostra applicazione micro-frontend.
Lasciate l'applicazioni scambià è cunsumà funziunalità in runtime incoraggia a scalabilità permettendu à diverse squadre di travaglià in applicazioni indipendenti.
Quandu a funziunalità cumuni cambia, ùn avete micca bisognu di cuncepisce è di implementà i vostri cunsumatori postu chì sustene a funziunalità perenne.
U vostru prugramma funziunarà cum'è un monolitu dopu chì hè statu stallatu, chì hè fantasticu.
Dipendenze sparte sò aduprate per riduce a dimensione di l'applicazioni. Siccomu parechji sviluppatori sò digià familiarizati cù l'ambiente Webpack, l'esperienza di sviluppatore hè eccellente.
Lascia un Audiolibro