Ein Micro-Frontend ist ein Teil einer großen Weboberfläche, den ein Team eigenständig entwickelt und ausliefert. Der Ansatz überträgt die Idee der Microservices vom Server auf das Frontend und wurde 2016 im Technology Radar von ThoughtWorks bekannt.
- Micro-Frontend
Ein eigenständig entwickelter und ausgelieferter Teil einer Weboberfläche, der mit anderen solchen Teilen eine Anwendung bildet.
Beispiel: „Im Onlineshop ist der Warenkorb ein eigenes Micro-Frontend, das Team Checkout spielt Änderungen unabhängig vom Rest aus.“Verwandt: Microservices, die denselben Gedanken für Serveranwendungen umsetzen.
Wie Micro-Frontends funktionieren
Die Oberfläche wird nach Fachgebieten geschnitten, etwa Suche, Produktseite, Warenkorb und Kundenkonto. Jedes Team baut seinen Teil mit eigenem Code, eigener Pipeline und eigenem Zeitplan.
Zusammengesetzt wird im Browser oder auf dem Server, etwa über Web Components, über Module Federation im Bundler Webpack oder über Server, die Teile verschiedener Herkunft zu einer Seite zusammenfügen.
Wann sich Micro-Frontends lohnen
Bei sehr großen Anwendungen mit vielen Teams, die sich sonst ständig gegenseitig blockieren würden. Große Onlinehändler wie Zalando haben den Ansatz bekannt gemacht.
Ein Nebeneffekt: Teile lassen sich nach und nach auf neue Technik umstellen, ohne die ganze Anwendung auf einmal anzufassen.
Was Micro-Frontends kosten
Abstimmung und Ladezeit. Wenn jedes Team eigene Bibliotheken ausliefert, lädt der Browser im schlimmsten Fall React dreimal. Gestaltung und Bedienung müssen über ein gemeinsames Design System zusammengehalten werden, sonst wirkt die Seite wie aus mehreren Websites zusammengeklebt.
Für eine Unternehmenswebsite oder einen mittelgroßen Shop ist das Muster fast immer zu groß.
Im Kleinen begegnet dir der Gedanke trotzdem: Ein eingebettetes Widget eines Drittanbieters, etwa ein Buchungskalender auf der eigenen Website, ist ebenfalls ein Teil, den ein fremdes Team unabhängig ausliefert.