Wir nutzen eine eigene Pattern Library als Konsens für alle Teams und setzen unser UI auf dieser Basis auf. – Matthias Geißendörfer
Mit einem Special zu Software Development fand am 22. September 2021 das Virtual Job Event von get in IT statt. Im Rahmen des job I/O-Programms berichteten Expert:innen aus der IT-Branche von ihren Erfahrungen aus der Praxis und gaben Tipps für Deinen Jobeinstieg. Im Live-Chat beantworteten die Speaker:innen Deine Fragen. Mit dabei war Matthias Geißendörfer mit seiner Live-Session zu Micro Frontends. Zusammen mit vielen anderen Software Devs – über 40 Entwicklungsteams sind bei OTTO am Start – ist er für den otto.de-Webshop zuständig. Damit die User Interfaces trotzdem einheitlich erscheinen, kommen Micro Frontends zum Einsatz, über die uns Matthias ein bisschen aufschlaute.
Du hast das Live Event verpasst? Kein Problem! Schau Dir den Deep Dive von Matthias hier einfach gemütlich an.
Hier siehst Du die Session der job I/O in voller Länge:
Für den Webshop otto.de arbeiten über 40 Teams zusammen und entwickeln dabei eine für den Nutzer einheitliche Website. Welche Probleme und Herausforderungen dabei entstehen und wie sie sich den Einsatz von Micro Frontends zu Nutze machen, wird sich Matthias Geißendörfer in diesem Vortrag genauer anschauen.
Speaker
Unternehmen
Microservices weitergedacht
In einer Microservice-Architektur werden Funktionalitäten in einzelne Dienste zerlegt – im Falle eines Webshops wie otto.de zum Beispiel
der Warenkorb,
die Artikeldetails,
die Bewerten-Funktion oder
die Navigation.
In der Regel werden die Microservices zentral aus dem Backend über ein API-Gateway fürs Frontend bereitgestellt, wo sie dann gebaut und umgesetzt werden müssen. Für den Entwickler Matthias findet an dieser Stelle einen Bruch im Microservice-Konzept statt, denn so werden die Komponenten nicht von A bis Z durch ein Team entwickelt. Bei OTTO ist das anders. Um die Abhängigkeit der Microservices gegenüber dem Frontend aufzulösen, haben die Entwickler:innen "vertikale Schnitte" eingeführt.
"Vertikale Schnitte": Lifecycle-Entwicklung für jeden Microservice
Die einzelnen Services werden Teams ("Vertikalen") zugeordnet. Jedes Team ist für einen Themenkomplex verantwortlich: Das Team “Suche” baut alles, was mit der Suche zu tun hat, das Team "Artikel" stellt komplett die Artikelseiten dar usw.
Bei der technologischen Ausstattung haben die Teams freie Wahl. Sie nutzen die Programmiersprachen, Frameworks und Tools, die sie am besten ans Ziel bringen. Zwischen den Vertikalen gibt es eine lose Kopplung. Wiederkehrende Elemente wie der Warenkorb bestehen aus einzelnen HTML-Fragmenten, die jedes Team separat bereitstellt, und zwar via Frontend-Integration.
Micro Frontends durch Transklusion
Mit der Frontend-Integration bringt OTTO das Konzept der Microservices in die Frontend-Welt. Auf diese Weise entstehen viele unabhängige kleine Services, die durchgehend von einem Team entwickelt werden. Die Vorteile dieser Micro Frontends:
Weil ein Team ein komplettes Feature entwickelt, ist es “näher dran” und kann schneller und zielgerichteter eingreifen, falls etwas hakt.
Die Services können unabhängig voneinander bereitgestellt und deployed werden.
Die Website wird resilient, die Ausfallsicherheit verbessert – wenn ein Micro Frontend nicht erreichbar ist, funktioniert der Rest mit einem kleinen Implementierungsaufwand trotzdem, anders als bei einer Single Page Application, wo ein JavaScript-Fehler die ganze Website lahmlegen kann.
Um Inhalte in die Seite zu integrieren, arbeitet OTTO bei der Frontend-Integration mit drei verschiedenen Transklusionsverfahren:
Mit "ESI" oder Edge Side Includes sorgt ein zentraler Edge-Server dafür, dass die unter verschiedenen Pfaden abgelegten Funktionalitäten zum Zeitpunkt einer Anfrage als gesamtes HTML an den User oder die Userin zurückgespielt werden. Diese:r sieht gar nicht, dass die Komponenten von verschiedenen Teams kommen.
Durch Application Side Includes bekommen die Teams serverseitig mehr Kontrolle. Matthias’ Team arbeitet zum Beispiel mit Spring, in dem er eigene Transklusionsmechanismen festlegen kann, die zum Tragen kommen, wenn ein Service nicht antwortet. Dann wird etwa ein Fallback ausgespielt oder der Service für ein paar Minuten “ausgehängt”.
Als dritte Includes spielen die Client Side Includes eine wichtige Rolle für die Frontend-Integration: Im Startseiten-HTML wird eine JavaScript-Datei mit dem Aufruf zusätzlicher Module mitgegeben, die sich erst im Browser der Nutzenden nachladen. Denn gerade auf der Startseite gehst Du oft direkt zur Suche über, da braucht der Server nicht mit dem Laden der Elemente "below the fold" belastet zu werden. Stattdessen nutzen die Includes die Rechenressourcen der Besuchenden und laden die Inhalte bedarfsgerecht.
Das Geheimnis der Einheitlichkeit
Am Ende seines Vortrages beantwortete Matthias die alles entscheidende Frage: Wie können das Design und die Interaktion von 40+ Teams vereinheitlicht werden? Die Antwort: OTTO hat eine eigene Pattern-Library, ähnlich wie Bootstrap, die als Konsens für alle Teams fungiert. Das User Interface ist auf dieser Basis aufgesetzt und schafft für die Nutzer eine einheitliche Website. Anstatt großer Frameworks kommen für die Micro Frontends plain Java und die besagte Library zum Einsatz.
Danke für diesen spannenden Einblick, lieber Matthias!
- 02:06 – Microservices in der Praxis
- 04:40 – "Vertikale Schnitte" bei otto.de
- 06:51 – Frontend-Integration
- 09:09 – Transklusionsverfahren: So funktioniert es technisch
- 16:32 – Design und Interaktion
- 17:41 – Userfragen
