Was sind Micro Frontends und warum sprechen gerade (wieder) alle darüber?

Wichtige Erkenntnisse

1. Bessere Zusammenarbeit
   Micro-Frontends ermöglichen die Aufteilung einer Webanwendung in kleinere, unabhängige Komponenten, die von verschiedenen Teams entwickelt, implementiert und gewartet werden können. Dies fördert eine effizientere Zusammenarbeit und erleichtert die Abwicklung komplexer Projekte.
2. Optimale Wartung und Flexibilität
   Dank des modularen Aufbaus von Micro Frontends können einzelne Elemente unabhängig voneinander angepasst werden, was ein hohes Maß an Flexibilität und Anpassungsfähigkeit an wechselnde Anforderungen gewährleistet. Das bedeutet, dass sich Fehler in einem Modul nicht sofort auf das gesamte System auswirken.
3. Skalierbarkeit und Wachstum
   Neue Funktionen oder Module können nahtlos hinzugefügt werden, ohne das gesamte System zu überarbeiten. Dies ermöglicht ein organisches Wachstum mit steigenden Nutzerzahlen und steigendem Traffic.
4. Verbessertes Nutzererlebnis
   Micro-Frontends können die Ladezeit einer Seite verkürzen und die Gesamtleistung optimieren, indem sie gezielt Module aufrufen. Dies führt zu einer besseren Nutzererfahrung und einer erhöhten Nutzerzufriedenheit.

Was sind Micro-Frontends?

Micro-Frontends stellen einen Paradigmenwechsel in der Webentwicklung dar und bieten einen dynamischen Ansatz für die Erstellung moderner Frontend-Anwendungen. Im Kern zerlegen Micro-Frontends große, monolithische Frontend-Architekturen in kleinere, leichter zu handhabende Teile. Bei diesen Teilen, die oft als „Webkomponenten“ oder „benutzerdefinierte Elemente“ bezeichnet werden, handelt es sich um eigenständige Module, die mithilfe verschiedener Technologien unabhängig voneinander entwickelt, getestet und eingesetzt werden können. Diese Modularisierung fördert die Agilität in der Webentwicklung, da verschiedene Teams gleichzeitig an einzelnen Modulen arbeiten können, was den Entwicklungszyklus beschleunigt. Es ist jedoch wichtig, die Nachteile dieses Ansatzes zu berücksichtigen, wie z. B. potenzielle Herausforderungen bei der durchgängigen Integration und der Aufrechterhaltung der Konsistenz des Frontend-Codes.

In der Welt der Micro-Frontends können Webentwicklungsteams ihre Module autonom erstellen, verwalten und skalieren, wodurch die Skalierbarkeit von E-Commerce-Plattformen und anderen komplexen Anwendungen verbessert wird. Diese Dezentralisierung der Verantwortlichkeiten ermöglicht es Entwicklungsteams, den für ihr spezifisches Modul am besten geeigneten Tech-Stack auszuwählen, unabhängig davon, ob es sich um JavaScript, TypeScript, React, Angular oder eine andere Technologie handelt. Obwohl Micro-Frontends erhebliche Vorteile in Bezug auf Modularität und Skalierbarkeit bieten, ist es wichtig, ihre Integration sorgfältig zu planen und zu verwalten, um dem Endbenutzer ein einheitliches Erlebnis zu bieten. Ein ausgewogenes Verhältnis zwischen den Vorteilen und Herausforderungen von Micro-Frontends ist entscheidend, wenn über deren Einsatz in Webentwicklungsprojekten nachgedacht wird.

Warum Micro-Frontends?

Die gemeinsame Arbeit einzelner Teams an der Codebasis einer Webapplikation wird immer weniger praktikabel — ab einer bestimmten Größe wird Software zu komplex und ist daher schwer überschaubar. Änderungen müssen langfristig geplant werden, und Implementierungsabläufe müssen häufig unterbrochen werden. In einem solchen Szenario, in dem das gesamte System in der Lage sein muss, eine Änderung zu akzeptieren, treten Fehler bei der Implementierung, anderen Updates und verschiedenen Anwendungsfällen schneller auf.

Entwicklungsteams nutzen gerne die sogenannte Microservice-Architektur:

Micro-Frontends sind Benutzeroberflächen, die aus einzelnen, isolierten Komponenten bestehen. Sie können unabhängig voneinander entwickelt, implementiert, gewartet und geändert werden, was die clientseitige Frontend-Entwicklung verbessert. Das Einzigartige dabei ist, dass sowohl das Backend als auch das Frontend modular aufgebaut sind.

Microservices verfolgen einen ähnlichen Ansatz wie Micro-Frontends:

Die Idee hinter Microservices ist es, eine große Aufgabe in verschiedene Unteraufgaben zu zerlegen und diese einzeln zu bearbeiten. Bei dieser Modularisierung werden die Domänen in einzelne, unabhängige Systeme aufgeteilt, die durch Schnittstellen miteinander verbunden sind. Ein nicht modularisiertes System ist ein Monolith.

Micro-Frontend im Vergleich zu Microservices

