Host- en remoteapplicaties
Leer het verschil tussen host- en remoteapplicaties in een gefedereerde opzet en begrijp hun rollen.
Host- en remoteapplicaties is een gratis Architectuur van micro-frontends met Module Federation-les op CoddyKit. Dit is les 3 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 zijn hosts en remotes?
In Module Federation hebben applicaties verschillende rollen: sommige zijn hosts en andere zijn remotes. Zie het als een hoofdpodium (host) dat gastartiesten (remotes) uitnodigt om hun optreden te delen.
Dankzij deze opzet kunnen grote applicaties worden opgesplitst in kleinere onderdelen die onafhankelijk worden ontwikkeld en geïmplementeerd.
De host: je hoofdapp
De hostapplicatie is de primaire applicatie die als eerste wordt gestart. Het belangrijkste doel ervan is modules gebruiken (of laden) die door andere applicaties, de remotes, beschikbaar zijn gesteld.
Je kunt dit zien als de hoofdwebsite die verschillende widgets of onderdelen uit andere services ophaalt.
Belangrijkste verantwoordelijkheden van de host
De hostapplicatie heeft enkele belangrijke verantwoordelijkheden:
- Remotes laden: De host vertelt Webpack welke remote applicaties moeten worden geladen.
- Context bieden: De host biedt vaak de algemene applicatieschil, routering en gedeelde afhankelijkheden.
- Modules integreren: De host rendert componenten of gebruikt functies die door remote applicaties worden aangeboden.
De remote: een gedeeld onderdeel
Een remoteapplicatie is een afzonderlijke, zelfstandige applicatie die specifieke delen van de code beschikbaar stelt voor gebruik door anderen. De remote kan ook modules van andere remotes gebruiken (of zelfs zelf als host optreden!).
Deze beschikbare onderdelen kunnen componenten, hulpfuncties of zelfs volledige pagina's zijn.
Belangrijkste verantwoordelijkheden van de remote
De remoteapplicatie richt zich op:
- Functies ontwikkelen: De remote bouwt specifieke functies of UI-componenten onafhankelijk.
- Modules beschikbaar stellen: De remote definieert expliciet welke delen van de codebasis kunnen worden gedeeld met hostapplicaties.
- Onafhankelijk implementeren: De remote kan worden gebouwd en geïmplementeerd zonder de host of andere remotes te beïnvloeden, zolang de beschikbare interfaces consistent blijven.
ModuleFederationPlugin: de verbinding
Webpacks ModuleFederationPlugin vormt de basis van deze interactie. Zowel host- als remoteapplicaties gebruiken deze plugin in hun Webpack-configuratie.
De plugin coördineert hoe modules door remotes beschikbaar worden gesteld en door hosts worden gebruikt, zodat ze tijdens runtime beschikbaar zijn.
Remote: modules beschikbaar stellen
Aan de remote-kant gebruik je de eigenschap exposes in de configuratie van ModuleFederationPlugin.
Hiermee geef je Webpack aan welke bestanden of modules uit je remoteapplicatie beschikbaar moeten worden gemaakt voor anderen.
// webpack.config.js (remote app)
new ModuleFederationPlugin({
name: 'remoteApp',
exposes: {
'./Button': './src/Button.js',
'./Header': './src/Header.js'
}
})Host: remotes gebruiken
Aan de host-kant gebruik je de eigenschap remotes om aan te geven van welke remote applicaties je modules wilt gebruiken.
Je geeft een unieke naam voor de remote en de URL van het entrypunt op.
// webpack.config.js (host app)
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
}
})Hoe ze samenwerken
Wanneer de hostapplicatie wordt geladen, haalt deze het bestand remoteEntry.js op van de geconfigureerde remote-URL. Dit entrybestand bevat een manifest van alle modules die de remote beschikbaar stelt.
De host kan deze beschikbare modules vervolgens dynamisch importeren en gebruiken alsof ze deel uitmaken van de eigen codebasis.
Snelle controle
Welke van de volgende opties beschrijft het belangrijkste doel van een hostapplicatie in een Module Federation-opstelling het best?
Samenvatting van host en remote
We hebben de belangrijkste rollen van host- en remote-applicaties in Module Federation geleerd.
- Host-apps zijn de belangrijkste integrators en gebruiken functionaliteit.
- Remote-apps zijn onafhankelijke onderdelen die specifieke modules beschikbaar stellen.
Inzicht in deze rollen is essentieel voor het bouwen van schaalbare micro-frontends. Hierna gaan we dieper in op het instellen van je eerste gefedereerde applicatie!
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 “Host- en remoteapplicaties” gratis?
Ja — de volledige tekst van “Host- en remoteapplicaties” 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 “Host- en remoteapplicaties”?
Leer het verschil tussen host- en remoteapplicaties in een gefedereerde opzet en begrijp hun rollen. 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 3 van 4.
Hoe lang duurt de les “Host- en remoteapplicaties”?
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