Micro-Frontends mit single-spa: Eine Einführung

In der heutigen schnelllebigen digitalen Welt werden Webanwendungen immer komplexer. Monolithische Architekturen, bei denen die gesamte Anwendung als eine einzige, unteilbare Einheit entwickelt und bereitgestellt wird, stoßen oft an ihre Grenzen. Sie können zu langsamen Entwicklungszyklen, schwieriger Wartung und einem erhöhten Risiko bei der Bereitstellung führen. Doch es gibt eine vielversprechende Lösung, die von der Welt der Microservices inspiriert ist: Micro-Frontends. Diese Architekturphilosophie ermöglicht es Entwicklerteams, Frontend-Anwendungen in kleinere, unabhängige und verwaltbare Teile zu zerlegen. Diese modulare Herangehensweise ebnet den Weg für mehr Agilität, Skalierbarkeit und eine verbesserte Zusammenarbeit zwischen Teams. Im Zentrum dieser Revolution steht oft single-spa, ein leistungsstarkes Framework, das die nahtlose Integration verschiedener Frontend-Technologien in einer einzigen, kohärenten Anwendung ermöglicht.

Was sind Micro-Frontends?

Der Begriff "Micro-Frontends" ist direkt von den "Microservices" im Backend inspiriert. So wie Microservices es ermöglichen, Ihre Backend-Anwendungen in kleinere, spezialisierte Dienste aufzuteilen, erlauben Micro-Frontends die Aufteilung Ihrer Frontend-Anwendung in unabhängige, eigenständige Komponenten. Diese Komponenten können dann separat entwickelt, getestet und bereitgestellt werden. Stellen Sie sich vor, Sie haben eine große E-Commerce-Plattform. Anstatt die gesamte Benutzeroberfläche als eine riesige Anwendung zu entwickeln, könnten Sie Bereiche wie die Produktliste, den Warenkorb und das Benutzerprofil als separate Micro-Frontends behandeln. Jedes dieser Micro-Frontends kann von einem eigenen Team betreut werden, das die volle Kontrolle über seinen Stack und seine Bereitstellungszyklen hat.

Ein entscheidender Vorteil dieser Architektur liegt in der Möglichkeit, verschiedene Frameworks in einer einzigen größeren Anwendung friedlich koexistieren zu lassen. Das bedeutet, dass Sie Teile Ihrer Anwendung in React, andere in Angular oder Vue.js schreiben können, ohne dass es zu Konflikten kommt. Diese Framework-Freiheit ist besonders wertvoll in großen Unternehmen oder bei langfristigen Projekten, wo sich Technologietrends ändern oder verschiedene Teams unterschiedliche Präferenzen haben.

Warum Micro-Frontends nutzen? Die Vorteile auf einen Blick

Die Entscheidung für eine Micro-Frontend-Architektur bringt zahlreiche Vorteile mit sich, die über die reine technische Implementierung hinausgehen und sich direkt auf die Effizienz von Entwicklungsteams auswirken:

• Unabhängige Entwicklung und Bereitstellung: Teams können an ihren jeweiligen Micro-Frontends arbeiten und diese bereitstellen, ohne auf andere Teams warten zu müssen. Dies beschleunigt den gesamten Entwicklungszyklus erheblich.
• Technologieunabhängigkeit: Wie bereits erwähnt, ermöglicht die Architektur die Verwendung unterschiedlicher Frontend-Frameworks und -Bibliotheken nebeneinander. Dies ist ideal, um neue Technologien schrittweise einzuführen oder ältere Teile der Anwendung beizubehalten, ohne das gesamte System migrieren zu müssen.
• Kleinere, überschaubarere Codebasen: Jedes Micro-Frontend hat seine eigene, kleinere Codebasis. Dies erleichtert das Verständnis, die Wartung und das Refactoring des Codes.
• Resilienz: Ein Fehler in einem Micro-Frontend muss nicht zwangsläufig die gesamte Anwendung zum Absturz bringen. Die Isolation der Komponenten kann die Gesamtstabilität erhöhen.
• Skalierbarkeit von Teams: Größere Teams können in kleinere, autonome Gruppen aufgeteilt werden, die jeweils für ein oder mehrere Micro-Frontends verantwortlich sind. Dies fördert Autonomie und Verantwortlichkeit.
• Einfacherer Übergang zu neuen Technologien: Anstatt eine komplette Neuentwicklung (Rewrite) eines Monolithen durchführen zu müssen, können Sie einzelne Micro-Frontends schrittweise auf neue Technologien umstellen.

