Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 51

Micro-Frontends: Große Webprojekte modularer entwickeln

(Shutterstock / Aleksandar Karanov)

Microservices sind ein beliebtes Konzept, um wachsenden Backend-Code in gut ­wart­­bare Teile zu zerlegen. Die zugrunde liegenden Ideen lassen sich auch auf das Frontend ­ausdehnen – für schnellere Softwareentwicklung und bessere Kundenorientierung. ­Die organisatorischen Anforderungen sind allerdings komplex.

Frontend-Entwicklung umfasst heute eine große Bandbreite an verschiedensten Bereichen. Neben reiner CSS-Gestaltung spielen Themen wie unterschiedliche Endgeräte, schnelles Ladeverhalten, hohe Interaktivität, Barrierefreiheit, Testbarkeit und Sicherheit eine immer wichtigere Rolle. Um diesen wachsenden Anforderungen gerecht zu werden, hat sich in den meisten Teams die Abgrenzung zwischen Frontend- und Backend-Entwicklern gebildet. Das Idealbild des Fullstack-Developers, der in der Lage ist, auf allen Ebenen der Software zu interagieren, scheint immer schwerer erreichbar zu sein. Javascript-Frameworks wie React, Vue.js und Angular schaffen Abhilfe. Sie bieten dem Frontend-Entwickler Lösungen für viele der beschriebenen Anforderungen. Zudem bringen sie meist ein eigenes Komponentensystem mit, welches Wiederverwendbarkeit gewährleistet und die Organisation des Quellcodes deutlich vereinfacht.

Zu groß für ein Team

Wächst ein Projekt und damit auch das Team, ist irgendwann der Punkt erreicht, an dem die Weiterentwicklung der Software zäh und anstrengend wird. Änderungen an einer Stelle haben unerwartete Nebenwirkungen an anderer. Niemand hat mehr einen Gesamtüberblick über das Projekt. Technologische Erneuerung wie etwa das Wechseln einer zentralen Bibliothek oder das Upgrade eines Frameworks müssen von langer Hand geplant werden und bergen oft große Risiken.

Hier kommen Microservices ins Spiel. Im Gegensatz zu Monolithen wird Software in kleine, gut handhabbare und eigenständige Services zerlegt. Jeder Service hat eine spezielle Aufgabe und ist einem Entwicklungsteam zugeordnet. Oft ist dieses Zerlegen jedoch nur auf den Backend-Code begrenzt, das Frontend bleibt als Monolith oberhalb der Services erhalten. Um die Kommunikation zu erleichtern, wird zwischen Frontend und Backend gerne noch ein API-Gateway-Layer eingezogen. Er aggregiert die benötigten Daten von den jeweiligen Services und stellt sie dem Frontend für die Anzeige zur Verfügung.

Bildet das Frontend eine mono­lithische Schicht oberhalb der ­Microservices im Backend, sind einzelne Entwicklungsschritte oft mit hohem Abstimmungsaufwand zwischen den Teams verbunden. (Grafik: Michael Geers, Icons by Freepik from flaticon.com)

Diese Architektur ist momentan sehr populär, bringt aber einige Probleme mit sich: So gibt es nun ein Skalierungskonzept für das Backend, das Frontend bleibt aber weiterhin ein Monolith. Javascript-Frameworks mit eigenem Komponentenmodell verstärken diese monolithische Struktur noch. Am einfachsten entwickelt es sich, wenn alle Teile der Seite mit dem gleichen Framework betrieben werden. Doch die Frontend-Welt bewegt sich schnell. Das Versionsupdate eines Frameworks wird schnell zu einer großen und unangenehmen Aufgabe, wenn die Beteiligten keinen Überblick über die gesamte Applikation haben – von großen Versionssprüngen wie von „Angular 1“ auf „Angular 2“ ganz abgesehen.

Microservices auch­ im Frontend einsetzen?

Der Ansatz, der sich jetzt förmlich aufdrängt, ist die Umsetzung der Microservice-Idee auch im Frontend. Anstatt einer ­großen Single-Page-Applikation baut man mehrere unabhängige Teilapplikationen, die miteinander kommunizieren. Diese sind dann deutlich einfacher zu verstehen. Der Einsatz einer neuen Technologie lässt sich in einem kleineren Rahmen testen. Auch die technische Erneuerung oder Reimplementierung einer Teilapplikation ist so eine leichter umzusetzende Aufgabe als die Big-Bang-Migration der ganzen Site.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden