Angular Academy · Lektion

Micro-Frontend-Architektur

Anwendungen in unabhängig bereitstellbare Einheiten aufteilen

Micro-Frontend-Architektur ist eine kostenlose Angular 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 Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind Micro Frontends

Micro Frontends übertragen die Idee von Microservices auf die Benutzeroberfläche: Eine große Webanwendung wird in unabhängig entwickelte, getestete und bereitgestellte Teile aufgeteilt. Jeder Teil gehört einem eigenen Team und wird zur Laufzeit zu einer gemeinsamen Benutzererfahrung zusammengesetzt.

Welches Problem sie lösen

Eine einzige große Angular-App (ein „Monolith im Frontend“) bindet jedes Team an einen gemeinsamen Release-Zyklus, Build und Deploy. Wenn Teams wachsen, bremst das alle Beteiligten aus. Micro Frontends ermöglichen es Teams, nach ihrem eigenen Zeitplan auszuliefern.

Unabhängig bereitstellbare Artefakte

Die zentrale Eigenschaft ist die unabhängige Bereitstellbarkeit: Das Checkout-Team kann einen neuen Checkout-Ablauf bereitstellen, ohne den Produktkatalog neu zu bauen oder bereitzustellen. Jeder Remote ist ein eigenes Artefakt hinter seiner eigenen Pipeline.

Host und Remotes

Architektonisch gibt es einen Host (Shell), der einen oder mehrere Remotes lädt. Die Shell übernimmt das Routing und Layout auf oberster Ebene; Remotes stellen Funktionsbereiche bereit, die bei Bedarf geladen werden.

// conceptually
host  -> loads -> remote: catalog
        -> loads -> remote: checkout
        -> loads -> remote: account

Strategien zur Zusammensetzung

Remotes können zur Build-Zeit, auf dem Server (SSI/Edge) oder zur Laufzeit im Browser zusammengesetzt werden. Die Zusammensetzung zur Laufzeit mit Module Federation ist bei Angular am weitesten verbreitet, weil sie eine unabhängige Bereitstellung ermöglicht.

Module Federation in einem Satz

Module Federation ermöglicht es einer gebauten App, Module bereitzustellen, die eine andere gebaute App zur Laufzeit per HTTP lädt, wobei gemeinsame Bibliotheken genutzt und somit nicht dupliziert werden. Sie bildet die Grundlage der meisten Angular-Micro-Frontends.

Team-Autonomie und Grenzen

Jedes Micro Frontend sollte einer klaren Geschäftsdomäne zugeordnet sein (Katalog, Checkout, Konto). Klare Domänengrenzen minimieren die Kopplung zwischen Teams – genau darum geht es. Gemeinsame Belange wie Authentifizierung und Designsystem werden zu expliziten Verträgen.

Die Kosten

Micro Frontends bringen echte Komplexität mit sich: unterschiedliche Versionen zwischen Remotes, duplizierte Abhängigkeiten bei falscher Konfiguration, erschwerte Fehlersuche über Grenzen hinweg und Fehler beim Laden zur Laufzeit. Setzen Sie sie nur ein, wenn die Teamgröße den zusätzlichen Aufwand rechtfertigt.

Wann Sie sie NICHT einsetzen sollten

Für ein kleines Team oder ein einzelnes Produkt ist ein gut strukturiertes Monolith mit Lazy-Loaded-Routen einfacher und schneller. Micro Frontends lohnen sich, wenn mehrere Teams unabhängig voneinander dieselbe App bereitstellen müssen.

Gemeinsames Erscheinungsbild

Um eine Frankenstein-Benutzeroberfläche zu vermeiden, nutzen die Teams eine gemeinsame Designsystem-Bibliothek und globale Styles. Konsistenz ist ein bewusst vereinbarter Vertrag und kein Zufall, da jeder Remote separat gebaut wird.

Angular-spezifische Aspekte

Angular-Remotes müssen zur Laufzeit eine einzige Kopie des Angular-Frameworks gemeinsam nutzen. Das Laden zweier Angular-Versionen beschädigt die Dependency Injection und vergrößert das Bundle. Werkzeuge wie Native Federation verwalten diese gemeinsame Nutzung für Sie.

Kurzer Test

Was ist der entscheidende Vorteil von Micro Frontends?

Zusammenfassung

Micro Frontends teilen eine große App in unabhängig bereitstellbare Remotes auf, die von einer Host-Shell geladen und Geschäftsdomänen zugeordnet werden. Die Zusammensetzung zur Laufzeit über Module Federation ist bei Angular Standard; dabei muss eine einzige Kopie des Frameworks gemeinsam genutzt werden. Micro Frontends lösen die Kopplung auf Teamebene, verursachen aber echte Betriebskosten.

Häufig gestellte Fragen

Ist die Lektion „Micro-Frontend-Architektur“ kostenlos?

Ja — der vollständige Text von „Micro-Frontend-Architektur“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Micro-Frontend-Architektur“?

Anwendungen in unabhängig bereitstellbare Einheiten aufteilen Du übst Angular 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 Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular 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-Architektur“?

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 Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular 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

← Zurück zu Angular Academy