Prinzipien der Micro-Frontend-Architektur
Warum Micro-Frontends, Teamautonomie, unabhängige Bereitstellung und Zielkonflikte durch Technologievielfalt
Prinzipien der Micro-Frontend-Architektur ist eine kostenlose Vue 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Micro-Frontends?
Micro-frontends übertragen die Ideen von Microservices auf die UI: Eine große App wird in unabhängig entwickelte und bereitgestellte Teile aufgeteilt. Jeder Teil wird von einem eigenen Team verantwortet und anschließend zu einer gemeinsamen Benutzererfahrung zusammengesetzt.
Der Engpass des Monolithen
Ein einzelnes großes Frontend bedeutet, dass jedes Team in einer gemeinsamen Codebasis arbeitet, Releases koordiniert und sich einen Build teilt. Wenn die Organisation wächst, wird dies zum Engpass – mit langsamen Builds, Merge-Konflikten und Release-Trains.
Prinzip: Teamautonomie
Die zentrale Idee ist Verantwortung von Anfang bis Ende. Ein Team besitzt seinen UI-Teil – vom Code bis zum Deployment –, einschließlich eigenem Repository, eigener Pipeline und eigener Laufzeitumgebung, und kann dadurch vorankommen, ohne auf andere warten zu müssen.
Vertikale Slices statt Schichten
Teams werden nach Geschäftsfähigkeit aufgeteilt (Checkout, Search, Profile), nicht nach technischen Schichten. Jeder Slice enthält seine eigene UI, Logik und seinen eigenen Datenzugriff für diese Fähigkeit.
Prinzip: Unabhängiges Deployment
Jedes Micro-Frontend wird nach seinem eigenen Zeitplan ausgeliefert. Das Search-Team kann zehnmal am Tag deployen, ohne Checkout anzufassen. Releases sind entkoppelt, wodurch Risiko und Abstimmungsaufwand sinken.
Prinzip: Technologievielfalt (optional)
Teams können für jeden Slice unterschiedliche Frameworks wählen. In der Praxis standardisieren die meisten Organisationen (z. B. auf Vue), um gemeinsame Tools zu nutzen. Die Architektur erlaubt jedoch Vielfalt, wenn sie begründet ist.
Integrationsansatz: Zur Build-Zeit
Eine Möglichkeit, Slices zu kombinieren, ist die Integration zur Build-Zeit: Jedes Micro-Frontend wird als Paket veröffentlicht, und die Container-App installiert sie als Abhängigkeiten und erstellt sie gemeinsam.
// container package.json
{
"dependencies": {
"@org/checkout": "^2.1.0",
"@org/search": "^1.4.0"
}
}Der Kompromiss bei der Build-Zeit-Integration
Die Integration zur Build-Zeit ist einfach, aber sie koppelt Releases: Um eine neue Checkout-Version auszuliefern, muss die Container-App neu erstellt und erneut deployed werden. Damit geht das wirklich unabhängige Deployment verloren.
Integrationsansatz: Zur Laufzeit
Bei der Integration zur Laufzeit werden Micro-Frontends im Browser zur Laufzeit geladen – die Container-App ruft den Code eines Remotes bei Bedarf ab. Jedes Remote wird unabhängig deployed; die Container-App übernimmt die aktuelle Version, ohne neu erstellt werden zu müssen.
Module Federation
Die führende Technik für die Integration zur Laufzeit ist Module Federation: ein Build-Feature, mit dem eine App Module bereitstellen und eine andere sie zur Laufzeit über das Netzwerk verwenden kann, während gemeinsame Abhängigkeiten geteilt werden. Sie werden es in den kommenden Lektionen verwenden.
Den passenden Ansatz wählen
Verwenden Sie die Integration zur Build-Zeit bei kleinen Teams, die Einfachheit und ein gemeinsames Deployment wünschen. Verwenden Sie die Integration zur Laufzeit (Module Federation), wenn unabhängiges Deployment und Teamautonomie Priorität haben und Sie die zusätzliche operative Komplexität akzeptieren.
Kurzer Check
Überprüfen Sie Ihr Verständnis der Micro-Frontend-Prinzipien.
Zusammenfassung
Sie haben die Prinzipien von Micro-Frontends kennengelernt:
- Eine große UI wird in unabhängig verantwortete und deployte Slices aufgeteilt, die für die Benutzerinnen und Benutzer zusammengesetzt werden.
- Teamautonomie: Verantwortung von Anfang bis Ende für einen vertikalen geschäftlichen Slice.
- Unabhängiges Deployment: Jeder Slice wird nach seinem eigenen Zeitplan ausgeliefert.
- Technologievielfalt ist optional; die meisten Teams standardisieren.
- Die Integration erfolgt zur Build-Zeit (einfach, gekoppelte Releases) oder zur Laufzeit (Module Federation, echte Unabhängigkeit).
Häufig gestellte Fragen
Ist die Lektion „Prinzipien der Micro-Frontend-Architektur“ kostenlos?
Ja — der vollständige Text von „Prinzipien der 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 Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Prinzipien der Micro-Frontend-Architektur“?
Warum Micro-Frontends, Teamautonomie, unabhängige Bereitstellung und Zielkonflikte durch Technologievielfalt Du übst Vue 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 Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue 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 „Prinzipien der 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 Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue 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
- Prinzipien der Micro-Frontend-Architektur
- Webpack Module Federation mit Vue
- Vite Federation Plugin
- Gemeinsamer Status über Micro-Frontends hinweg