Architectuur van micro-frontends met Module Federation · Les

Modules en componenten delen

Leer componenten vanuit een remoteapplicatie beschikbaar te stellen en ze in een hostapplicatie te gebruiken.

Les 2 van 411 stappen

Modules en componenten delen 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.

Introductie tot modules delen

In deze les duiken we in de kern van Micro Frontends: code delen!

We leren hoe de ene applicatie haar componenten of modules kan "beschikbaar stellen" en hoe een andere applicatie deze kan "gebruiken". Dit is essentieel voor het bouwen van echt onafhankelijke, maar toch samenwerkende gefedereerde apps.

Beschikbare modules begrijpen

Een beschikbaar gestelde module is een stukje code (zoals een React-component, een hulpfunctie of zelfs een datastore) dat een Micro Frontend-applicatie beschikbaar wil maken voor andere applicaties.

Zie het als het publiceren van een bibliotheek.
De applicatie die de module beschikbaar maakt, noemen we de remoteapplicatie.
Dit wordt geconfigureerd in de Webpack-instellingen van de remote.

Hoe een remote modules beschikbaar stelt

Om een module beschikbaar te stellen, configureer je ModuleFederationPlugin in de webpack.config.js van je remoteapplicatie. De eigenschap exposes is waar dit wordt ingesteld.

Je definieert een openbare naam voor de module en verwijst die naar het lokale pad.

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... other webpack config ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button.jsx',
        './Header': './src/components/Header.jsx'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

Voorbeeld: onze gedeelde knop

Laten we ons een eenvoudige React-knopcomponent voorstellen die onze remoteapplicatie wil delen. Deze component staat in ./src/components/Button.jsx.

Het is gewoon een normale React-component totdat we deze beschikbaar stellen.

// src/components/Button.jsx
import React from 'react';

const Button = ({ onClick, children }) => {
  return (
    <button
      onClick={onClick}
      style={{
        padding: '10px 20px',
        backgroundColor: '#007bff',
        color: 'white',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer'
      }}
    >
      {children}
    </button>
  );
};

export default Button;

Modules van remotes gebruiken

Aan de andere kant is een remote-module een module die een applicatie wil gebruiken, maar die door een andere gefedereerde applicatie wordt gehost.

De applicatie die de module gebruikt, noemen we de hostapplicatie.
De host moet weten waar de beschikbare modules van de remoteapplicatie te vinden zijn.

Hoe een host modules gebruikt

De hostapplicatie gebruikt ook de ModuleFederationPlugin. Hier definieer je de eigenschap remotes en koppel je een lokale alias aan het entrypunt van de remoteapplicatie.

Het entrypunt is meestal remoteEntry.js, dat door de Webpack-build van de remote-app wordt gegenereerd.

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... other webpack config ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

Gedeelde componenten importeren en gebruiken

Na de configuratie kan de hostapplicatie de remote-component importeren alsof het een lokale module is. Webpack handelt (via Module Federation) het dynamisch laden vanaf de remote-URL af.

Probeer dit eenvoudige voorbeeld uit:

// This simulates a host app importing a remote component.
// In a real setup, 'remoteApp/Button' would resolve to the
// component exposed by the 'remoteApp' through Module Federation.
import React from 'react';
import ReactDOM from 'react-dom/client';

// Imagine 'remoteApp/Button' is the component we exposed earlier
// This import is resolved by Webpack's Module Federation Plugin
const RemoteButton = React.lazy(() => import('remoteApp/Button'));

function App() {
  return (
    <div>
      <h1>Host Application</h1>
      <React.Suspense fallback={<div>Loading Remote Button...</div>}>
        <RemoteButton onClick={() => alert('Button Clicked!')}>
          Click Me From Remote!
        </RemoteButton>
      </React.Suspense>
    </div>
  );
}

// Full entry point for a runnable React app
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Achter de schermen: dynamisch laden

Wanneer de hosttoepassing remoteApp/Button probeert te importeren, zoekt Webpack het niet in de lokale node_modules. In plaats daarvan gebruikt het de configuratie remotes om:

remoteEntry.js op te halen van de opgegeven URL.
De blootgestelde module Button uit dat externe toegangspunt te laden.
Dit gebeurt dynamisch tijdens runtime, waardoor onafhankelijke implementaties mogelijk zijn!

Aanbevolen werkwijzen voor delen

Houd bij het definiëren van exposes en remotes rekening met deze tips:

Duidelijke naamgeving: Gebruik beschrijvende namen voor de modules die je beschikbaar maakt (bijvoorbeeld ./UserProfileCard).
Consistente aliassen: Zorg dat de aliassen voor externe toepassingen in de host gemakkelijk te begrijpen zijn (bijvoorbeeld marketingApp).
Relatieve paden: Gebruik relatieve paden (./src/...) voor modules die je binnen de externe toepassing beschikbaar maakt.

Test je begrip

Je hebt geleerd hoe je modules beschikbaar maakt en gebruikt. Laten we controleren of je de belangrijkste configuratie begrijpt!

Beantwoord dit in de interactieve les

Samenvatting van de les en volgende stappen

Goed gedaan! Je hebt de fundamentele werking geleerd van het delen van modules met Webpack Module Federation:

Beschikbaar maken: Externe toepassingen gebruiken exposes om componenten openbaar te maken.
Gebruiken: Hosttoepassingen gebruiken remotes om deze componenten te importeren en te gebruiken.
Dankzij deze dynamische manier van laden zijn onafhankelijke ontwikkeling en implementatie mogelijk.

Vervolgens bouwen we vanaf nul een eenvoudige gefedereerde toepassing, waarin we deze concepten in de praktijk brengen!

Gratis beginnen

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

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Modules en componenten delen” gratis?

Ja — de volledige tekst van “Modules en componenten delen” 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 “Modules en componenten delen”?

Leer componenten vanuit een remoteapplicatie beschikbaar te stellen en ze in een hostapplicatie te gebruiken. 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 “Modules en componenten delen”?

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

Project instellen en configureren
Modules en componenten delen
Een eenvoudige gefedereerde app bouwen
Uw gefedereerde app lokaal uitvoeren en debuggen

← Terug naar Architectuur van micro-frontends met Module Federation