Warum der Microservice-Ansatz das Frontend erobert

 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.

Die Welt wird komplexer — so auch die Frontends

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.

Es waren einmal… monolithische Frontend-Architekturansätze

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).

Abbildung 1.png
Abbildung 1: Bisheriger, monolithischer Architekturansatz

Eine solche monolithische Frontend-Architektur führt oft zu folgenden Problemen:

  • Der Frontend-Code wird rasch umfangreich, komplex und unübersichtlich. Der Wartungsaufwand steigt und Fehler nehmen zu.
  • Die Abhängigkeiten führen zu überraschenden Fehlern bei Releases.
  • Es entsteht eine sStarke Kopplung der Funktionalität im Frontend.

Es gibt zwar verschiedene Ansätze zur Modularisierung monolithischer Frontends, diese bringen jedoch gewichtige Nachteile mit sich. Hier eine Auswahl:

  • Absprünge in separate Frontends via Links erlauben sehr einfach andere Frontends zur Laufzeit “anzubinden”, resultieren aber in Wartezeiten, bis das neue Frontend geladen und aufgebaut ist. Das zeigt sich besonders, wenn die Benutzer:innen häufig zwischen den Frontends wechseln müssen oder die Absprünge zeitkritisch sind.
  • iFrames sind eine lang bekannte Technologie, um andere Frontends zur Laufzeit einzubinden. Die wesentlichen Nachteile im Enterprise Kontext sind allerdings, dass kein direkter Datenaustausch mit dem iFrame Inhalt möglich ist und dass keine Lesezeichen für den Inhalt der iFrames gesetzt werden können. Ausserdem kann es dazu führen, dass responsives Design (Anpassung des Inhalts an den Bildschirm) nicht möglich ist.
  • Integration von Web Components zur Build-Zeit: Web Components werden eigenständig entwickelt und zur Build-Zeit integriert. Sie sind eigentlich auch Micro Frontends und bieten Vorteile hinsichtlich Usability. Der Nachteil hier ist allerdings, dass sie eine starke Kopplung aufweisen und dies zu Fehlern bei der Build- oder noch schlimmer der Laufzeit führen kann.

Klein und oho: die Micro Frontends

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).

Abbildung 2.png
Abbildung 2: Neuer Architekturansatz mit Micro Frontend, Feature-Teams übernehmen eine Full-Stack Verantwortung für eine Funktionalität.

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):

Abbildung 3.png
Abbildung 3: Möglicher Aufbau einer Micro Frontend-basierten Web-Anwendung. Ein übergeordneter Rahmen mit der Navigation kann Micro Frontends für die Personendaten, Liste der Offerten sowie eine Detailansicht für die Anzeige und Bearbeitung von Offerten (Offerten-Details) beinhalten.

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:

  • Geringere Komplexität der Codebasis
  • Unabhängige Deployments
  • Unabhängige Teams
  • Inkrementelle Upgrades

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.

Unser Tipp: Vorausschauen und abwägen

Der beschriebene Ansatz bringt Vorteile erfordert jedoch auch, dass man sich mindestens zu folgenden zwei Punkten Gedanken macht:

1. Contract

Wie erwähnt, müssen die Micro Frontends zueinander passen. Insbesondere kritisch ist der Umstand, dass die Integration zur Laufzeit stattfindet und Benutzer von möglichen Inkompatibilitäten sofort betroffen sind. Daher ist es notwendig, dass:

  • jede Komponente ihr API (Contract) definiert - Rahmenbedingungen für die Anbindung hat (z.B. welche Parameter in welcher Form beim Laden übergeben werden müssen). Das gewählte Micro Frontend Framework gibt vor, wie das API definiert wird (z.B. wie Parameter an das Modul übergeben werden oder wie ein Modul mit anderen Modulen kommunizieren kann).
  • das API der Micro Frontend Komponente stabil bleibt, was jedes Team, das eine Komponente zur Verfügung stellt, sicherstellt (z.B. welche Parameter für die Initialisierung des Moduls benötigt werden).
  • es in der Organisation klare Guidelines für die Erstellung der Micro Frontend Komponenten gibt. Die Guidelines sollen definieren, welches Framework verwendet wird, wie es mit gemeinsamen Ressourcen umgegangen wird etc.

2. Einheitliches Design

Ein nahtloses Erlebnis ist für eine optimale User-Experience essenziell. Mit Micro Frontends kann eine nahtlose Integration der Komponenten implementiert werden. Wenn aber unterschiedliche Teams ihre Komponenten unabhängig voneinander entwickeln, können sie grafische Elemente, die Benutzerführung und andere Look&Feel Aspekte unterschiedlich lösen.

Eine Lösung dafür könnte ein zentrales UX-Team sein, das eine Bibliothek mit graphischen Komponenten inkl. CSS-Styling stellt und in jedem Feature-Team in die UX-Entscheidungen involviert wird, um die Einheitlichkeit sicherzustellen.

Die Realität zeigt: es funktioniert! 

Mit einigen unserer Kunden durften wir bereits den Micro Frontends Ansatz erfolgreich umsetzen. Nachfolgend zwei Beispiele.

Beispiel 1: Vertriebsportal für einen Nicht-Leben-Versicherer

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.

Bsp. 1.png

Beispiel 2: Offertstrecken für eine Krankenkasse 

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.

Bsp. 2.png

Zum Schluss: Je grösser die Anwendung, desto sinnvoller Micro Frontends

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:

  • dass mehrere Teams gleichzeitig an einem Frontend entwickeln können, 
  • die Micro Frontend Komponenten unabhängig ausgerollt werden können und so kürzere Time-to-Market ermöglichen
  • und gemeinsam verwendete Komponenten als Micro Frontends wiederverwendet werden können.

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.