Frontend Micro-Frontend Router: Cross-Application Navigation

In der modernen Webentwicklung hat die Micro-Frontend-Architektur als eine Möglichkeit, große, komplexe Anwendungen zu erstellen, erheblich an Bedeutung gewonnen. Sie beinhaltet die Aufteilung eines monolithischen Frontends in kleinere, unabhängige und bereitstellbare Einheiten (Micro-Frontends). Eine der größten Herausforderungen in dieser Architektur ist die Verwaltung der Cross-Application-Navigation, die es Benutzern ermöglicht, sich nahtlos zwischen diesen unabhängigen Micro-Frontends zu bewegen. Dieser Artikel bietet einen umfassenden Leitfaden zum Frontend-Micro-Frontend-Routing und zur Cross-Application-Navigation.

Was sind Micro-Frontends?

Micro-Frontends sind ein Architekturstil, bei dem unabhängig lieferbare Frontend-Anwendungen zu einer einzigen, zusammenhängenden Benutzererfahrung zusammengefügt werden. Dies ist analog zu Microservices im Backend. Jedes Micro-Frontend gehört in der Regel einem separaten Team, was eine größere Autonomie, schnellere Entwicklungszyklen und einfachere Wartung ermöglicht. Zu den Vorteilen von Micro-Frontends gehören:

• Unabhängige Bereitstellung: Teams können ihre Micro-Frontends bereitstellen, ohne andere Teile der Anwendung zu beeinträchtigen.
• Technologische Vielfalt: Verschiedene Micro-Frontends können mit unterschiedlichen Technologien erstellt werden, sodass die Teams das beste Werkzeug für die jeweilige Aufgabe auswählen können. Beispielsweise könnte ein Team React verwenden, während ein anderes Vue.js oder Angular verwendet.
• Skalierbarkeit: Die Anwendung kann leichter skaliert werden, da jedes Micro-Frontend unabhängig skaliert werden kann.
• Verbesserte Wartbarkeit: Kleinere Codebasen sind leichter zu verstehen und zu warten.
• Teamautonomie: Teams haben mehr Kontrolle über ihren eigenen Code und Entwicklungsprozess.

Die Notwendigkeit eines Micro-Frontend-Routers

Ohne eine klar definierte Routing-Strategie werden Benutzer eine unzusammenhängende und frustrierende Erfahrung machen, wenn sie zwischen Micro-Frontends navigieren. Ein Micro-Frontend-Router behebt dies, indem er einen zentralen Mechanismus zur Verwaltung der Navigation über die gesamte Anwendung hinweg bereitstellt. Dies beinhaltet die Handhabung von:

• URL-Verwaltung: Sicherstellen, dass die URL den aktuellen Standort des Benutzers innerhalb der Anwendung korrekt widerspiegelt.
• Statusverwaltung: Bei Bedarf den Status zwischen Micro-Frontends teilen.
• Lazy Loading: Micro-Frontends nur bei Bedarf laden, um die Leistung zu verbessern.
• Authentifizierung und Autorisierung: Benutzerauthentifizierung und -autorisierung über verschiedene Micro-Frontends hinweg verwalten.

Cross-Application-Navigationsstrategien

Es gibt verschiedene Ansätze zur Implementierung der Cross-Application-Navigation in einer Micro-Frontend-Architektur. Jeder Ansatz hat seine eigenen Vor- und Nachteile, und die beste Wahl hängt von den spezifischen Anforderungen Ihrer Anwendung ab.

1. Verwenden eines zentralisierten Routers (Single-Spa)

Single-Spa ist ein beliebtes Framework zum Erstellen von Micro-Frontends. Es verwendet einen zentralisierten Router, um die Navigation zwischen verschiedenen Anwendungen zu verwalten. Die Hauptanwendung fungiert als Orchestrator und ist für das Rendern und Aufheben der Bereitstellung der Micro-Frontends basierend auf der aktuellen URL verantwortlich.

So funktioniert es:

