Microfrontends
.png?lang=de)
Microfrontends (auch Micro Frontends oder Micro Frontend Architektur) sind ein Architekturmuster der Webentwicklung, bei dem eine Webanwendung in mehrere voneinander unabhängige, eigenständig entwickel- und deploybare Module gegliedert wird. Das Konzept überträgt die Grundidee der Microservices auf die Frontend-Seite, um Skalierbarkeit, Wartbarkeit und Teamautonomie zu fördern.[1][2]
Problemstellung und Zielsetzung
[Bearbeiten | Quelltext bearbeiten]Im Bereich der Webentwicklung lösen sich die Grenzen zwischen Desktopanwendung, Mobile Apps und Websites zunehmend auf, und die Codebasis von Single-Page-Webanwendungen kann durch eine Vielzahl an Funktionalitäten stark anwachsen. Für ein einzelnes Entwicklerteam kann die kognitive Belastung dabei sehr groß werden, wodurch es gegebenenfalls an Effizienz verliert und vermehrt Programmfehler produziert.[3.1] Möchte man mehr Features in kürzerer Zeit von mehreren Teams parallel integrieren, allgemein neue Funktionen in gewachsenen Anwendungen ergänzen oder Teile bestehender Webanwendungen durch eine modernere oder bessere Implementierung ersetzen, dann ist dies mit einer rein monolithischen Softwarearchitektur oft nicht ohne Weiteres möglich.[2][4.1]
Nach dem Prinzip Teile und Herrsche versucht die Microfrontend Architektur die Komplexität durch Modularisierung in vertikal geschnittene Anwendungskontexte oder Fragmente wie Web Components zu reduzieren. Dadurch wird es möglich, dass Teams mit einem abgegrenzten Verantwortungsbereich unter Verwendung unterschiedlicher Technologien mit geringem Abstimmungsaufwand an einem Produkt arbeiten können.[5] Hierbei kann die Organisationsstruktur größerer Unternehmen entsprechend an dieser Architektur ausgerichtet werden und dadurch die Time-to-Market reduziert werden: Durch die Isolation einzelner Funktionalitäten entstehen robustere Lösungen, welche den Onboardingprozess verkürzen und so wiederum die Projektplanung flexibler machen.[3.2]
Technische Umsetzung
[Bearbeiten | Quelltext bearbeiten]Umsetzen lässt sich die Microfrontend Architektur auf verschiedene Weise: als Teil des Erstellungsprozesses mit einem Bundler wie Webpack unter Verwendung von Module Federation, während der Laufzeit clientseitig durch das Einbinden in iframes innerhalb von einer umschließenden Webanwendung, dem Laden und Einbinden von Web Components oder direkt per JavaScript oder serverseitig über Server Side Includes, der Komposition von Templates oder Node.js Bibliotheken wie Tailor.[2][6]
Der erste Ansatz ermöglicht keine separaten Auslieferungen einzelner Anwendungsteile, da die gesamte Webanwendung erstellt wird. Bei den anderen Ansätzen liegt diese Einschränkung nicht vor, allerdings muss die Navigation entsprechend konzipiert werden: In eine umschließende Single-Page-Webanwendung wird in der Regel ein Routing-Plug-in eingebunden, was das Wechseln zwischen den verschiedenen iframes ermöglicht. Serverseitig werden die verschiedenen Teile als neue Seite geladen.[6]
Herausforderungen
[Bearbeiten | Quelltext bearbeiten]Ein Endbenutzer soll von der Zerlegung in kleinere Einheiten nichts mitbekommen. Um eine möglichst einheitliche User Experience zu erzielen, kann eine gemeinsame Bibliothek an Steuerelementen und Vorgaben in einem Design System oder Styleguide verwendet werden. Je unterschiedlicher der Ansatz einzelner Anwendungsteile, desto mehr Abstimmungsaufwand bei der Entwicklung entsteht.[3.3]
Durch die Einbindung von Anwendungsteilen über iframes mit vollständig isoliertem Kontext ist es möglich, verschiedene Webframeworks oder Komponentenbibliotheken, auch in unterschiedlichen Versionen, parallel zu verwenden. Dieser Ansatz erhöht jedoch in der Regel die Downloadgröße und erfordert daher eine individuelle Bewertung der Auswirkungen auf Ladezeit und Performance.[1][2]
Wenn die umschließende Single-Page-Anwendung Teile ihres Zustandes an eine eingebettete Anwendung übergeben muss, ist eine Kommunikation zwischen den einzelnen Anwendungen erforderlich. Dies lässt sich über window.postMessage() oder bei gleichem Hostnamen per Custom Events in einem Webbrowser lösen, sorgt aber dafür, dass die verschiedenen Teams sich wieder auf einen zusätzlichen Contract verständigen müssen.[3.4][2]
Weblinks
[Bearbeiten | Quelltext bearbeiten]- Awesome Micro-Frontends auf GitHub (englisch) - kuratierte Liste rund um Microfrontends
Einzelnachweise
[Bearbeiten | Quelltext bearbeiten]- ↑ a b Nicolai Wolko: Warum viele Teams mit Monolithen besser fahren als mit Micro-Frontends. In: heise.de. Heise Medien GmbH & Co. KG, 10. September 2025, abgerufen am 5. Oktober 2025.
- ↑ a b c d e Cam Jackson: Micro Frontends. In: martinfowler.com. Martin Fowler, 19. Juni 2019, abgerufen am 5. Oktober 2025 (englisch).
- ↑ Florian Rappl: The the art of micro frontends: build highly scalable, distributed web applications with multiple teams. 2. Auflage. Packt Publishing, 2024, ISBN 978-1-83546-637-7 (englisch).
- ↑ Michael Geers: Micro Frontends in Action. Manning Publications Co. LLC, New York 2020, ISBN 978-1-63835-539-7 (englisch).
- ↑ S. ix, Preface
- ↑ Nicolai Wolko: Seite 2: Entkoppeln, wo es hilft – konsolidieren, wo es nützt. In: heise.de. Heise Medien GmbH & Co. KG, 10. September 2025, abgerufen am 5. Oktober 2025.
- ↑ a b Sven Kölpin: EnterpriseTales: Micro Frontend Frameworks. In: entwickler.de. Software & Support Media GmbH, 1. November 2019, abgerufen am 5. Oktober 2025.