Was sind Micro Frontends?

Was sind Micro Frontends?

Micro Frontends sind ein Architekturstil, bei dem unabhängig auslieferbare Frontend-Anwendungen zu einem größeren Ganzen zusammengesetzt werden. So formuliert es Cam Jacksons Artikel auf martinfowler.com. Die Idee hinter Microservices wird damit auf den Browser übertragen: Jedes Team besitzt einen Ausschnitt der Benutzeroberfläche von Anfang bis Ende, baut ihn und released ihn, ohne einen Release des gesamten Frontends abzustimmen.

So funktioniert es

Eine Container-Anwendung (oft Shell genannt) entscheidet, welches Micro Frontend angezeigt wird, und setzt die Teile zu einer Seite zusammen. Der Artikel beschreibt mehrere Wege der Integration:

• Serverseitige Komposition. Der Server setzt HTML aus Fragmenten zusammen, zum Beispiel mit Server-Side Includes.
• Integration zur Build-Zeit. Jedes Micro Frontend wird als Paket veröffentlicht und in den Container gebündelt. Der Artikel rät davon ab, weil es zu gekoppelten Releases zwingt.
• Integration zur Laufzeit mit iframes. Starke Isolation, aber Routing, Deep Links und responsives Layout werden schwieriger.
• Integration zur Laufzeit mit JavaScript. Jedes Micro Frontend wird per Script geladen und stellt eine Funktion bereit, über die der Container es einbindet. Das ist die Standardwahl der Autoren.
• Integration zur Laufzeit mit Web Components. Jedes Micro Frontend ist ein Custom Element, das der Container erzeugt.

Beispiel

Ein Online-Shop hat ein Team für die Produktsuche, eines für den Checkout und eines für das Konto. Die Shell rendert den Header und routet nach URL: /search lädt die Such-App, /checkout die Checkout-App. Das Checkout-Team kann am Nachmittag einen Fix ausliefern, während die Suche unberührt bleibt. Jede App könnte sogar ein anderes Framework nutzen, etwa React oder Vue.js, was aber selten eine gute Idee ist.

Wann es sich lohnt, und häufige Fehler

Micro Frontends lösen ein organisatorisches Problem: Viele Teams arbeiten an einem großen Frontend und blockieren sich. Derselbe Artikel nennt die Kosten: doppelt geladene Abhängigkeiten können die Downloadgröße erhöhen, Entwicklungsumgebungen können sich anders verhalten als der Produktions-Container, und es gibt mehr Repositories, Pipelines und Server zu betreiben. Ein einheitliches Nutzererlebnis über getrennte Codebasen zu halten ist ebenfalls schwerer.

• Einsatz bei einem kleinen Team. Eine gut strukturierte Einzel-App ist einfacher.
• Aufteilen nach technischer Schicht statt nach Fachbereich. Dann hängen die Teams wieder voneinander ab.
• Zustand über globale Variablen teilen. Versteckte Kopplung bringt den Monolithen zurück. Besser sind Events oder die URL.
• Jedes Team wählt ein anderes Framework. Nutzer laden dann mehrere Laufzeiten.
• Keine gemeinsamen Designregeln. Buttons und Abstände laufen auseinander.

Micro Frontends, Lasttests und Monitoring

Eine Seite hängt nun von mehreren Bundles und mehreren Backends ab, sodass das langsamste Teil das Tempo bestimmt. Messen Sie jeden Teil, nicht nur die Shell. Führen Sie einen Lasttest gegen die APIs durch, die jedes Micro Frontend aufruft, und beobachten Sie Verfügbarkeit und Antwortzeit der APIs in Produktion. Unser Leitfaden zum Lasttest von Microservices in der Cloud (englisch) behandelt die Backend-Seite. Das verwandte Muster der Single-Page-App ist die Grundlage vieler Micro Frontends. Den vollständigen Musterkatalog finden Sie im Originalartikel (englisch).

Häufige Fragen

Was ist der Unterschied zwischen Micro Frontends und Microservices?

Microservices teilen das Backend in unabhängige Dienste. Micro Frontends übertragen dieselbe Idee auf die Benutzeroberfläche, sodass ein Team ein Feature vom Bildschirm bis zum Dienst besitzen kann. Sie werden oft zusammen eingesetzt, funktionieren aber auch einzeln.

Brauchen Micro Frontends ein bestimmtes Framework?

Nein. Der Ansatz ist unabhängig von Frameworks. Container und Micro Frontends brauchen nur eine vereinbarte Art, sich ein- und auszuhängen und zu kommunizieren.

Sind Micro Frontends schlecht für die Performance?

Sie können es sein, wenn jedes seine eigene Kopie gemeinsamer Bibliotheken ausliefert. Geteilte Abhängigkeiten und die Messung der Ladezeit pro Route halten die Kosten im Griff.

Wann sollte ich keine Micro Frontends nutzen?

Wenn ein Team das gesamte Frontend bequem verantworten kann. Zusätzliche Pipelines, Integrationscode und Konsistenzarbeit lohnen sich nur bei mehreren Teams, die unabhängig releasen müssen.