single-spa: Das Herzstück der Integration

single-spa ist ein JavaScript-Framework, das als Orchestrator für Ihre Micro-Frontends fungiert. Es löst die Herausforderung, verschiedene Anwendungen oder Komponenten in einer Single-Page-Anwendung (SPA) zusammenzuführen. single-spa kümmert sich um das Laden, Aktivieren, Deaktivieren und Entladen der einzelnen Anwendungen, basierend auf dem Zustand der Hauptanwendung (z.B. der URL-Pfad).

Die Funktionsweise ist elegant: single-spa ermöglicht es Ihnen, Anwendungen lazy zu laden. Das bedeutet, dass eine Anwendung erst dann geladen wird, wenn sie tatsächlich benötigt wird. Dies verbessert die initiale Ladezeit Ihrer Anwendung erheblich, da nicht der gesamte Code auf einmal heruntergeladen werden muss. Es fungiert als eine Art "Router" und "Mount-Manager" für Ihre Micro-Frontends, wodurch die Komplexität der Koexistenz verschiedener Frameworks und Codebasen stark reduziert wird.

Struktur einer beispielhaften Micro-Frontend-Anwendung

Um die Konzepte von Micro-Frontends und single-spa besser zu verstehen, betrachten wir eine typische Demostruktur, wie sie oft implementiert wird. Eine solche Anwendung besteht in der Regel aus mehreren Teilen:

• Die Container-App (Root Config): Dies ist die Hauptanwendung, die als Gerüst dient. Sie ist für die Koordination des Mountens und Unmountens der Micro-Frontend-Anwendungen zuständig. Sie lädt die anderen Micro-Frontends und definiert, wann diese aktiv sein sollen.
• Micro-Frontend Navbar-App: Eine Navigationsleiste, die oft auf jeder Seite präsent ist. Sie ist ein gutes Beispiel für eine ständig aktive Komponente.
• Micro-Frontend "Seite 1"-App: Eine spezifische Seite oder ein spezifischer Bereich der Anwendung, der nur aktiv wird, wenn die entsprechende Route aufgerufen wird.
• Micro-Frontend "Seite 2"-App: Eine weitere spezifische Seite, die ebenfalls nur bei Bedarf geladen und angezeigt wird.

Jede dieser Apps lebt idealerweise in einem separaten Code-Repository, was die unabhängige Bereitstellung erst ermöglicht.

Die Erstellung der Anwendung: Schritt für Schritt

Die Initialisierung einer single-spa-Anwendung kann durch ein CLI-Tool namens create-single-spa erheblich vereinfacht werden. Dieses Tool hilft dabei, das Grundgerüst für die verschiedenen Anwendungstypen zu generieren.

Erstellung der Container-App (Root Config)

Zuerst wird das Verzeichnis für die Root-Konfiguration erstellt und das CLI-Tool aufgerufen. Während des Prozesses wählt man "single spa root config" und gibt einen Organisationsnamen an. Dies generiert das grundlegende Setup für die Hauptanwendung, die später die Micro-Frontends orchestrieren wird.

Erstellung der Micro-Frontend-Apps

Im nächsten Schritt werden die einzelnen Micro-Frontend-Anwendungen generiert. Für jede Anwendung – wie die Navigationsleiste oder die Seiten-Apps – wird create-single-spa erneut ausgeführt. Hier wählt man "single-spa application / parcel" und das gewünschte Framework (z.B. React, Angular, Vue.js), sowie den Projektnamen. Dieser Vorgang wird für jede Micro-Frontend-Komponente wiederholt, wodurch separate, eigenständige Projekte entstehen.

Registrierung und Aktivierung der Anwendungen

