Was ist ein Micro Frontend?
Das Micro Frontend ist ein Design Pattern, das die Stärken und Vorteile von Microservices nutzt um die User Experience eines Web-Frontends zu verbessern.
Gleichzeitig ist das Micro Frontend robuster, leicht skalierbar, flexibel und einfach zu warten.
Entwicklung des Micro-Frontend Trends
Das Micro-Frontend erweitert die Konzepte von Microservices mit dem Fokus auf Internet-Anwendungen als Web-Frontends und WebApps.
Das Micro-Frontend-Pattern zielt auf eine leistungsstarke Browser-Anwendung mit überzeugenden Funktionen, die auf einer Microservice-Architektur aufbaut.
Solche Micro Frontends werden auch Single Page App genannt.
Warum gibt es Micro Frontends?
Typischerweise wächst ein Web-Frontend als klassischer Monolith im Laufe der Entwicklungszeit massiv an. Dabei werden solche Web-Monolithen mit jeder Frontend-Erweiterung immer schwerer zu warten und für die Anwender langsamer. Für den User macht sich das in trägen Ladezeiten und oft unübersichtlichen Funktionen bemerkbar.
Die so historisch gewachsene Frontend-Schicht, die oft von einem separaten Frontend-Team entwickelt wird, ist damit immer schwieriger anzupassen und zu warten. Eine solche Webanwendung nennen Entwickler einen Frontend-Monolithen.
Kategorisierung des Micro-Frontends Konzepts
Das „Micro Frontend“ bezieht sich auf einen Ansatz in der Softwarearchitektur, der dazu dient, die Frontend-Architektur einer Web-Anwendung in kleinere, unabhängige Teile zu zerlegen, ähnlich wie Microservices dies für den Backend-Bereich tun.
Dies liegt daran, dass das Micro Frontend-Konzept direkt mit der Struktur und dem Design von Softwarelösungen zusammenhängt, wodurch es direkt in den Bereich der Softwarearchitektur fällt.
Konzept & Idee des Microfrontends
Hinter den für das Web optimierten Web-Microservices steckt ein bewährtes Konzept guter Software-Architektur:
Zerlege ein großes Problem in mehrere Teilprobleme. Bewältige diese Teilprobleme getrennt voneinander.
Dieser Software-Architekturansatz geht noch einen Schritt weiter als die blosse Modularisierung einer Software-Applikationen.
Funktionale Trennung und schaffen unabhängiger Komponenten
Es erfolgt nicht nur eine fachliche Zerlegung innerhalb einer Applikation, sondern auch die an die Backend-Logik der monolithischen Anwendung angebundenen Funktionen werden in einzelne, unabhängige Komponenten geteilt.
APIs verbinden die Microservice-Komponenten
Alle Einzelkomponenten sind dann durch funktionale Schnittstellen – die sogenannten APIs – miteinander verbunden.
Vorteile der Micro-Frontend-Strategie
Die Vorteile für die Microfrontends, die durch eine solche Web-Microservice-Architektur entstehen, sind:
- Einfachheit: Die Komplexität kleiner Services ist deutlich geringer als die einer monolithischen Anwendung, die den gesamten Funktionsumfang abdeckt. Software-Entwickler*innen gewinnen Übersichtlichkeit und bessere Wartbarkeit ihrer Anwendungen. Zudem können die Services unabhängig und von mehreren Teams parallel weiterentwickelt werden .
- Skalierbarkeit: Im Gegensatz zu dem Monolithen lassen sich die einzelnen Microservices unabhängig voneinander skalieren. Steht ein Service unter Last, können in der Cloud automatisch zusätzliche Instanzen hochgefahren werden. Alle übrigen Webservices bleiben von dieser Änderung unberührt.
- Robustheit: Der Ausfall eines Service führt nicht zwangsläufig zum Ausfall des Gesamtsystems. Durch eine saubere Trennung in der Softwarearchitektur, besteht zu jedem Zeitpunkt immer die Möglichkeit einen einzelnen Service zu warten oder Service-Alternativen anzubieten.
- Flexibilität: Mit Microservice-Architekturen kann zudem immer auch das jeweils beste Werkzeug für eine Aufgabe zum Einsatz kommen. Da die Services unabhängig voneinander sind, ist es jetzt auch möglich unterschiedliche Technologien für unterschiedliche Services zu nutzen. Bietet ein Java-Service für ein Feature, eine Kotlin-Anwendung für einen anderen Service Vorteile, lässt sich genau das mit Microservices sinnvoll umsetzen.
Wie funktionieren Microfrontends?
Microfrontends sind Feature-getrieben. Das heisst, das wir als Software-Entwickler*innen den Schwerpunkt auf die für den Benutzer definierten Elemente legen.
Damit steigt die Interoperabilität der Einzelkomponenten, denn kleinteilige Webkomponenten, sind eine gute Grundlage für die Integration in den Browser. Dazu erstellt jedes Software-Team seine Komponente mit der Technologie seiner Wahl. Die Komponente definiert ein benutzerdefiniertes Element (z. B. ) und stellt seine Funktionen über eine API bereit.
Die DOM-Spezifikation dieses speziellen Elements (Tag-Name, Attribute und Ereignisse) definiert ihre Funktionen somit als öffentliche API für andere Teams.
Dieser Ansatz bietet den enormen Vorteil, dass die Komponente mit all ihrer Funktionalität unabhängig nutzbar ist. Wie die Implementierung der Funktionen im Detail aussieht, braucht das andere Team, das diese API nutzen möchte, nicht zu kennen. Die API muss lediglich in der Lage sein, mit dem DOM oder einer Backend-Komponente zu interagieren.
Verbesserungen durch progressive Erweiterungen, universelles Rendering und flexibles Routing
Unsere so geschaffenen flexiblen API-Services und Web-Frontends bieten weitere Vorteile wie die Option progressiver Erweiterungen, universellem Rendering und flexiblem Routing.
Dazu unterteilen wir eine einzelne Webseite in zwei Hauptbereiche. Mit dem Design der Seitenkomposition wird ermittelt wie eine Seite bestmöglich aus einzelnen Komponenten zusammengesetzt werden kann. Produkt Owner dieser Feature-Komponenten können wiederum verschiedene Teams sein. Auch die Backend-Logik lässt sich nach dieser Vorgehensweise kapseln.
Prototyping von Web-Frontends und Microservice Komponenten
Prototyping eignet sich hervorragend um nutzerzentrierte Services zu konzipieren.
Anhand eines Gestaltungs-Prototypen lässt sich ideal das Design und die Usability definieren. Dieser Prototype-Typ wird dann in Sprints mit jeder Iterationsstufe zu einem optimierten Engineering-Prototype weiterentwickelt.
Probier es selbst aus!
Warum nicht direkt loslegen und selbst eine Web-App als Microfrontend gestalten?
Die Vorteile sprechen für sich: Unabhängigkeit in der Entwicklung, bessere Skalierbarkeit und eine robustere Architektur. Nutze die Gelegenheit, mit einer kleinen Funktionalität zu starten und diese in ein Microfrontend zu verwandeln.
So bekommst du ein Gefühl für die Architektur und entdeckst, wie nahtlos verschiedene Komponenten miteinander interagieren können.
Lass deiner Kreativität freien Lauf und sieh, wie leistungsstark und flexibel dein Web-Projekt mit Microfrontends werden kann!
Rock the Prototype Podcast
Der Rock the Prototype Podcast und der Rock the Prototype YouTube-Kanal sind die perfekte Anlaufstelle für alle, die tiefer in die Welt der Softwareentwicklung, des Prototypings und IT-Technologie eintauchen wollen.
🎧 Listen on Spotify: 👉 Spotify Podcast: spoti.fi/3NJwdLJ
🍎 Enjoy on Apple Podcasts: 👉 Apple Podcasts: apple.co/3CpdfTs
Im Podcast erwarten dich spannende Diskussionen und wertvolle Insights zu aktuellen Trends, Tools und Best Practices – ideal, um unterwegs am Ball zu bleiben und frische Perspektiven für eigene Projekte zu gewinnen. Auf dem YouTube-Kanal findest du praxisnahe Tutorials und Schritt-für-Schritt-Anleitungen, die technische Konzepte anschaulich erklären und dir helfen, direkt in die Umsetzung zu gehen.
Rock the Prototype YouTube Channel
🚀 Rock the Prototype ist 👉 Dein Format rund um spannende Themen wie Softwareentwicklung, Prototyping, Softwarearchitektur, Cloud, DevOps & vieles mehr.
📺 👋 Rock the Prototype YouTube Channel 👈 👀
✅ Softwareentwicklung & Prototyping
✅ Programmieren lernen
✅ Software Architektur verstehen
✅ Agile Teamwork
✅ Prototypen gemeinsam erproben
THINK PROTOTYPING – PROTOTYPE DESIGN – PROGRAMMIEREN & DURCHSTARTEN – JETZT MITMACHEN!
Warum es sich lohnt, regelmäßig vorbeizuschauen?
Beide Formate ergänzen sich perfekt: Im Podcast kannst du ganz entspannt Neues lernen und inspirierende Denkanstöße bekommen, während du auf YouTube das Gelernte direkt in Aktion siehst und wertvolle Tipps zur praktischen Anwendung erhältst.
Egal, ob du gerade erst mit der Softwareentwicklung anfängst, Dich für Prototyping, UX Design oder IT Security begeisterst. Wir bieten Dir neue Technologie Trends die wirklich relevant sind – und mit dem Rock the Prototype Format findest du immer relevante Inhalte, um dein Wissen zu erweitern und deine Skills auf das nächste Level zu heben!
