
Dario Fiore
Principal Consultant, Director
Autoren: Krzystof Dabkowski und Dario Fiore
Micro Frontends werden in der Softwareentwicklung immer beliebter, da sie komplexe Frontends in kleinere, besser zu verwaltende Komponenten aufteilen. Erfahre in diesem Blog mehr zu diesem Ansatz, der durch den Erfolg von Microservices im Backend inspiriert wurde.
Mit dem Digitalisierungsschub der letzten Jahre wurde für viele unserer Kunden Differenzierung an der Kundenschnittstelle wie z.B. an Kundenportalen noch wichtiger. Entsprechend wird in benutzerfreundliche, oft grosse und komplexe Frontends investiert. Gross und komplex ist ein Frontend spätestens dann, wenn mehrere Teams gleichzeitig an einem gemeinsamen Frontend entwickeln. Die Konsequenz davon ist, dass Anpassungen oder Fehler in einer Komponente sich auf das ganze Frontend auswirken und so Releases zur Zitterpartie werden können. Darum ist es für alle Architekt:innen, Projektleiter:innen und Teamleiter:innen besonders wichtig, dass sie sich mit den Architekturansätzen verschiedener Frontends auskennen und die jeweiligen Vor- bzw. Nachteile kennen.
Während sich im Backend schon seit Jahren Microservice-Architekturen durchgesetzt haben, waren Frontend Projekte bisher oft monolithisch aufgebaut. Das führt dazu, dass die Frontends als komplette Einheit erstellt werden, die in sich geschlossen und weniger abhängig von anderen Anwendungen sind (siehe Abb. 1).
Eine solche monolithische Frontend-Architektur führt oft zu folgenden Problemen:
Es gibt zwar verschiedene Ansätze zur Modularisierung monolithischer Frontends, diese bringen jedoch gewichtige Nachteile mit sich. Hier eine Auswahl:
Da, wo monolithische Ansätze beim Aufbau von komplexen Frontend-Anwendungen an ihre Grenzen kommen, können Micro Frontends helfen. Beispielsweise indem sie eine unbegrenzte Anzahl von Teams, Entwicklern und Features und minimale Abhängigkeit zueinander ermöglichen. Denn gerade grosse Vorhaben benötigen Skalierung und Flexibilität, um in kurzer Zeit (z.B. kurze time-to-market) und oft gleichzeitig Kundenbedürfnisse mit neuen Features adressieren zu können (siehe Abb. 2).
Lass uns hier ein wenig tiefer eintauchen und näher auf Micro Frontend Ansätze eingehen, die mit Webpack 5 ModuleFederationPlugin, ab Angular 14 mit Angular Module Federation oder Frameworks wie Single-SPA (https://single-spa.js.org/) umgesetzt werden.
High Level besteht eine Web-Anwendung im Micro Frontend Ansatz aus einem Rahmen und einer Reihe von unabhängigen, wenn nötig miteinander kommunizierenden Module. Nachfolgend die mögliche Strukturierung eines Kundenportals in Micro Frontends (siehe Abb. 3):
Mit Micro Frontends sollen die Schwächen der monolithischen Architekturansätze adressiert werden, indem Frontend-Komponenten unabhängig entwickelt, deployed und dem Benutzer zur Laufzeit ausgeliefert werden.
Feature-Teams von einer überschaubaren Grösse, die Effizienz sicherstellen, können fachlich geschnittene Module (z.B. aus der Motorfahrzeug-Domäne) entwickeln und stellen Frontend-Komponenten wie eine API zur Verfügung (z.B. Police-Detail-Ansicht).
Solche Komponenten (=Micro Frontends) werden vom Kundenportal-Team an der richtigen Stelle eingebunden, ohne dass sie die Inhalte genau kennen müssen. Für das Micro Frontend wird eine Schnittstelle definiert, die quasi einen Vertrag (nachfolgend Contract) darstellt, der vom übergeordneten Rahmen eingehalten werden muss. So bleiben die Micro Frontends resp. Teams sowohl in der Entwicklung, als auch im Releasing und Betrieb unabhängig.
Konkret verspricht der Micro Frontend Ansatz folgende Vorteile:
Als Konsequenz können Feature-Teams ihre End-to-End bzw. Full-Stack Verantwortung und Umsetzung (Front- und Backend) übernehmen und weitgehend unabhängig leben. Verschiedene Schnittführungen sind dabei denkbar, wie beispielsweise entlang von Branchen, Produkten, Marktsegmenten oder Nutzergruppen.
Der beschriebene Ansatz bringt Vorteile erfordert jedoch auch, dass man sich mindestens zu folgenden zwei Punkten Gedanken macht:
Mit einigen unserer Kunden durften wir bereits den Micro Frontends Ansatz erfolgreich umsetzen. Nachfolgend zwei Beispiele.
Es wurde ein Vertriebsportal für Privatkunden-Versicherungen (Hausrat, Privathaftpflicht, etc.) und Motorfahrzeugversicherungen entwickelt. Für beide Branchen wurde je eine Offertierungsstrecke als Micro Frontend entwickelt und in ein Vertriebsportal eingebunden. Damit konnten mehrere Teams gleichzeitig entwickeln und die Abhängigkeiten reduziert werden.
Für den eigenen Vertrieb und externe Makler wurde je ein eigenes Vertriebsportal entwickelt, um die spezifischen Anforderungen zu berücksichtigen. Trotzdem nutzen beide Portale eine gemeinsame Offertierungs-Komponente, welche als Micro Frontend umgesetzt wird. Durch die gemeinsame Komponente wird Doppelspurigkeit vermieden, Umsetzungsaufwand reduziert und eine einheitliche Benutzerfreundlichkeit erleichtert.
So kommen wir zum Fazit, dass gerade für umfangreiche und komplexe Frontends Micro Frontends sinnvoll sind. Ähnlich wie bei Microservices erlaubt es der Architekturansatz, die Entwicklung und den Code in kleinere, unabhängige Einheiten zu teilen, um damit Herausforderungen monolithischer Frontends zu vermeiden.
Vorteile von Micro Frontends sind:
Micro Frontends sind aber nicht immer der richtige Ansatz, denn sie bringen auch höhere Komplexität mit sich. Im Rahmen der Micro Frontend Umsetzung ist es wichtig, auf saubere Schnittstellenspezifikationen zwischen den Micro Frontends (= 1. Contract), sowie eine einheitliche User Experience (= 2. einheitliches Design) zu achten.
Auf den Horizont der Softwareentwicklung blickend können wir sagen, dass Micro Frontends in den nächsten Jahren auch durch die Reifung und Unterstützung der Frameworks weiter an Popularität gewinnen werden und damit eine wichtige Rolle in Digitalisierungsvorhaben spielen. Angesichts des Potenzials, das Benutzererlebnis zu verbessern, die Entwicklungszeit zu verkürzen und die Skalierbarkeit zu erhöhen, ist es kein Wunder, dass der Microservice-Ansatz die Frontend Welt erobert und immer gefragter wird.
Wir freuen uns auf Deine Kontaktaufnahme