job I/O – IoT & Embedded Systems: Triff 20 IT-Arbeitgeber live am 21.10.2021 14:00 – 18:00. Jetzt kostenlos anmelden!
Unternehmen suchen nach Dir. LASS DICH JETZT FINDEN!
job I/O – Virtual Job-Event am 21.10.: Jetzt kostenlos anmelden!
 

Micro Frontends: Deep Dive mit Matthias Geißendörfer

Wie 41+ Teams bei OTTO eine einheitliche Website entwickeln

Von Bylle Bauer

 

 

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

Matthias Geißendörfer (Software Developer im E-Commerce Bereich bei OTTO) absolvierte sein Duales Studium an der Nordakademie in Elmshorn in Kooperation mit OTTO. Nach seinem Studium stieg er Anfang 2019 als Softwareentwickler bei OTTO ein und ist seitdem für die Weiterentwicklung des OTTO-Webshops in der Domäne „Entdecken“ mit verantwortlich. Technologisch arbeitet Matthias hauptsächlich mit Java, Kotlin und Spring, sowie dem Cloud-Dienstleister AWS.

Unternehmen

Egal ob Schuhe, Kühlschränke oder Fahrräder: Bei OTTO findest Du alles – und vielleicht auch Deinen nächsten IT-Job! Mit der Weiterentwicklung zur Plattform ist OTTO auf dem Weg vom Katalogversand zu einem der erfolgreichsten E-Commerce-Unternehmen Europas. Hinter den verschiedenen Services von Otto stecken dabei natürlich jede Menge IT-Expert:innen, die in über 40 Teams eine einheitliche Website entwickeln.
Experten für IT-Sicherheit sind gefragt. Dementsprechend hast Du in so gut wie allen Branchen die Chance als IT-Sicherheitsberater Fuß zu fassen. Gerade Banken, Behörden oder Großunternehmen verwalten riesige Mengen hochsensibler Daten.Diese gilt es zu schützen. Während Du bei größeren Unternehmen und Institutionen die Chance hast, dich auf ein bestimmtes Gebiet der IT-Sicherheit zu spezialisieren, agierst Du in mittelständischen oder kleineren Unternehmen eher als Generalist.

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!

Der Deep Dive IM ÜBERBLICK:
  • 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
 

Arbeitgeber bewerben sich bei Dir!
Ganz einfach:

Anonymes Profil anlegen
! Unternehmens- anfragen erhalten
C V Kontaktdaten freigeben & durchstarten!

Arbeitgeber bewerben sich bei Dir!
So funktioniert's:

Anonymes Profil anlegen
! Unternehmens- anfragen erhalten
C V Kontaktdaten freigeben & durchstarten!
Es ist kostenlos
Kostenlos registrieren