Inhoudsopgave[Zich verstoppen][Laten zien]
- Dus, wat is een modulefederatie?
- Waarom modulefederatie?
- Kerncomponenten van modulefederatie
Kernfuncties van modulefederatie+-
- Uitstekende webprestaties
- Effectieve ontwikkeling
- Het vermogen tot zelfgenezing en redundantie
- Effectieve afhandeling van veelvoorkomende afhankelijkheden
- In plaats van consumenten opnieuw te moeten implementeren, implementeert u onafhankelijke code.
- Importeer tijdens het uitvoeren code uit andere builds.
- Verbeterde ontwikkelaarservaring met behoud van klantervaring
- Micro-frontends werken op een monolithische manier.
- Conclusie
Het concept van micro-frontends past microservices toe op frontend-ontwikkeling.
Het idee is om de applicatie of website op te splitsen in kleinere, onafhankelijk ontwikkelde stukken die vervolgens tijdens runtime met elkaar worden verbonden, in plaats van ze als een enkele, samenhangende monoliet te creëren.
De methode stelt u in staat om andere componenten van de applicatie te creëren met behulp van andere technologieën en met onafhankelijke teams.
Het idee is om de onderhoudskosten van een typische monoliet te verminderen door ontwikkeling op deze manier te segmenteren.
Door hen als een samenhangend team te laten concentreren op een bepaald gebied van een applicatie, maakt het ook nieuwe vormen van samenwerking tussen backend en frontend devs mogelijk.
U hebt bijvoorbeeld een team dat alleen verantwoordelijk is voor de zoekmogelijkheden of een ander aspect van een belangrijk product dat cruciaal is voor een bedrijf.
Dankzij de modulefederatie beschikt u over voldoende functionaliteit om de workflow aan te kunnen die de micro-frontend mandaten benaderen.
Dit bericht gaat dieper in op de architectuur van de modulefederatie, evenals de belangrijkste kenmerken en toepassingspatronen.
Dus, wat is een module federatie?
Het modulefederatie-ontwerp van Javascript maakt in veel toepassingen gebruik van hergebruikte onderdelen.
Het is vrij eenvoudig jargon, maar ik heb het gewoon zo laten lijken dat het luchtig lijkt.
Omdat we allemaal bekend zijn met het delen van componenten binnen een React-applicatie, bereikt Module Federation in feite hetzelfde doel in de praktijk, behalve dat het applicatiemodules dynamisch blootstelt voor gebruik door andere applicaties.
Module Federation probeert het probleem van het delen van modules in een gedistribueerd systeem op te lossen door die belangrijke gedeelde elementen naar wens als macro of micro te leveren.
Dit wordt bereikt door ze uit uw apps en de build-workflow te laten verwijderen.
Waarom modulefederatie?
Hier zijn enkele factoren die modulefederatie gemakkelijk aankan:
- Externen en DLL's (Dynamic Link Libraries) waren alles wat we af en toe hadden voor het delen van functionaliteit tussen apps. Dit alles maakte het delen van schalingscodes uiterst uitdagend.
- NPM is traag.
- Wanneer twee afzonderlijke programma's cruciale code delen, moeten ze dynamisch en flexibel zijn.
Om stand-alone apps volledig in hun eigen repository te kunnen plaatsen, afzonderlijk te kunnen implementeren en als hun eigen onafhankelijke SPA te kunnen werken, is Module Federation gecreëerd.
Kerncomponenten van modulefederatie
Alvorens dieper te duiken, is het belangrijk om kort enkele nieuwe concepten te bespreken die modulefederatie met zich meebrengt.
- Host: wanneer een pagina wordt geladen, wordt de aanvankelijk geïnitialiseerde build of module een host genoemd. Een provider kan worden gezien als een host.
- Remote: Een remote is een andere constructie die een deel van de host gebruikt. Ze worden ook wel klanten genoemd.
- Bidirectionele host: een webpack-build die functioneert als zowel een afstandsbediening die andere hosts gebruiken als een host die afstandsbedieningen gebruikt.
- Leveranciersfederatie: maakt declaratief gedeelde runtime-sharing mogelijk van npm-moduleafhankelijkheden voor een host of remote, ongeacht de locatie van waaruit ze zijn geladen. Een van de grootste prestatieproblemen met micro-frontends wordt op deze manier opgelost.
Patronen van federatieve toepassing
Altijdgroen ontwerpsysteem
Een van de meest elementaire vormen van federatieve applicaties is een 'evergreen remote', een gedeelde afstandsbediening zoals een 'Design System' of 'Component library' die onafhankelijk wordt gedistribueerd en bijgewerkt voor alle gebruikers.
Zonder dat elk app-team tijd hoeft te besteden aan revisies, kan dit nuttig zijn om ervoor te zorgen dat alle online sites voldoen aan de meest recente bedrijfsidentiteit.
Om de limieten en procedures te ontwerpen en in te voeren die nodig zijn om veilige, doorlopende updates te garanderen, kan dit een nuttige plek zijn voor bedrijven om te beginnen bij het overwegen van een federatieve applicatiearchitectuur.
Hieronder volgen enkele use-cases waarbij onafhankelijk geïmplementeerde gedeelde afstandsbedieningen geschikt kunnen zijn:
- Ontwerp systemen
- Applicatieshells
- Componentenbibliotheken
- Consumenten
- Gedeelde toolkits
- Alternatieve distributiemodellen voor widgets die worden gebruikt door interne of externe
Module delen voor meerdere SPA's
Hergebruik reeds geëxporteerde functies, zoals componenten, in verschillende zelfstandige apps met één pagina. Voordelen zijn onder meer:
- Consumenten ontvangen geautomatiseerde updates
- Domeinexpertise blijft in het team dat er verantwoordelijk voor is.
- Stroomlijnt de implementatieprocedure omdat afzonderlijke modulereleases niet nodig zijn.
Shell gedreven federatie
De shell-gedreven federatie omvat:
- Bij het maken van een nieuwe productversie wacht het Productteam niet tot het Checkout-team hun taak heeft voltooid.
- Bij het wisselen van afstandsbedieningen hoeft de pagina niet opnieuw te worden geladen.
- Waar nodig biedt Shell langzaam laden op afstand en routering op het hoogste niveau.
- Routing over remotes wordt mogelijk gemaakt via vendor federation, die het hergebruik van veelgebruikte npm-pakketten mogelijk maakt.
- Shell biedt het raamwerk en andere veelvoorkomende afhankelijkheden die worden hergebruikt door de luie geladen afstandsbedieningen.
Multi-shell federatie
Vergelijkbaar met de hierboven beschreven shell-gedreven federatie, maar gebruikt verschillende shells.
Het bevat:
- een aantal schelpen
- White-labeling
- Niet alle afstandsbedieningen zijn vereist door Shell B of hebben onafhankelijke implementaties.
Kernfuncties van modulefederatie
Uitstekende webprestaties
Het probleem met de normale samenstelling van de NPM-module is dat naarmate het aantal afhankelijken toeneemt, de omvang van de applicatie over het algemeen groter wordt.
Om te voorkomen dat u bundels laadt wanneer uw applicatie laadt en ze alleen laadt wanneer dat nodig is, biedt Module Federation u de mogelijkheid om lui bundels te laden.
Dit voorkomt de noodzaak om modules te downloaden voordat ze daadwerkelijk nodig zijn, wat de sitesnelheid verbetert.
Effectieve ontwikkeling
Elk project kan afzonderlijk worden geproduceerd en opgeleverd en kan door verschillende teams worden uitgevoerd, omdat Module Federation u aanmoedigt om uw applicatie in afzonderlijke projecten te organiseren, zodat u ze afzonderlijk (en dus parallel) kunt bouwen en implementeren.
Het vermogen tot zelfgenezing en redundantie
Gedeelde afhankelijkheden stellen Module Federation in staat om alle afhankelijkheden van uw programma op één plek bij te houden.
Op deze manier weet een applicatie, zelfs als er geen afhankelijkheid is of als er netwerkproblemen zijn, nog steeds wat het nodig heeft en kan het indien nodig downloaden.
Effectieve afhandeling van veelvoorkomende afhankelijkheden
Bovendien biedt Module Federation superieur afhankelijkheidsbeheer, waarmee effectief de vereisten van leveranciers en derden worden opgelost, zodat uw toepassing nooit meer dan één versie van een bibliotheek zal laden.
In plaats van consumenten opnieuw te moeten implementeren, implementeert u onafhankelijke code.
De ontwikkelaar is zeer geïnteresseerd in groenblijvende functionaliteit. Zodra de blootgestelde afhankelijke functionaliteit is gewijzigd, is het niet meer nodig om de verbruikers opnieuw te installeren.
Ik moet toegeven dat dit op zichzelf een zeer krachtige eigenschap is, die zorgvuldig moet worden onderzocht om onverwachte resultaten te voorkomen.
Importeer tijdens het uitvoeren code uit andere builds.
Wanneer we het NPM-pakketmodel overnemen, kunnen we apps die Module Federation gebruiken vergelijkbaar met API's beschouwen in plaats van code te delen en te denken aan 'bibliotheek'.
Op dezelfde manier dat ze ook functionaliteit van andere apps kunnen ontvangen, kunnen webapplicaties nu de functionaliteit aan andere applicaties leveren.
Verbeterde ontwikkelaarservaring met behoud van klantervaring
Elke JavaScript-ontwikkelaar zal redelijk comfortabel zijn met Module Federation omdat het een Webpack-plug-in is die toegankelijk is vanaf Webpack-versie 5.
Dit is eigenlijk nogal sterk en intrigerend als we er even over nadenken.
Houd bij het gebruik van Webpack-laders van derden rekening met alle componenten die: webpack bundels, inclusief scripts, middelen, stijlen, afbeeldingen, prijsverlagingen en meer.
Door Module Federation te gebruiken, kunnen deze allemaal worden gedeeld en gefedereerd.
Micro-frontends werken op een monolithische manier.
Het is vrij eenvoudig om gedeelde functionaliteit aan uw applicatie toe te voegen; importeer de bundel gewoon zoals normaal of gebruik synchroon laden.
Als alternatief kan asynchroon laden worden gebruikt om alleen afhankelijkheden te laden wanneer dat nodig is door gebruik te maken van lui laden.
Conclusie
In dit bericht hebben we Module Federation besproken als een fantastische keuze voor het ontwikkelen van uw micro-frontend-applicatie.
Door apps tijdens runtime functionaliteit te laten uitwisselen en gebruiken, wordt de schaalbaarheid gestimuleerd door verschillende teams in staat te stellen aan onafhankelijke applicaties te werken.
Wanneer de algemene functionaliteit verandert, hoeft u uw consumenten niet te ontwerpen en te implementeren, omdat het evergreen-functionaliteit ondersteunt.
Je programma zal als een monoliet functioneren nadat het is opgezet, wat fantastisch is.
Deelbare afhankelijkheden worden gebruikt om de grootte van apps te verkleinen. Omdat veel ontwikkelaars al bekend zijn met de Webpack-omgeving, is de ontwikkelaarservaring uitstekend.
Laat een reactie achter