1. Der Benutzer navigiert zu einer bestimmten URL.
2. Der Single-Spa-Router fängt die URL-Änderung ab.
3. Basierend auf der URL bestimmt der Router, welches Micro-Frontend aktiv sein soll.
4. Der Router aktiviert das entsprechende Micro-Frontend und hebt die Bereitstellung aller anderen aktiven Micro-Frontends auf.

Beispiel (Single-Spa):

Nehmen wir an, Sie haben drei Micro-Frontends: home, products und cart. Der Single-Spa-Router würde wie folgt konfiguriert:

import { registerApplication, start } from 'single-spa'; registerApplication( 'home', () => import('./home/home.app.js'), location => location.pathname === '/' ); registerApplication( 'products', () => import('./products/products.app.js'), location => location.pathname.startsWith('/products') ); registerApplication( 'cart', () => import('./cart/cart.app.js'), location => location.pathname.startsWith('/cart') ); start();

In diesem Beispiel wird jedes Micro-Frontend bei Single-Spa registriert, und es wird eine Funktion bereitgestellt, um zu bestimmen, wann das Micro-Frontend basierend auf der URL aktiv sein soll. Wenn der Benutzer zu /products navigiert, wird das Micro-Frontend products aktiviert.

Vorteile:

• Zentralisierte Kontrolle über das Routing.
• Vereinfachte Statusverwaltung (kann vom Single-Spa-Orchestrator übernommen werden).
• Einfache Integration in bestehende Anwendungen.

Nachteile:

• Single Point of Failure. Wenn der Orchestrator ausfällt, ist die gesamte Anwendung betroffen.
• Kann zu einem Leistungsengpass werden, wenn er nicht effizient implementiert wird.

2. Modulföderation (Webpack 5)

Die Modulföderation von Webpack 5 ermöglicht es Ihnen, Code zwischen verschiedenen Webpack-Builds zur Laufzeit freizugeben. Dies bedeutet, dass Sie Komponenten, Module oder sogar ganze Anwendungen von einem Build (dem Host) zu einem anderen (dem Remote) freigeben können. Dies erleichtert das Erstellen von Micro-Frontends, bei denen jedes Micro-Frontend ein separater Webpack-Build ist.

So funktioniert es:

1. Jedes Micro-Frontend wird als separates Webpack-Projekt erstellt.
2. Ein Micro-Frontend wird als Hostanwendung festgelegt.
3. Die Hostanwendung definiert, welche Module sie von den Remote-Micro-Frontends verwenden möchte.
4. Die Remote-Micro-Frontends definieren, welche Module sie für die Hostanwendung freigeben möchten.
5. Zur Laufzeit lädt die Hostanwendung die freigegebenen Module bei Bedarf von den Remote-Micro-Frontends.

Beispiel (Modulföderation):

Nehmen wir eine host-App und eine remote-App an.

host/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: ['react', 'react-dom'], }), ], };

remote/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'remote', exposes: { './Button': './src/Button', }, shared: ['react', 'react-dom'], }), ], };

In diesem Beispiel verwendet die host-Anwendung die Komponente Button aus der remote-Anwendung. Die Option shared stellt sicher, dass beide Anwendungen dieselbe Version von react und react-dom verwenden.

Vorteile:

• Dezentrale Architektur. Jedes Micro-Frontend ist unabhängig und kann separat entwickelt und bereitgestellt werden.
• Codefreigabe. Mit der Modulföderation können Sie Code zwischen verschiedenen Anwendungen zur Laufzeit freigeben.
• Lazy Loading. Module werden nur bei Bedarf geladen, was die Leistung verbessert.

Nachteile:

• Komplexere Einrichtung und Konfiguration als Single-Spa.
• Erfordert eine sorgfältige Verwaltung gemeinsam genutzter Abhängigkeiten, um Versionskonflikte zu vermeiden.

3. Web Components

Web Components sind eine Reihe von Webstandards, mit denen Sie wiederverwendbare, benutzerdefinierte HTML-Elemente erstellen können. Diese Komponenten können in jeder Webanwendung verwendet werden, unabhängig vom verwendeten Framework. Dies macht sie zu einer natürlichen Ergänzung für Micro-Frontend-Architekturen, da sie eine technologieagnostische Möglichkeit zum Erstellen und Freigeben von UI-Komponenten bieten.

