Taula de continguts[Amaga][Espectacle]
- Aleshores, què és una federació de mòduls?
- Per què federació de mòduls?
- Components bàsics de la federació de mòduls
Funcions bàsiques de la Federació del mòdul+-
- Excel·lent rendiment web
- Desenvolupament efectiu
- La capacitat d'autocurar-se i la redundància
- Tractament eficaç de les dependències comunes
- En lloc d'haver de tornar a desplegar els consumidors, implementeu codi independent.
- Quan s'executa, importeu codi d'altres compilacions.
- Millora l'experiència del desenvolupador tot preservant l'experiència del client
- Els micro-frontend funcionen de manera monolítica.
- Conclusió
El concepte de micro frontends aplica microserveis al desenvolupament del frontend.
La idea és dividir l'aplicació o el lloc web en peces més petites i desenvolupades de manera independent que després es connecten durant el temps d'execució, en lloc de crear-les com un monòlit únic i cohesionat.
El mètode us permet crear altres components de l'aplicació mitjançant altres tecnologies i amb equips independents.
La idea és reduir les despeses de manteniment relacionades amb un monòlit típic segmentant el desenvolupament d’aquesta manera.
En permetre'ls concentrar-se en una àrea concreta d'una aplicació com un equip coherent, també fa possibles noves formes de cooperació entre els desenvolupadors de backend i frontend.
Per exemple, és possible que tingueu un equip que sigui l'únic responsable de la capacitat de cerca o d'un altre aspecte d'un producte clau que sigui crucial per a una empresa.
Gràcies a la federació de mòduls, teniu prou funcionalitat per gestionar el flux de treball que el micro frontend mandats d'aproximació.
Aquesta publicació farà una ullada a fons a l'arquitectura de la federació de mòduls, així com a les seves principals característiques i patrons d'aplicació.
Llavors, què és un federació de mòduls?
El disseny de federació de mòduls de Javascript fa ús de peces reutilitzades en moltes aplicacions.
És un argot força bàsic, però simplement he fet que sembli d'aquesta manera per semblar ventós.
Com que tots estem familiaritzats amb compartir components dins d'una aplicació React, Module Federation aconsegueix el mateix objectiu a la pràctica, amb l'excepció que exposa dinàmicament els mòduls d'aplicacions per al consum d'altres aplicacions.
Module Federation pretén superar el problema de compartir mòduls en un sistema distribuït proporcionant aquests elements clau compartits com a macro o micro com es desitgi.
Això s'aconsegueix eliminant-los de les vostres aplicacions i del flux de treball de creació.
Per què federació de mòduls?
Aquests són alguns factors que la federació de mòduls pot gestionar fàcilment:
- Externals i DLL (Dynamic Link Libraries) eren tot el que de tant en tant teníem per compartir funcionalitats entre aplicacions. Tot això va fer que l'escala compartida de codi fos extremadament difícil.
- NPM és lent.
- Quan dos programes separats comparteixen codi crucial, han de ser dinàmics i flexibles.
Per tal que les aplicacions autònomes estiguin totalment al seu propi dipòsit, es despleguin per separat i funcionin com a SPA independent, es va crear Module Federation.
Components bàsics de la federació de mòduls
Abans d'aprofundir, és important discutir breument alguns conceptes nous que aporta la federació de mòduls.
- Amfitrió: quan es carrega una pàgina, la compilació o mòdul inicialitzat s'anomena amfitrió. Es pot considerar un proveïdor com un amfitrió.
- Remot: un remot és una construcció diferent que utilitza una part de l'amfitrió. També s'anomenen clients.
- Amfitrió bidireccional: una compilació Webpack que funciona com a comandament remot que consumeixen altres amfitrions i com a host que consumeix comandaments remots.
- Federació de proveïdors: permet compartir de manera declarativa el temps d'execució compartit de dependències del mòdul npm per a un host o remot, independentment de la ubicació des d'on es carreguin. D'aquesta manera es resol un dels principals problemes de rendiment amb micro frontends.
Patrons d'aplicació federada
Sistema de disseny perenne
Una de les formes més bàsiques d'aplicacions federades és un "remot perenne", que és un comandament compartit com un "Sistema de disseny" o "Biblioteca de components" que es distribueix i s'actualitza de manera independent per a tots els usuaris.
Sense que cada equip d’aplicacions necessiti dedicar temps a revisions, això pot ser útil per assegurar que tots els llocs en línia s’adhereixin a la identitat corporativa més recent.
Per tal de dissenyar i posar en marxa els límits i procediments necessaris per garantir actualitzacions segures i contínues, aquest podria ser un lloc útil per començar a les empreses quan considerin una arquitectura d'aplicacions federades.
A continuació es mostren alguns casos d'ús en què els comandaments a distància compartits desplegats de manera independent poden ser adequats:
- Sistemes de disseny
- Petxines d'aplicació
- Biblioteques de components
- Els consumidors
- Kits d'eines compartits
- Models de distribució alternatius per a widgets utilitzats per interns o externs
Compartició de mòduls multi-SPA
Reutilitza les funcions ja exportades, com ara components, en diferents aplicacions autònomes d'una sola pàgina. Els beneficis inclouen:
- Els consumidors reben actualitzacions automatitzades
- L'experiència del domini continua a l'equip que s'encarrega.
- Agilitza el procediment de desplegament perquè no calen versions de mòduls independents.
Federació impulsada per les closques
La federació impulsada per shell inclou:
- Quan es crea una versió de producte nova, l'equip del producte no espera que l'equip de Checkout completi la seva feina.
- Quan canvieu de comandament a distància, no hi ha cap recàrrega de pàgina.
- Quan cal, Shell ofereix una càrrega remota lenta i un encaminament (nivell superior).
- L'encaminament entre comandaments a distància es fa possible mitjançant la federació de proveïdors, que permet la reutilització dels paquets npm utilitzats amb freqüència.
- Shell ofereix el marc i altres dependències comunes que són reutilitzades pels comandaments remots carregats perdents.
Federació multishell
Similar a la federació guiada per shell descrita anteriorment, però utilitzava shells diferents.
Conté:
- una sèrie de petxines
- Etiquetat blanc
- Shell B no requereix tots els comandaments a distància ni tenen implementacions independents.
Funcions bàsiques de la Federació del mòdul
Excel·lent rendiment web
El problema amb la composició normal del mòdul NPM és que a mesura que augmenta el nombre de dependents, la mida de l'aplicació generalment creix.
Per evitar carregar paquets quan es carregui l'aplicació i només carregar-los quan sigui necessari, Module Federation us ofereix la possibilitat de carregar paquets de manera mandrosa.
Això evita la necessitat de descarregar mòduls abans que siguin realment necessaris, cosa que millora la velocitat del lloc.
Desenvolupament efectiu
Cada projecte es pot produir i lliurar de manera aïllada i pot ser dut a terme per diversos equips perquè Module Federation us anima a organitzar la vostra aplicació en projectes discrets perquè pugueu crear-los i desplegar-los per separat (i, per tant, en paral·lel).
La capacitat d'autocurar-se i la redundància
Les dependències compartides permeten a Module Federation fer un seguiment de totes les dependències del vostre programa en un sol lloc.
D'aquesta manera, fins i tot quan una aplicació no declara cap dependència o quan hi ha problemes de xarxa, encara sap què necessita i pot gestionar la descàrrega segons sigui necessari.
Tractament eficaç de les dependències comunes
A més, Module Federation ofereix una gestió de dependències superior, resolent amb eficàcia els requisits de proveïdors i de tercers, de manera que la vostra aplicació mai carregarà més d'una versió d'una biblioteca.
En lloc d'haver de tornar a desplegar els consumidors, implementeu codi independent.
El desenvolupador està molt interessat en tenir una funcionalitat perenne. Un cop hagi canviat la funcionalitat dependent exposada, ja no serà necessari reinstal·lar els consumidors.
He d'admetre que aquesta és una característica molt potent en si mateixa, que necessitarà un examen acurat per evitar resultats inesperats.
Quan s'executa, importeu codi d'altres compilacions.
Quan adoptem el model de paquet NPM, podríem considerar les aplicacions que utilitzen Module Federation semblants a les API en lloc de compartir codi i pensar en "biblioteca".
De la mateixa manera que també poden rebre funcionalitats d'altres aplicacions, les aplicacions web ara poden proporcionar la funcionalitat a altres aplicacions.
Millora l'experiència del desenvolupador tot preservant l'experiència del client
Qualsevol Desenvolupador de JavaScript serà molt còmode amb Module Federation perquè és un connector Webpack accessible a partir de la versió 5 de Webpack.
Això és realment força fort i intrigant si hi pensem una mica.
Utilitzant carregadors de tercers webpack, considereu tots els components que Webpack paquets, inclosos els scripts, els recursos, els estils, les imatges, les rebaixes i molt més.
Mitjançant l'ús de la Federació de mòduls, tots es poden compartir i federar.
Els micro-frontend funcionen de manera monolítica.
És bastant fàcil afegir funcionalitats compartides a la vostra aplicació; només cal importar el paquet de manera normal o utilitzar la càrrega síncrona.
Alternativament, la càrrega asíncrona es pot utilitzar per carregar només dependències quan sigui necessari mitjançant la càrrega mandrosa.
Conclusió
En aquesta publicació, hem parlat de Module Federation com una opció fantàstica per desenvolupar la vostra aplicació micro-frontend.
Permetre que les aplicacions intercanviïn i consumeixin funcionalitats en temps d'execució fomenta l'escalabilitat, ja que permet que diversos equips treballin en aplicacions independents.
Quan canviï la funcionalitat comuna, no haureu de dissenyar i desplegar els vostres consumidors, ja que admet la funcionalitat perenne.
El vostre programa funcionarà com un monòlit després d'haver-lo configurat, la qual cosa és fantàstic.
Les dependències compartibles s'utilitzen per reduir la mida de les aplicacions. Com que molts desenvolupadors ja estan familiaritzats amb l'entorn Webpack, l'experiència del desenvolupador és excel·lent.
Deixa un comentari