Für große Website-Projekte wird eine Seite häufig in Micro-Services unterteilt. Das bedeutet, dass der wachsende Backend-Code in Teilbereiche gegliedert wird und einzelne Teams für einen dieser Bereiche zuständig sind. Dabei werden jedoch meist monolithe Frontends erstellt. Der große Unterschied zwischen Monolithen und Micro-Frontends ist, dass bei ersterem der Frontend-Developer das gesamte Erscheinungsbild der Webseite erstellt. Bei Micro-Frontends werden unterschiedliche Bestandteile der Seite von verschiedenen Teams entwickelt.

Gerade bei kleineren Projekten ist der Querschnitt einer Seite – bildlich gesprochen – waagrecht. Damit ist gemeint, dass das Layout der gesamte Seite in einem großen Projekt erarbeitet wird, darunter folgen die API-Gateways und danach das Backend, welches oft unterteilt wird in Micro-Services. Diese Struktur sieht bei Micro-Frontends anders aus, sie ist vertikal. Ein Team von Frontend-, Gateway- und Backendentwicklern kümmert sich um einen kleinen Teil einer Website – sowohl die Websiteprogrammierung, als auch die APIs und das Design selbst werden ausgearbeitet.

Durch diese Arbeitsteilung über das gesamte Projekt hinweg soll der Workflow verbessert werden. Große Online-Shops, wie zum Beispiel Amazon, agieren so. Um die ganze Thematik zu veranschaulichen hier ein Beispiel:
Ein Shop wird in drei Teilbereichen realisiert, die Suche nach Produkten, den Käufer überzeugen und den Bestellprozess. Ein Team von oben genannten Entwicklern kümmert sich um die Suchfunktion, dies ist für sich eigentlich schon ein Micro-Service, jedoch kommt nun das Micro-Frontend hinzu. Dabei muss der Webdesigner lediglich das Erscheinungsbild für die Suchfunktion und das Raster der Produkte entwerfen. Diese Elemente werden dann mit anderen Teams geteilt und von diesen eingebunden, natürlich auch umgekehrt. Der Backend-Developer muss sich nur mit der Funktionalität der Suche beschäftigen, diesen Baustein stellt er wieder den andren Teams zur Verfügung. Selbiges gilt für die API-Gateways.

Dadurch werden interne Arbeitsschritte beschleunigt und sollte ein Fehler bei der Such-Applikation auftreten, so ist nicht die gesamte Seite davon betroffen – der Bestellprozess funktioniert weiterhin ohne Behinderungen. Der große Nachteil an dieser Methode ist, dass das Design über alle Micro-Services und -Frontends gleichbleibend ist. Um dies zu verwirklichen gibt es verschiedene Möglichkeiten:

  • Verlinkungen
  • Server-Side-Includes (SSI) / Edge-Side-Includes (ESI)
  • auf Browser-Ebene

Bei den Verlinkungen wird vom “Suchen-Team” eine Verlinkung zu einem Blog etabliert, in diesem Blog – welche vom “Überzeugen-Team” erstellt wurde – sind die Produkte und Details dieser zu finden. Von diesen Detailseiten wird dann beispielsweise mittels eines “Kaufen”-Buttons der Bestellvorgang eingeleitet, welcher der Verantwortungsbereich des dritten Teams ist. Dabei sind alle Systeme autark, sprich wenn ein Fehler bei einem Teilbereich auftritt, hat dieser keine Auswirkungen auf die anderen. Um ein Einheitliches Design zu gewährleisten werden Style-Sheets und Pattern Librarbys erstellt, auf welche alle zugreifen.

Bei einer Etablierung des Layouts auf Server-Ebene müssen sich im Vorfeld alle Teams auf eine gleiche Namensgebung und Präfixe für z.B. CSS-Klassen einigen. Zusätzlich wird statt dem Header ein spezieller HTML-Kommentar eingefügt, welcher von einem vorgelagerten Webserver ersetzt wird.

Mittels der Einbindung auf Browser-Ebene kann schneller auf die Eingaben des Nutzers eingegangen werden. Dazu werden von allen Teams eigene HTML-Tags erstellt, liest der Browser einen solchen, ruft er ein damit verknüpftes JavaScript im Header des jeweiligen Webseitenteils auf.

Im Endeffekt erleichtert ein Micro-Frontend und Micro-Backend den Workflow für große Projekte, jedoch muss man sich über den enormen organisatorischen Aufwand und eine große Struktur im Klaren sein.

Den gesamten Artikel finden Sie auf t3n.de.


Diese Beiträgen könnten Sie auch interessieren: Die 10 häufigsten Fehler der Webdesigner und im Webdesign | Nutzerorientierung – Darstellung aus Kundenperspektive