Sommario[Nascondere][Spettacolo]
- Allora, cos'è una federazione di moduli?
- Perché la federazione dei moduli?
- Componenti principali della federazione dei moduli
Funzionalità principali della federazione del modulo+-
- Eccellenti prestazioni web
- Sviluppo efficace
- La capacità di autoguarigione e ridondanza
- Gestione efficace delle dipendenze comuni
- Invece di dover ridistribuire i consumer, distribuisci codice indipendente.
- Durante l'esecuzione, importa il codice da altre build.
- Esperienza dello sviluppatore migliorata preservando l'esperienza del cliente
- I micro-frontend operano in modo monolitico.
- Conclusione
Il concetto di micro frontend applica i microservizi allo sviluppo del frontend.
L'idea è di suddividere l'applicazione o il sito Web in parti più piccole sviluppate in modo indipendente che vengono quindi collegate durante il runtime, invece di crearle come un unico monolite coeso.
Il metodo consente di creare altri componenti dell'applicazione utilizzando altre tecnologie e con team indipendenti.
L'idea è di ridurre le spese di manutenzione relative a un tipico monolite segmentando lo sviluppo in questo modo.
Consentendo loro di concentrarsi su una particolare area di un'applicazione come un team coerente, rende anche possibili nuove forme di cooperazione tra sviluppatori di back-end e front-end.
Ad esempio, potresti avere un team che è l'unico responsabile della capacità di ricerca o di un altro aspetto di un prodotto chiave che è cruciale per un'azienda.
Grazie alla federazione dei moduli, hai funzionalità sufficienti per gestire il flusso di lavoro che il micro front-end mandati di approccio.
Questo post analizzerà in modo approfondito l'architettura della federazione dei moduli, nonché le sue caratteristiche principali e i modelli applicativi.
Quindi, cos'è un file federazione dei moduli?
Il design della federazione dei moduli di Javascript fa uso di parti riutilizzate in molte applicazioni.
È un gergo abbastanza semplice, ma l'ho semplicemente fatto sembrare così disinvolto.
Poiché abbiamo tutti familiarità con la condivisione di componenti all'interno di un'applicazione React, Module Federation raggiunge in pratica lo stesso obiettivo, con l'eccezione che espone dinamicamente i moduli dell'applicazione per il consumo da parte di altre applicazioni.
Module Federation cerca di superare il problema della condivisione dei moduli in un sistema distribuito fornendo quegli elementi chiave condivisi come macro o micro come desiderato.
Ciò si ottiene rimuovendoli dalle app e dal flusso di lavoro di compilazione.
Perché la federazione dei moduli?
Ecco alcuni fattori che la federazione dei moduli può gestire facilmente:
- Esterni e DLL (Dynamic Link Libraries) erano tutto ciò che occasionalmente avevamo per condividere funzionalità tra app. Tutto ciò ha reso estremamente impegnativo il ridimensionamento della condivisione del codice.
- NPM è lento.
- Quando due programmi separati condividono un codice cruciale, devono essere dinamici e flessibili.
Affinché le app standalone si trovino totalmente nel proprio repository, siano distribuite separatamente e operino come SPA indipendente, è stata creata Module Federation.
Componenti principali della federazione dei moduli
Prima di approfondire, è importante discutere brevemente alcuni nuovi concetti offerti dalla federazione dei moduli.
- Host: quando viene caricata una pagina, la build o il modulo inizializzato inizialmente viene chiamato host. Un provider può essere considerato un host.
- Remoto: un telecomando è un costrutto diverso che utilizza una parte dell'host. Sono anche indicati come clienti.
- Host bidirezionale: una build Webpack che funziona sia come un telecomando utilizzato da altri host sia come un host che utilizza i telecomandi.
- Federazione dei fornitori: consente la condivisione del runtime condivisa in modo dichiarativo delle dipendenze del modulo npm per un host o un remoto, indipendentemente dalla posizione da cui vengono caricati. Uno dei maggiori problemi di prestazioni con i micro frontend viene risolto in questo modo.
Modelli di applicazione federata
Sistema di design sempreverde
Una delle forme più basilari di applicazioni federate è un "telecomando sempreverde", che è un telecomando condiviso come un "Sistema di progettazione" o una "libreria di componenti" che viene distribuito e aggiornato in modo indipendente per tutti gli utenti.
Senza che ogni team dell'app debba dedicare tempo alle revisioni, ciò potrebbe essere utile per garantire che tutti i siti online aderiscano all'identità aziendale più recente.
Al fine di progettare e mettere in atto i limiti e le procedure necessarie per garantire aggiornamenti continui e sicuri, questo potrebbe essere un punto di partenza utile per le aziende quando si considera un'architettura applicativa federata.
Di seguito sono riportati alcuni casi d'uso in cui i telecomandi condivisi distribuiti in modo indipendente potrebbero essere adatti:
- Sistemi di progettazione
- Gusci dell'applicazione
- Librerie componenti
- Consumatori
- Toolkit condivisi
- Modelli di distribuzione alternativi per i widget utilizzati da interni o esterni
Condivisione di moduli multi-SPA
Riutilizza le funzionalità già esportate, come i componenti, in diverse app autonome a pagina singola. I vantaggi includono:
- I consumatori ricevono aggiornamenti automatici
- L'esperienza nel settore rimane nel team che ne è responsabile.
- Semplifica la procedura di distribuzione perché non sono necessarie versioni separate dei moduli.
Federazione guidata dalla shell
La federazione basata su shell include:
- Quando si crea una nuova versione del prodotto, il team del prodotto non attende che il team di Checkout completi il proprio lavoro.
- Quando si cambiano i telecomandi, non c'è il ricaricamento della pagina.
- Quando necessario, Shell offre un caricamento remoto lento e un routing (di livello superiore).
- Il routing tra dispositivi remoti è reso possibile tramite la federazione dei fornitori, che consente il riutilizzo dei pacchetti npm utilizzati di frequente.
- Shell offre il framework e altre dipendenze comuni che vengono riutilizzate dai telecomandi a caricamento lento.
Federazione multishell
Simile alla federazione basata su shell descritta sopra, ma utilizzava shell diverse.
Contiene:
- un certo numero di conchiglie
- Etichettatura bianca
- Non tutti i telecomandi sono richiesti dalla Shell B o hanno implementazioni indipendenti.
Funzionalità principali della federazione del modulo
Eccellenti prestazioni web
Il problema con la normale composizione del modulo NPM è che all'aumentare del numero di dipendenti, le dimensioni dell'applicazione generalmente crescono.
Per evitare di caricare i bundle durante il caricamento dell'applicazione e caricarli solo quando necessario, Module Federation offre la possibilità di caricare i bundle in modo pigro.
Ciò evita la necessità di scaricare i moduli prima che siano effettivamente necessari, il che migliora la velocità del sito.
Sviluppo efficace
Ogni progetto può essere prodotto e consegnato isolatamente e può essere eseguito da vari team perché Module Federation ti incoraggia a organizzare la tua applicazione in progetti distinti in modo da poterli costruire e distribuire separatamente (e quindi in parallelo).
La capacità di autoguarigione e ridondanza
Le dipendenze condivise consentono a Module Federation di tenere traccia di tutte le dipendenze del programma in un'unica posizione.
In questo modo, anche quando un'applicazione non dichiara una dipendenza o quando ci sono problemi di rete, sa comunque di cosa ha bisogno e può gestire il download secondo necessità.
Gestione efficace delle dipendenze comuni
Inoltre, Module Federation offre una gestione delle dipendenze superiore, risolvendo efficacemente i requisiti di fornitori e terze parti in modo che l'applicazione non carichi mai più di una versione di una libreria.
Invece di dover ridistribuire i consumer, distribuisci codice indipendente.
Lo sviluppatore è molto interessato ad avere funzionalità sempreverdi. Una volta che la funzionalità dipendente esposta è cambiata, non sarà più necessario reinstallare i consumer.
Devo ammettere che questa è una caratteristica molto potente in sé e per sé, che richiederà un attento esame per prevenire esiti imprevisti.
Durante l'esecuzione, importa il codice da altre build.
Quando adottiamo il modello di pacchetto NPM, potremmo considerare le app che usano la federazione dei moduli simili alle API piuttosto che condividere il codice e pensare alla "libreria".
Allo stesso modo in cui possono anche ricevere funzionalità da altre app, le applicazioni Web possono ora fornire la funzionalità ad altre applicazioni.
Esperienza dello sviluppatore migliorata preservando l'esperienza del cliente
Qualsiasi Sviluppatore JavaScript sarà abbastanza comodo con Module Federation perché è un plug-in Webpack accessibile a partire dalla versione 5 di Webpack.
Questo è in realtà piuttosto forte e intrigante se ci riflettiamo un po'.
Utilizzando caricatori Webpack di terze parti, considera tutti i componenti che Webpack bundle, inclusi script, risorse, stili, immagini, riduzioni e altro ancora.
Utilizzando Module Federation, tutti questi possono essere condivisi e federati.
I micro-frontend operano in modo monolitico.
È abbastanza facile aggiungere funzionalità condivise alla tua applicazione; importa semplicemente il pacchetto normalmente o usa il caricamento sincrono.
In alternativa, il caricamento asincrono può essere utilizzato per caricare le dipendenze solo quando necessario utilizzando il caricamento lento.
Conclusione
In questo post, abbiamo discusso di Module Federation come una scelta fantastica per lo sviluppo della tua applicazione micro-frontend.
Consentire alle app di scambiarsi e utilizzare funzionalità in fase di esecuzione incoraggia la scalabilità consentendo a vari team di lavorare su applicazioni indipendenti.
Quando la funzionalità comune cambia, non sarà necessario progettare e distribuire i tuoi consumatori poiché supporta la funzionalità sempreverde.
Il tuo programma funzionerà come un monolito dopo che è stato impostato, il che è fantastico.
Le dipendenze condivisibili vengono utilizzate per ridurre le dimensioni delle app. Poiché molti sviluppatori hanno già familiarità con l'ambiente Webpack, l'esperienza degli sviluppatori è eccellente.
Lascia un Commento