Was sind Micro Frontends und warum sprechen gerade (wieder) alle darĂĽber?
Ăśberblick
Bessere Zusammenarbeit
Micro Frontends ermöglichen die Aufteilung einer Web-Anwendung in kleinere, unabhängige Bestandteile, die von verschiedenen Teams entwickelt, implementiert und gewartet werden können. Dies fördert eine effizientere Zusammenarbeit und erleichtert die Handhabung komplexer Projekte.
Optimale Wartung und Flexibilität
Dank der modularen Struktur von Micro Frontends können einzelne Elemente unabhängig voneinander angepasst werden, was für eine hohe Flexibilität und Anpassungsfähigkeit an sich ändernde Anforderungen sorgt. So beeinträchtigen Fehler in einem Modul nicht gleich das gesamte System.
Skalierbarkeit und Wachstum
Neue Funktionen oder Module können bei Bedarf nahtlos hinzugefügt werden, ohne das komplette System umzukrempeln. Dies ermöglicht ein organisches Wachstum bei steigenden Nutzerzahlen und erhöhtem Traffic.
Verbesserte User Experience
Durch den selektiven Abruf von Modulen können Micro Frontends die Ladezeit einer Seite verkürzen und die Performance insgesamt optimieren. Dies führt zu einer besseren User Experience und erhöht die Zufriedenheit der Benutzer:innen.
Wenn Sie sich mit dem Aufbau oder der Modernisierung Ihrer Web-Anwendung beschäftigen, ist es gut möglich, dass Ihnen der Begriff Micro Frontends schon einmal begegnet ist. Unter Softwareentwickler:innen ist die gar nicht mehr so neuartige Web-Architektur dank ihrer Vorteile durchaus beliebt und wird immer häufiger angewendet.
Um die Frage zu beantworten, ob Micro Frontends der neue Standard für die Entwicklung von Web-Frontends werden, Valudio die Vorteile und Nachteile für Sie zusammengefasst.
Warum Micro Frontends?
Die gemeinsame Arbeit unterschiedlicher Teams an der Codebase einer Web-Anwendung lässt sich immer seltener praktizieren: Ab einer gewissen Größe wird eine Software zu komplex und der Überblick auf das Projekt geht verloren. Änderungen wollen dann langfristig geplant werden und während der Umsetzung müssen Arbeitsabläufe an anderer Stelle häufig pausieren. In einem solchen Szenario, in dem das gesamte System in der Lage sein muss, diese Änderungen zu akzeptieren, treten bei der Implementierung, anderen Aktualisierungen und verschiedenen Anwendungsfällen schneller Fehler auf.
Entwicklerteams setzen deshalb gerne auf die sog. Micro Frontend Architecture:
Micro Frontends sind Benutzeroberflächen, die sich aus einzelnen, isolierten Bestandteilen zusammensetzen. Sie können unabhängig voneinander entwickelt, implementiert, gewartet und verändert werden. Das Besondere dabei ist, dass sowohl Backend als auch Frontend modular aufgebaut sind.
Micro Frontends verfolgen einen ähnlichen Ansatz wie die Microservice-Architektur: Die Idee hinter Microservices ist, eine große Aufgabe in mehrere Teilaufgaben zu zerlegen und sie im Einzelnen zu bearbeiten. Bei dieser Modularisierung werden die Bereiche in einzelne, unabhängige Systeme geteilt, die durch Schnittstellen miteinander verbunden sind.
Ein nicht modularisiertes System ist ein Monolith. Dabei handelt es sich um eine sinnvolle Methode, sofern der Umfang des Projekts überschaubar ist. Bei steigenden Nutzerzahlen, muss die Software jedoch angepasst werden, um entsprechend „mitwachsen“ zu können.
Micro Frontend vs. Microservices
Microservices ist ein Ansatz, der im Backend einer Web-Anwendung genutzt wird. In 2016 richtete man einen ähnlichen Ansatz erstmals für das Frontend ein, um die Vorteile der getrennten Systeme auch dort nutzen zu können. Heute ist die ursprünglich für das Backend entwickelte Architektur aus den Frontends komplexer Anwendungen nicht mehr wegzudenken.
Micro-Services sind momentan vor allem im Backend ein Thema. Wenn wir den Ansatz in das Frontend portieren, wird daraus Micro-Frontends.
Jedes Modul beim Micro-Frontend-Development wird von einem funktionsübergreifenden Team ganzheitlich betreut, von der Datenbank bis zur Benutzeroberfläche.
Für einen Online-Shop bietet sich beispielsweise an, eigenständige Teams für die Module wie Inspire, Product, Search und Check-out zu bilden.
Die Idee ist jedoch nicht neu. Sie hat viel mit dem Konzept der „Self-contained Systems“ gemein. In der Vergangenheit wurden solche Ansätze unter dem Namen Frontend-Integration für vertikalisierte Systeme geführt. Als etwas weniger sperriger Begriff hat sich hierfür schließlich Micro Frontends etabliert.
Zu den wichtigsten Technologien, die Micro Frontends ermöglichen, gehört die Module Federation, die die Integration dieser unabhängigen Module sowohl bei der Micro-Frontend-Entwicklung als auch während der Ausführung erleichtert. Durch die Module Federation lassen sich Webkomponenten auf Abruf laden, was die anfängliche Ladezeit der Seite verkürzt und die User Experience insgesamt verbessert. Eine solche Laufzeitintegration ist primär für umfangreiche Anwendungen mit komplexen Funktionssätzen von Vorteil, da sie das selektive Laden von Modulen nur bei Bedarf ermöglicht und so unnötigen Mehraufwand reduziert. Allerdings kann es sich als schwieriges Unterfangen erweisen, eine nahtlose End-to-End-Integration zu realisieren und ein reibungsloses Benutzererlebnis über verschiedene Module hinweg zu gewährleisten.
Micro Frontends: Das sind die Vorteile
- Einfache Anpassung: Im Gegensatz zu einem Monolithen können die einzelnen Micro Frontends unabhängig voneinander verändert werden.
- Robustheit: Tritt ein Fehler innerhalb eines Moduls auf, ist es sehr wahrscheinlich, dass andere Module nicht betroffen sind. Da sie unabhängig voneinander funktionieren, besteht die Möglichkeit, das fehlerhafte Modul zu reparieren oder eine kurzfristige Alternative anzubieten.
- Einfachheit: Die Komplexität eines kleinen Moduls ist deutlich geringer als die eines Monolithen, der den gesamten Funktionsumfang einer Anwendung umfasst. Entwickler:innen können so die einzelnen Module besser überblicken, als es bei einem großen zusammenhängenden Konstrukt möglich ist.
- Flexibilität: In einer Micro-Frontend-Architektur lässt sich das jeweils beste Werkzeug für eine Aufgabe auswählen. Da die Module unabhängig voneinander arbeiten, lassen sie sich parallel in JavaScript, CSS, Go etc. umsetzen.
Die Nachteile einer Micro-Frontend-Architektur sind der Grund, weshalb sie sich nicht für jedes Projekt eignen: Durch den größeren Betriebsaufwand und die erhöhte Komplexität (Infrastruktur, Kommunikation etc.) lohnt sich der Ansatz für kleinere Projekte nicht.
Einsatz von Web Components in Micro Frontends
Ein wesentlicher Bestandteil der Micro Frontend-Architektur sind Web Components, bei denen es sich um Code-Blöcke handelt, die nahtlos in verschiedene JavaScript-Frameworks wie Vue oder React integriert werden können. Diese Kompatibilität erlaubt es, die Vorteile von Web Components mit den spezifischen Stärken der jeweiligen Frameworks zu kombinieren, was die Entwicklung von benutzerfreundlichen und leistungsfähigen User Interfaces erleichtert.
Web Components ermöglichen es Entwickler:innen, wiederverwendbare Custom Elements zu erstellen, die als unabhängige HTML-Tags in verschiedenen Projekten eingesetzt werden können. Diese Methode unterstützt die Isolation und erneute Verwendung von Code, was der Skalierbarkeit in Micro Frontends zugutekommt.
Welche Frontend-Frameworks sind besonders beliebt?
Angular Micro Frontends
Angular ist ein Frontend-Webapplikations-Framework, also eine Software für die Entwicklung von Web-Anwendungen, bei der Web Components zum Einsatz kommen. Die Micro-Frontend-Architektur ist besonders kompatibel mit Angular und wird deshalb von vielen Entwickler:innen für die Implementierung in die Micro Frontends bevorzugt.
Auch Angular arbeitet mit Bausteinen, also den oben erwähnten Modulen: Ein jedes Modul umfasst eine Funktion, ein Set Komponenten oder eine Seite. Micro Frontends lassen sich deshalb hervorragend als Angular Micro Frontends entwickeln.
Micro Frontends React
Ein weiteres beliebtes Micro Frontends Framework ist React. Im Grunde funktioniert React nach demselben Prinzip, nämlich komponentenbasiert: Es können eigenständige Komponenten (Module) erstellt und dann zu komplexen User Interfaces zusammengesetzt werden.
Mehr zur Funktionsweise von React haben wir hier für Sie zusammengefasst.
Sie möchten mehr über Micro Frontends erfahren?
Hier sind unsere Buchtipps für Sie:
Verwandte blogs