Der Kern der single-spa-Funktionalität liegt in der Art und Weise, wie die Container-App weiß, wann welche Micro-Frontend-App angezeigt werden soll. Dies wird durch sogenannte "Activity Functions" und die registerApplication-Funktion erreicht.

Activity Functions definieren

Für jede Micro-Frontend-App wird eine Aktivitätsfunktion erstellt. Diese Funktion gibt einen booleschen Wert (true/false) zurück, der angibt, ob die App aktuell aktiv sein sollte. Zum Beispiel könnte die Navigationsleisten-App immer aktiv sein (return true;), während eine Seiten-App nur aktiv ist, wenn der URL-Pfad mit einem bestimmten Präfix beginnt (z.B. /page1).

Anwendungen registrieren

Mit der registerApplication-Funktion werden die Micro-Frontends bei single-spa angemeldet. Diese Funktion benötigt mindestens drei Argumente: den Namen der App, eine Methode zum Laden der App (oft über System.import) und die zuvor definierte Aktivitätsfunktion. Ein Aufruf von start() nach der Registrierung aller Anwendungen bringt single-spa zum Laufen und beginnt mit der Überwachung der Aktivitätsfunktionen.

Lokale Entwicklung und erste Tests

Um die gesamte Micro-Frontend-Anwendung lokal zu testen, müssen alle beteiligten Apps gleichzeitig gestartet werden. Jede App läuft dabei auf ihrem eigenen Entwicklungsserver und einem spezifischen Port (z.B. Root Config auf Port 9000, Nav App auf 9001, Page 1 App auf 9002, Page 2 App auf 9003). Durch Navigation im Browser zu http://localhost:9000 und den entsprechenden Unterpfaden (z.B. /page1) kann das Zusammenspiel der Apps beobachtet werden.

Anfangs kann die Anwendung sehr rudimentär aussehen, aber die Hauptsache ist, dass das Micro-Frontend-Setup lokal funktioniert. Dies bestätigt die grundlegende Integration und das Laden der einzelnen Komponenten.

Verbesserungen und Styling für eine bessere UX

Nachdem die grundlegende Funktionalität etabliert ist, können ästhetische und funktionale Verbesserungen vorgenommen werden, um die Benutzererfahrung (UX) zu optimieren.

Mount-Container spezifizieren

Um sicherzustellen, dass die Micro-Frontends immer an einer vorhersehbaren Stelle in der DOM-Struktur erscheinen und nicht zufällig geladen werden, können spezifische Mount-Container im Haupt-HTML-Dokument (z.B. index.ejs) definiert werden. Diese HTML-Elemente (z.B. <div id="nav-container"></div>) werden dann als viertes Argument in der registerApplication-Funktion der jeweiligen App übergeben. Dies gewährleistet eine konsistente Anordnung der Komponenten auf der Seite.

Styling der Anwendung

Grundlegendes Styling kann der Root-Konfiguration hinzugefügt werden, um ein einheitliches Aussehen zu gewährleisten. Jedes Micro-Frontend kann dann seine eigenen spezifischen Stile (CSS-Dateien) importieren und anwenden. Dies unterstreicht die Kapselung und Unabhängigkeit der Komponenten, da Stile für eine Komponente keine unbeabsichtigten Auswirkungen auf andere haben sollten.

Integration von React Router für reibungslose Navigation

Für eine moderne Single-Page-Anwendung ist clientseitiges Routing unerlässlich. Anstatt herkömmliche Anker-Tags zu verwenden, die zu einem vollständigen Seiten-Refresh führen, kann ein Router wie React Router in den Navigations-Micro-Frontend integriert werden. Dies ermöglicht eine nahtlose Navigation zwischen den Seiten, ohne die gesamte Anwendung neu laden zu müssen, was die Benutzererfahrung erheblich verbessert.

Vorbereitung für die Produktion

Um eine Micro-Frontend-Anwendung öffentlich zugänglich zu machen, sind Schritte für die Produktion notwendig. Dazu gehören die Speicherung der Build-Artefakte an einem zugänglichen Ort und die Automatisierung des Bereitstellungsprozesses.

