Micro-Frontend-Konzepte und Abwägungen
Verstehen Sie, warum Teams Micro-Frontends einsetzen, sowie die Ansätze zur Aufteilung zur Laufzeit und zur Build-Zeit.
Micro-Frontend-Konzepte und Abwägungen ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Micro-Frontends?
Micro-Frontends übertragen das Microservices-Konzept auf die UI-Ebene. Eine einzelne Webanwendung wird in unabhängig verwaltete, entwickelte und bereitgestellte Frontend-Teile aufgeteilt, für die jeweils eigene Teams zuständig sind.
Integrationsstrategien
Es gibt drei grundlegende Integrationsstrategien: zur Build-Zeit (npm-Pakete), serverseitig (Edge-Komposition) und zur Laufzeit (Module Federation, iframes, Web Components).
Integration zur Build-Zeit
Veröffentlichen Sie gemeinsam verwendete Komponenten als npm-Pakete. Das ist einfach, aber jede Änderung erfordert eine erneute Veröffentlichung und Bereitstellung für alle Consumer – eine wirklich unabhängige Bereitstellung ist damit nicht möglich.
// Team A publishes:
npm publish @company/design-system
// Team B installs:
npm install @company/design-system
import { Button } from '@company/design-system';
// Deployed together — not independentIntegration zur Laufzeit mit Module Federation
Webpack 5 Module Federation ermöglicht es einer App (dem Host), zur Laufzeit Komponenten aus einer anderen App (dem Remote) zu laden – für eine wirklich unabhängige Bereitstellung.
iframe-Integration
Binden Sie Micro-Frontends für maximale Isolation in iframes ein. Vorteile: keine CSS-/JS-Konflikte. Nachteile: schlechte UX (Scrollen, Fokus, Größenanpassung), das Teilen von State ist schwierig und die Lösung ist nicht SEO-freundlich.
Web Components
Verpacken Sie jedes Micro-Frontend in ein Custom Element. Das funktioniert mit jedem Framework und bietet native Isolation, verfügt jedoch nicht über React-spezifische Funktionen wie das Teilen von Context.
// Remote team builds:
customElements.define('product-detail', ProductDetailElement);
// Host team embeds:
<product-detail product-id="123" />Abwägungen: Vorteile
Unabhängige Bereitstellung (die UI eines Teams bereitstellen, ohne andere Teams anzupassen), Autonomie der Teams (eigenen Stack und eigene Abhängigkeiten wählen) und Skalierbarkeit (Teams arbeiten parallel, ohne Codekonflikte zu verursachen).
Abwägungen: Kosten
Operative Komplexität (mehr Repositories, CI-Pipelines und Bereitstellungen), doppelte Bundles (React wird ohne gemeinsames Teilen mehrfach geladen), zusätzlicher Performance-Aufwand und schwierigeres Debugging über die Grenzen hinweg.
Wann Sie Micro-Frontends wählen sollten
Micro-Frontends bieten den größten Nutzen, wenn mehrere große Teams am selben Produkt arbeiten, für verschiedene Bereiche unterschiedliche Tech-Stacks benötigt werden oder Bereiche vollständig unabhängig voneinander bereitgestellt werden müssen.
Wann Sie Micro-Frontends NICHT wählen sollten
Vermeiden Sie Micro-Frontends bei kleinen Teams (der zusätzliche Aufwand überwiegt die Vorteile), bei einfachen Apps oder wenn Sie die vollständige Kontrolle über das gesamte Frontend haben – Monorepos mit Nx/Turborepo reichen in der Regel aus.
Gemeinsames Designsystem
Unabhängig von der Integrationsstrategie sorgt ein gemeinsames Designsystem (als Paket veröffentlicht oder über Module Federation bereitgestellt) für ein einheitliches Erscheinungsbild über alle Micro-Frontends hinweg.
Kurztest
Welcher Integrationsansatz ermöglicht die wirklich unabhängige Bereitstellung von Micro-Frontends zur Laufzeit?
Zusammenfassung
Micro-Frontends zerlegen die UI, um Teamautonomie und unabhängige Bereitstellungen zu ermöglichen. Die Integrationsmöglichkeiten reichen von npm-Paketen (einfach, aber nicht unabhängig) bis zu Module Federation (zur Laufzeit, wirklich unabhängig). Berücksichtigen Sie die operativen Kosten – Micro-Frontends eignen sich für große Produkte mit mehreren Teams, erhöhen bei kleineren Projekten jedoch die Komplexität.
Häufig gestellte Fragen
Ist die Lektion „Micro-Frontend-Konzepte und Abwägungen“ kostenlos?
Ja — der vollständige Text von „Micro-Frontend-Konzepte und Abwägungen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Micro-Frontend-Konzepte und Abwägungen“?
Verstehen Sie, warum Teams Micro-Frontends einsetzen, sowie die Ansätze zur Aufteilung zur Laufzeit und zur Build-Zeit. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Micro-Frontend-Konzepte und Abwägungen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Micro-Frontend-Konzepte und Abwägungen
- Module Federation mit Webpack 5
- Gemeinsamer State und Routing zwischen MFEs
- Unabhängiges Deployment und CI-Pipelines für MFEs