Skip to main content
let's make IT happen

Micro Frontends

Was aber ist mit Frontend? Muss es immer noch ein monolitischer Code sein, der all die «schön geschnittenen» Backends anspricht? Soll bei jeder Änderung des Backends auch ein komplettes Frontend neu ausgeliefert werden? In diesem Bereich gibt es eine innovative Lösung: Micro Frontends.

Worum geht es beim Micro Frontends? Genau wie bei Microservices wird das Frontend in mehrere Einzelteile (sog. Micro Frontends) aufgespaltet. Die Teile können dann unabhängig voneinander in verschiedenen Teams mit verschiedenen Frameworks entwickelt werden. Genau wie bei Microservices sollten die Micro Frontends unabhängig voneinander sein. Die nötige Kommunikation dazwischen, kann mittels Eventmechanismen (z.B. postal.js) ermöglicht werden. Die Events können sowohl bei User-Interaktionen als auch bei der Zustandsänderung von Teilapplikationen produziert werden.  Für den Datenaustausch zwischen Teilapplikationen kann auch Web-Storage benutzt werden. Jedoch gib es auch die Möglichkeit, die nötigen Daten per Request vom Webserver zu holen.

Für das Zusammensetzen der verschiedenen Micro Frontends können drei verschiedene Strategien angewendet werden: Client-side, Server-side oder Edge-Side.

Client-side heisst, dass der Client alle Teilapplikationen kennt und diese gemeinsam einsetzen kann. Dabei kann auch eine Technik wie Application Shell angewendet werden. Wer schon von fertigen Lösungen profitieren will, kann auf das Framework Single-Spa zurückgreifen.

Bei Edge-Side wird die Technik Edge Sides Includes eingesetzt. In Grunde genommen wird das Zusammensetzen mittels kleiner Erweiterungen des HMTL Codes mit den ESI Tags realisiert. Beim Server-Side passiert das Zusammensetzen schon im Server. Auch hier kann man schon von vorhandenen Lösungen profitieren: OpenComponents, Piral oder Tailor .

Wie man sehen kann, bewegt sich viel in der Frontend-Entwicklung. Der Einsatz des Micro Frontends löst nicht alle Probleme und bringt auch gewisse Komplexität mit sich. Deswegen muss man bei der Auswahl von Architekturkonzepten darauf achten, welche Aufgaben man umsetzen möchte.

Quellen

https://www.infoq.com/news/2020/01/strategies-micro-frontends/

https://micro-frontends.org/

https://www.thoughtworks.com/

»

Miroslav Trisc, Senior Software Entwickler, INTEGRATE Informatik AG