Kennismaken met Module Federation
Begrijp het basisidee achter Module Federation en hoe hiermee modules dynamisch beschikbaar kunnen worden gesteld en gebruikt door applicaties.
Kennismaken met Module Federation is een gratis Architectuur van micro-frontends met Module Federation-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Architectuur van micro-frontends met Module Federation. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.
Wat is Module Federation?
Welkom! In deze les duiken we in Module Federation, een krachtige functie van Webpack die essentieel is voor het bouwen van moderne Micro Frontends.
Hiermee kunnen verschillende JavaScript-applicaties tijdens uitvoering dynamisch code met elkaar delen en code van elkaar gebruiken.
Het monolietprobleem
Traditioneel worden grote webapplicaties gebouwd als één enorme codebase — een monoliet. Dat kan leiden tot:
- trage ontwikkelcycli
- moeilijkheden bij het opschalen van teams
- sterke koppeling tussen onderdelen
Module Federation helpt deze uitdagingen te overwinnen door een meer modulaire aanpak mogelijk te maken.
Dynamisch code delen
Het kernidee van Module Federation is dynamisch code delen. In plaats van alle code tijdens het bouwen samen te bundelen, kunnen applicaties tijdens uitvoering stukjes code uit andere applicaties laden.
Je kunt het zien alsof een app zegt: "Ik heb deze component nodig en ik weet waar ik die uit een andere actieve app kan halen!"
Belangrijke spelers: host en remote
In een Module Federation-opstelling hebben we twee hoofdtypen applicaties:
- Remote Application: deze app stelt zijn code (componenten, functies) beschikbaar voor anderen.
- Host Application: deze app gebruikt de code die door een remote applicatie beschikbaar is gesteld.
Een app kan tegelijkertijd zowel een host als een remote zijn!
Modules beschikbaar stellen: remote apps
Een remote applicatie gebruikt Webpacks ModuleFederationPlugin om aan te geven welke delen van de code beschikbaar worden gesteld. Deze blootgestelde modules worden beschikbaar voor gebruik door andere applicaties.
Hier zie je een vereenvoudigd voorbeeld van hoe een remote app een Button-component beschikbaar kan stellen:
/* webpack.config.js (Remote App) */
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ... other webpack config
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/Button.js',
},
}),
],
};Modules gebruiken: host-apps
Een hostapplicatie gebruikt ook de ModuleFederationPlugin om aan te geven van welke remote applicaties deze modules wil gebruiken. De hostapplicatie geeft een URL op waar het entrybestand van de remote (bijvoorbeeld remoteEntry.js) te vinden is.
Zo kan een host-app aangeven dat deze remoteApp wil gebruiken:
/* webpack.config.js (Host App) */
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ... other webpack config
plugins: [
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@http://localhost:8081/remoteEntry.js',
},
}),
],
};Hoe het werkt: het entrybestand
Wanneer een hostapplicatie start, wordt niet meteen alle remote code geladen. Eerst wordt een klein bestand van de remote geladen met de naam remoteEntry.js.
Dit bestand fungeert als een manifest. Het vertelt de host welke modules de remote beschikbaar stelt en hoe deze indien nodig dynamisch kunnen worden geladen. Code wordt alleen opgehaald wanneer die wordt opgevraagd!
De kracht van onafhankelijke implementaties
Een van de grootste voordelen van Module Federation is dat onafhankelijke implementaties mogelijk worden.
Teams kunnen hun micro-frontends afzonderlijk ontwikkelen, testen en implementeren, zonder voor de hele applicatie een grote, gesynchroniseerde release te hoeven coördineren. Dit versnelt de oplevering en verkleint het risico.
Meer delen dan alleen UI
Module Federation is niet alleen bedoeld voor het delen van UI-componenten. Je kunt verschillende soorten code beschikbaar stellen en gebruiken:
- Hulpfuncties
- Dataservices
- React-hooks of vergelijkbare logica
- Gedeelde stijlen of thema's
Zo kun je code in je gefedereerde applicaties op een robuuste manier hergebruiken.
Test je kennis
Module Federation introduceert nieuwe manieren waarop applicaties met elkaar kunnen communiceren. Welke van de volgende uitspraken beschrijven de belangrijkste concepten correct?
Samenvatting van Module Federation
Goed gedaan! Je begrijpt nu het basisidee van Module Federation.
- Het is een Webpack-functie voor het dynamisch delen van code.
- Apps kunnen hosts (gebruikers) of remotes (aanbieders) zijn.
- Het maakt onafhankelijke implementaties en efficiënt hergebruik van code mogelijk.
Hierna bekijken we uitgebreider hoe host- en remoteapplicaties worden ingesteld!
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Kennismaken met Module Federation” gratis?
Ja — de volledige tekst van “Kennismaken met Module Federation” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Architectuur van micro-frontends met Module Federation wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.
Wat leer ik in “Kennismaken met Module Federation”?
Begrijp het basisidee achter Module Federation en hoe hiermee modules dynamisch beschikbaar kunnen worden gesteld en gebruikt door applicaties. Je oefent met Architectuur van micro-frontends met Module Federation door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Architectuur van micro-frontends met Module Federation te beginnen?
Ervaring vooraf is niet nodig. Architectuur van micro-frontends met Module Federation op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Kennismaken met Module Federation”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Architectuur van micro-frontends met Module Federation?
Ja. Elke les over Architectuur van micro-frontends met Module Federation bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Herhaling van de basisprincipes van Webpack
- Kennismaken met Module Federation
- Host- en remoteapplicaties
- Gedeelde dependencies configureren