AWS S3 Bucket einrichten

Amazon S3 (Simple Storage Service) ist eine beliebte Wahl zum Speichern von Build-Artefakten (wie JavaScript-Bundles). Es ist im Wesentlichen ein Cloud-Speicherdienst. Ein S3-Bucket muss erstellt und so konfiguriert werden, dass die Dateien öffentlich lesbar sind und CORS (Cross-Origin Resource Sharing) aktiviert ist. Letzteres ist entscheidend, damit die Hauptanwendung die Assets von einem anderen Ursprung (dem S3-Bucket) laden kann.

Travis CI Job zum Hochladen von Artefakten

Um den Prozess des Hochladens neuer JavaScript-Bundles zu automatisieren, wird ein Continuous Integration (CI)-Dienst wie Travis CI verwendet. Für jedes Micro-Frontend-Repository wird eine .travis.yml-Datei erstellt. Diese Konfiguration definiert einen Build-Job, der das JavaScript-Bundle erstellt, und einen Upload-Job, der die Artefakte in den S3-Bucket hochlädt, sobald Code in den Master-Branch gemergt wird. Sensible Informationen wie AWS-Zugriffsschlüssel werden dabei sicher als Umgebungsvariablen in Travis CI gespeichert.

Das Import-Map-Konzept

Ein zentrales Element in single-spa-Anwendungen, insbesondere in der Produktion, ist die Import-Map. Eine Import-Map ist eine JSON-Datei, die dem Browser mitteilt, wo er die JavaScript-Bundles für die einzelnen Micro-Frontends finden kann. Im Gegensatz zur lokalen Entwicklung, wo die Import-Map oft direkt im HTML-Code definiert ist und auf lokale Server verweist, wird für die Produktion eine dynamischere Lösung benötigt.

Diese Import-Map wird typischerweise ebenfalls in einem S3-Bucket gespeichert und von der Container-App referenziert. Das Besondere daran ist, dass die Import-Map selbst oft nicht direkt im Source Control eines der Repositories liegt. Dies ermöglicht eine hohe Flexibilität: Wenn ein Micro-Frontend aktualisiert wird und ein neues Bundle generiert wird, kann die Import-Map aktualisiert werden, um auf dieses neue Bundle zu verweisen, ohne dass Code-Änderungen im Root-Config-Repository erforderlich sind. Dies ist entscheidend für die unabhängige Bereitstellung.

Um die Versionskontrolle der Import-Map zu gewährleisten, kann das Versionierungs-Feature von S3 genutzt werden.

Bereitstellung auf Heroku: Ein Produktionsserver

Um die Anwendung als Ganzes bereitzustellen, wird oft ein einfacher Webserver benötigt, der die Haupt-HTML-Datei (mit der Referenz auf die Import-Map) ausliefert. Für unsere Beispielanwendung kann dies ein einfacher Node.js- und Express-Server sein. Dieser Server wird so konfiguriert, dass er die gebündelten statischen Dateien (einschließlich index.html) bereitstellt.

Die Bereitstellung auf einer Plattform wie Heroku ist dann relativ unkompliziert. Nach der Installation der Heroku CLI und dem Login kann die Anwendung direkt aus dem Root-Config-Repository auf Heroku bereitgestellt werden. Sobald die Bereitstellung abgeschlossen ist, ist die Anwendung öffentlich zugänglich, und die Benutzer können die verschiedenen Micro-Frontends durch Navigation erleben.

Unabhängige Updates und die CI/CD-Pipeline

Der wahre Vorteil von Micro-Frontends zeigt sich, wenn es darum geht, Änderungen an einzelnen Komponenten vorzunehmen. Bei einem Monolithen könnten kleine Änderungen an einem Teil der Anwendung eine vollständige Neu-Bereitstellung des gesamten Systems erfordern, was riskant und zeitaufwändig ist.

Mit Micro-Frontends können Sie eine einzelne Komponente aktualisieren und separat bereitstellen, ohne die anderen Teile der Anwendung zu beeinflussen. Dies wird durch eine erweiterte CI/CD-Pipeline erreicht:

