verticals-headline

Micro Frontends

Von am 21.02.2019

Ende Januar besuchten wir – die Masterklasse Mobile – die Code Days in München. Eine Konferenz über Software- und Webentwicklung, bei der man bei über 120 Vorträgen und Workshops drei Tage lang viel Neues lernen konnte. 
Neben den Buzzwords AI, Machine Learning und Dev Ops drehte sich ein Großteil der Veranstaltung um Micoservices bzw. Micro Frontends.

Die Idee hinter dem Begriff Micro Frontend ist es, eine Webseite (oder WebApp) in unabhängige Bereiche aufzuteilen, die jeweils von einem eigenem Team entwickelt und betreut werden. Diese Teams bestehen aus Mitarbeitern aus allen Bereichen, was es ihnen ermöglicht, ihre Funktionalität end-to-end zu entwickeln – also vom User Interface bis hin zur Datenbank.

Grundlegende Ideen Micro Frontend

  • Technologisch unabhängig: Jedes Team kann individuell für sich entscheiden, wann und ob sie ihren Stack ändern oder upgraden, ohne die Funktionalität der anderen Teams zu beeinflussen.
  • Isolierter Team Code: Die Apps sollten vollständig selbstständig sein => kein Sharing von Runtime, Variablen oder States. In Fällen in denen eine vollständige Isolation nicht möglicht ist, sollten sich die Teams auf naming conventions einigen.
  • Bevorzugen von nativen Browserfeatures gegenüber Custom APIs wenn möglich.
  • WebApp sollte möglichst belastbar sein. Features möglichst auch sinnvoll wenn Javascript nicht funktioniert.
Source: https://micro-frontends.org

Dieses GIF zeigt eine simple Beispielanwendung. Sie besteht grundlegend aus den zwei Funktionalitäten: (1) Auswahl des Traktormodells ändert Image, Preis sowie vorgeschlagene Produkte. (2) Buy Button, der gleichzeitig auch den Gegenstand im Warenkorb platziert.

Auf folgender Grafik ist zu erkennen wie diese Funktionalitäten entsprechend in Micro Apps bzw. Teams aufgeteilt werden könnten. Team Checkout ist zuständig für den Bestellungsprozess; Team Inspire für die Vorschläge und Team Product ist zuständig für den Gesamtaufbau des Shops. Alle diese Teile funktionieren völlig unabhängig, was es auch problemlos ermöglicht, verschiedenste Frameworks zu verwenden.

Source: https://micro-frontends.org

Aktuell wird dieses Konzept beispielsweise von dem Onlineshop Zalando erfolgreich verwendet. Ob es in Zukunft jedoch Best Practice wird, bleibt abzuwarten. Fest steht aber, dass das Thema Microservices aktuell in aller Munde ist, und somit wohl bald an Bedeutung gewinnen wird.

Beitrag kommentieren

(*) Pflichtfeld