So funktioniert es:

1. Jedes Micro-Frontend stellt seine UI als eine Reihe von Web Components bereit.
2. Die Hauptanwendung (oder ein anderes Micro-Frontend) verwendet diese Web Components, indem sie importiert und in ihrem HTML verwendet werden.
3. Die Web Components übernehmen ihr eigenes Rendering und ihre eigene Logik.

Beispiel (Web Components):

micro-frontend-a.js:

class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

Hello from Micro-Frontend A!

`; } } customElements.define('micro-frontend-a', MyComponent);

index.html (Hauptanwendung):

Main Application

In diesem Beispiel definiert die Datei micro-frontend-a.js eine Web Component namens micro-frontend-a. Die Datei index.html importiert diese Datei und verwendet die Web Component in ihrem HTML. Der Browser rendert die Web Component und zeigt "Hello from Micro-Frontend A!" an.

Vorteile:

• Technologieagnostisch. Web Components können mit jedem Framework oder ohne Framework verwendet werden.
• Wiederverwendbarkeit. Web Components können problemlos in verschiedenen Anwendungen wiederverwendet werden.
• Kapselung. Web Components kapseln ihre eigenen Stile und Logik und verhindern so Konflikte mit anderen Teilen der Anwendung.

Nachteile:

• Die Implementierung kann umfangreicher sein als bei anderen Ansätzen.
• Möglicherweise sind Polyfills erforderlich, um ältere Browser zu unterstützen.

4. Iframes

Iframes (Inline Frames) sind eine ältere, aber immer noch praktikable Option zur Isolierung von Micro-Frontends. Jedes Micro-Frontend wird in seinem eigenen Iframe ausgeführt, was ein hohes Maß an Isolation bietet. Die Kommunikation zwischen Iframes kann mit der postMessage-API erfolgen.

So funktioniert es:

1. Jedes Micro-Frontend wird als separate Webanwendung bereitgestellt.
2. Die Hauptanwendung enthält jedes Micro-Frontend in einem Iframe.
3. Die Kommunikation zwischen der Hauptanwendung und den Micro-Frontends erfolgt über die postMessage-API.

Beispiel (Iframes):

index.html (Hauptanwendung):

Main Application

In diesem Beispiel enthält die Datei index.html zwei Iframes, die jeweils auf ein anderes Micro-Frontend verweisen.

Vorteile:

• Hoher Grad an Isolation. Micro-Frontends sind vollständig voneinander isoliert, wodurch Konflikte vermieden werden.
• Einfache Implementierung. Iframes sind eine einfache und gut verstandene Technologie.

Nachteile:

• Die Kommunikation zwischen Iframes kann schwierig sein.
• Aufgrund des Overheads mehrerer Iframes kann es zu Leistungsproblemen kommen.
• Schlechte Benutzererfahrung aufgrund des Mangels an nahtloser Integration.

Statusverwaltung über Micro-Frontends hinweg

Die Verwaltung des Status über Micro-Frontends hinweg ist ein kritischer Aspekt der Cross-Application-Navigation. Es können verschiedene Strategien angewendet werden:

• URL-basierter Status: Codierung des Status innerhalb der URL. Dieser Ansatz macht den Anwendungsstatus über URLs teilbar und leicht als Lesezeichen speicherbar.
• Zentralisierte Statusverwaltung (Redux, Vuex): Verwenden einer globalen Statusverwaltungsbibliothek, um den Status zwischen Micro-Frontends zu teilen. Dies ist besonders nützlich für komplexe Anwendungen mit einem erheblichen gemeinsamen Status.
• Benutzerdefinierte Ereignisse: Verwenden von benutzerdefinierten Ereignissen, um Statusänderungen zwischen Micro-Frontends zu kommunizieren. Dieser Ansatz ermöglicht eine lose Kopplung zwischen Micro-Frontends.
• Browserspeicher (LocalStorage, SessionStorage): Speichern des Status im Browserspeicher. Dieser Ansatz eignet sich für einfache Zustände, die nicht über alle Micro-Frontends hinweg freigegeben werden müssen. Beachten Sie jedoch die Sicherheitsaspekte, wenn Sie sensible Daten speichern.

Authentifizierung und Autorisierung

Authentifizierung und Autorisierung sind entscheidende Aspekte jeder Webanwendung, und sie werden in einer Micro-Frontend-Architektur noch wichtiger. Zu den gängigen Ansätzen gehören:

• Zentralisierter Authentifizierungsdienst: Ein dedizierter Dienst verarbeitet die Benutzerauthentifizierung und stellt Token aus (z. B. JWT). Micro-Frontends können diese Token dann validieren, um die Benutzerautorisierung zu bestimmen.
• Gemeinsames Authentifizierungsmodul: Ein gemeinsames Modul ist für die Verarbeitung der Authentifizierungslogik verantwortlich. Dieses Modul kann von allen Micro-Frontends verwendet werden.
• Edge-Authentifizierung: Die Authentifizierung wird am Rand des Netzwerks verarbeitet (z. B. mithilfe eines Reverse-Proxy oder API-Gateways). Dieser Ansatz kann die Authentifizierungslogik in den Micro-Frontends vereinfachen.

Best Practices für Micro-Frontend-Routing

Hier sind einige Best Practices, die Sie bei der Implementierung des Micro-Frontend-Routings beachten sollten:

• Halten Sie es einfach: Wählen Sie die einfachste Routing-Strategie, die Ihren Anforderungen entspricht.
• Entkoppeln Sie Micro-Frontends: Minimieren Sie die Abhängigkeiten zwischen Micro-Frontends, um die unabhängige Entwicklung und Bereitstellung zu fördern.
• Verwenden Sie eine konsistente URL-Struktur: Behalten Sie eine konsistente URL-Struktur über alle Micro-Frontends hinweg bei, um die Benutzerfreundlichkeit und SEO zu verbessern.
• Implementieren Sie Lazy Loading: Laden Sie Micro-Frontends nur bei Bedarf, um die Leistung zu verbessern.
• Überwachen Sie die Leistung: Überwachen Sie regelmäßig die Leistung Ihrer Micro-Frontend-Anwendung, um Engpässe zu identifizieren und zu beheben.
• Richten Sie klare Kommunikationskanäle ein: Stellen Sie sicher, dass Teams, die an verschiedenen Micro-Frontends arbeiten, über klare Kommunikationskanäle verfügen, um die Entwicklungsbemühungen zu koordinieren und Integrationsprobleme zu beheben.
• Implementieren Sie eine robuste Fehlerbehandlung: Implementieren Sie eine robuste Fehlerbehandlung, um Fehler in einzelnen Micro-Frontends ordnungsgemäß zu behandeln und zu verhindern, dass sie sich auf die gesamte Anwendung auswirken.
• Automatisierte Tests: Implementieren Sie umfassende automatisierte Tests, einschließlich Unit-Tests, Integrationstests und End-to-End-Tests, um die Qualität und Stabilität Ihrer Micro-Frontend-Anwendung sicherzustellen.

Fazit

Micro-Frontend-Routing ist ein komplexer, aber wesentlicher Aspekt beim Erstellen skalierbarer und wartbarer Webanwendungen. Indem Sie die verschiedenen in diesem Artikel beschriebenen Routing-Strategien und Best Practices sorgfältig berücksichtigen, können Sie eine nahtlose und benutzerfreundliche Erfahrung für Ihre Benutzer schaffen. Die Wahl des richtigen Ansatzes, sei es ein zentralisierter Router wie Single-Spa, Module Federation, Web Components oder sogar Iframes, hängt von Ihren spezifischen Bedürfnissen und Prioritäten ab. Denken Sie daran, die Entkopplung, konsistente URL-Strukturen und Leistungsoptimierung zu priorisieren. Durch die Implementierung einer gut durchdachten Routing-Strategie können Sie das volle Potenzial der Micro-Frontend-Architektur ausschöpfen und wirklich außergewöhnliche Webanwendungen für ein globales Publikum erstellen.