1. Wenn Code in den Master-Branch eines Micro-Frontend-Repositories gemergt wird, startet der Travis CI Job.
2. Dieser Job erstellt das neue JavaScript-Bundle für das spezifische Micro-Frontend.
3. Das neue Bundle wird in den S3-Bucket hochgeladen.
4. Als entscheidender letzter Schritt aktualisiert ein Nach-Bereitstellungs-Skript die zentrale Import-Map in S3, um auf das neu hochgeladene Bundle zu verweisen.

Diese Automatisierung bedeutet, dass eine Änderung an der "Seite 1"-App sofort in Produktion gehen kann, ohne dass die "Navbar"- oder "Seite 2"-App neu gebaut oder bereitgestellt werden muss. Dies reduziert das Risiko, beschleunigt die Lieferzeiten und maximiert die Team-Autonomie.

Fazit: Die Vorteile überwiegen

Micro-Frontends repräsentieren zweifellos die Zukunft der Frontend-Webentwicklung. Die enormen Vorteile, darunter unabhängige Bereitstellungen, klare Verantwortungsbereiche, schnellere Build- und Testzeiten sowie die beispiellose Fähigkeit, verschiedene Frameworks zu mischen und anzupassen, machen sie zu einer überzeugenden Architekturwahl.

Es ist wahr, dass die anfänglichen Einrichtungskosten und die Komplexität der Wartung einer verteilten Architektur höher sein können als bei einem traditionellen Monolithen. Die Belohnungen, die sich im Laufe der Zeit durch erhöhte Agilität, reduzierte Risiken und die Fähigkeit zur kontinuierlichen Innovation ergeben, überwiegen diese anfänglichen Investitionen jedoch bei Weitem. Mit Tools wie single-spa wird die Implementierung einer Micro-Frontend-Architektur zugänglich und ermöglicht es Entwicklungsteams, den "Monolithen" aufzubrechen und die Vorteile einer modularen, flexiblen Webanwendungsentwicklung voll auszuschöpfen.

Häufig gestellte Fragen (FAQ)

Was ist der Hauptvorteil von Micro-Frontends?

Der Hauptvorteil ist die unabhängige Entwicklung und Bereitstellung von Teilen einer Webanwendung, was zu schnelleren Release-Zyklen, besserer Skalierbarkeit von Teams und der Flexibilität führt, verschiedene Technologien zu verwenden.

Kann ich verschiedene JavaScript-Frameworks in einer Micro-Frontend-Anwendung verwenden?

Ja, das ist einer der Kernvorteile. Frameworks wie single-spa ermöglichen es Ihnen, Komponenten, die in React, Angular, Vue.js oder anderen Frameworks geschrieben wurden, nahtlos in einer einzigen Anwendung zu integrieren.

Wie werden Micro-Frontends in einer Anwendung geladen?

Sie werden in der Regel lazy geladen, was bedeutet, dass sie nur dann vom Browser heruntergeladen werden, wenn sie tatsächlich benötigt werden. Ein zentraler Orchestrator wie single-spa verwaltet das Laden und Entladen basierend auf Aktivitätsfunktionen (z.B. dem URL-Pfad).

Was ist eine Import-Map und wofür wird sie verwendet?

Eine Import-Map ist eine JSON-Datei, die dem Browser mitteilt, wo er die JavaScript-Bundles für die einzelnen Micro-Frontends finden kann. Sie ist entscheidend für die Auflösung von Modulpfaden in der Produktion und ermöglicht dynamische Updates von Micro-Frontends.

Wie wirkt sich die Micro-Frontend-Architektur auf die Bereitstellung aus?

Sie ermöglicht eine unabhängige Bereitstellung jeder Micro-Frontend-Komponente. Das bedeutet, dass Updates an einem Teil der Anwendung live geschaltet werden können, ohne die gesamte Anwendung neu bereitstellen zu müssen. Dies wird oft durch automatisierte CI/CD-Pipelines und dynamische Import-Maps realisiert.

Wenn du andere Artikel ähnlich wie Micro-Frontends mit single-spa: Eine Einführung kennenlernen möchtest, kannst du die Kategorie Wellness besuchen.