Microservices sind ein Ansatz, der im Backend einer Webanwendung verwendet wird. 2016 wurde zum ersten Mal ein ähnlicher Ansatz für das Frontend eingeführt, um die Nutzung und die Vorteile separater Systeme zu ermöglichen. Heute ist es unmöglich, sich Frontends komplexer Anwendungen ohne eine solche Architektur vorzustellen, die serverseitige und clientseitige Komponenten kombiniert.

IT-Wirtschaft, Nov. 2017
Microservices sind derzeit vor allem im Backend ein Thema. Wenn wir den Ansatz auf das Frontend übertragen, werden daraus Micro-Frontends.

Jedes Modul der Micro-Frontend-Architektur wird von einem funktionsübergreifenden Team ganzheitlich verwaltet, von der Datenbank bis zur Benutzeroberfläche.

Für einen Online-Shop ist es beispielsweise sinnvoll, unabhängige Teams für Module wie Inspire, Product, Search und Check-out zu bilden.

Die Idee ist jedoch nicht neu. Sie hat viel mit dem Konzept der „eigenständigen Systeme“ gemeinsam. In der Vergangenheit wurden solche Ansätze als Frontend-Integration für vertikale Systeme bezeichnet. Micro-Frontends haben sich dafür endlich als etwas weniger sperriger Begriff etabliert.

Eine der Schlüsseltechnologien, die Mikrofrontends ermöglichen, ist die Modulföderation, die die Integration dieser unabhängigen Module sowohl zur Build-Zeit als auch zur Laufzeit erleichtert. Durch den Modulverbund können Webkomponenten bei Bedarf geladen werden, wodurch die anfänglichen Ladezeiten der Seiten reduziert und das allgemeine Benutzererlebnis verbessert wird. Diese Runtime-Integration ist besonders für größere Anwendungen mit komplexen Funktionen von Vorteil, da sie das selektive Laden von Modulen nur bei Bedarf ermöglicht, wodurch unnötiger Overhead reduziert wird. Es kann jedoch komplex sein, eine nahtlose, durchgängige Integration zu erreichen und eine reibungslose Benutzererfahrung über verschiedene Module hinweg zu gewährleisten.

Vorteile von Micro-Frontends

• Einfache Anpassung: Im Gegensatz zu einem Monolith können die einzelnen Micro-Frontends unabhängig voneinander geändert werden.
• Robustheit: Wenn in einem Modul ein Fehler auftritt, sind andere Module wahrscheinlich nicht betroffen. Da sie unabhängig voneinander funktionieren, ist es möglich, das defekte Modul zu reparieren oder eine kurzfristige Alternative anzubieten.
• Einfachheit: Die Komplexität eines kleinen Moduls ist deutlich geringer als die eines Monolithen, der den gesamten Funktionsumfang einer Anwendung umfasst. Entwickler können sich so einen besseren Überblick über die einzelnen Module verschaffen, als dies in einem großen, kohärenten Konstrukt möglich wäre.
• Flexibilität: In einer Micro-Frontend-Architektur können Sie das beste Tool für die jeweilige Aufgabe auswählen. Da die Module unabhängig voneinander arbeiten, können sie von verschiedenen Teams parallel in JavaScript, Go usw. implementiert werden, wodurch Abhängigkeiten reduziert werden.
• Entwickeln und aktualisieren: Einzelne Benutzeroberflächenkomponenten unabhängig voneinander, dank klar definierter APIs, Routing, HTML und clientseitiger Web-App-Entwicklung. Dies kann zu schnelleren Entwicklungszyklen und einer größeren Flexibilität bei der Anpassung an sich ändernde Anforderungen führen, was das Benutzererlebnis verbessert.

Der größte Nachteil einer Micro-Frontend-Architektur ist, dass sie nicht für jedes Projekt geeignet ist — aufgrund des höheren Betriebskosten und der erhöhten Komplexität (Infrastruktur, Kommunikation usw.) lohnt sich der Ansatz nicht für kleinere Projekte.

Welche Frontend-Frameworks sind besonders beliebt

Eckige Mikrofrontends

Angular ist ein Frontend-Webanwendungs-Framework (Software zur Entwicklung von Webanwendungen). Die Micro-Frontend-Architektur ist besonders kompatibel mit Angular und wird daher von vielen Entwicklern für die Implementierung in Micro-Frontends bevorzugt. Angular arbeitet auch mit Bausteinen, d. h. jedem oben genannten Modul, bestehend aus: einer Funktion, einer Reihe von Komponenten oder einer Seite. Micro-Frontends lassen sich daher hervorragend als Angular Micro-Frontends entwickeln.

Mikrofrontends React

Ein weiteres beliebtes Micro-Frontend-Framework ist React. React funktioniert nach dem gleichen, nämlich komponentenbasierten Prinzip, bei dem eigenständige Komponenten (Module) erstellt und dann zu komplexen Benutzeroberflächen zusammengesetzt werden können. Nähere Informationen zu React haben wir hier zusammengefasst.

Sie möchten mehr über Micro-Frontends erfahren?

Wir empfehlen die folgenden Bücher:

Die Kunst der Micro-Frontends: Erstellen Sie Websites mit kompositorischen Benutzeroberflächen, die mit der Skalierung Ihrer Anwendung auf natürliche Weise wachsen (Amazon.com)

Mikrofrontends in Aktion (manning.com)