Microfrontends im Monorepo: Maximale Entkopplung mit minimaler Redundanz

Vor einigen Monaten standen wir bei einem Kunden vor einer großen Herausforderung: Die Frontend-Anwendungen des Kunden wurden über Jahre hinweg von verschiedenen Teams in getrennten Repositories entwickelt und gepflegt.

Jedes Team, teilweise verschiedene Dienstleister, arbeitete an seiner eigenen Frontend-Anwendung. Unterschiedliche Technologien, eigene Release-Zyklen, eigene Build-Pipelines, verschiedene UI/UX-Ansätze, mal mehr oder weniger Unterstützung von Barrierefreiheit. Was zunächst nach Flexibilität klang, führte schnell zu Redundanzen, unterschiedlichen Qualitätsstandards und zunehmender Komplexität bei Wartung und Integration. Auch eine einheitlicher Nutzererfahrung war aufgrund verschiedener UI-Frameworks und UI/UX-Ansätze nicht gegeben.

Der Kunde wünschte sich drei zentrale Dinge:

• Wiederverwendbarkeit von Code & Komponenten
• Unabhängige und Schnelle Deployments
• Geringerer Wartungsaufwand mit klaren Architektur- und Codingstandards

Unsere Antwort darauf war eine Architektur, die Microfrontends mit einem Monorepo verbindet und das mit Hilfe von Nx und Import Maps, um maximale Entkopplung bei minimaler Redundanz zu erreichen.

Warum Microfrontends?

Microfrontends sind, ähnlich wie Microservices, einzelne, klar abgegrenzte Teile einer Gesamtanwendung, die unabhängig entwickelt, getestet und deployed werden können.

Jedes Team ist für einen eigenen Bereich verantwortlich, kann Releases unabhängig planen und die Auswirkungen von Fehlern bleiben lokal begrenzt.

Das ganze funktioniert wie ein Baukastensystem aus Bausteinen: Jeder Baustein repräsentiert ein Feature oder eine technische Komponente, egal ob UI-Komponente, Backend-Adapter oder fachliches Feature. Die Bausteine lassen sich einfach wiederverwenden, neu kombinieren oder austauschen. So kann man flexibel eine Frontendanwenung konfiguriert pro Mandant zusammenstellen, aber auch ganze Fachanwendungen für vollständig neue Use Cases schnell realisieren.

Nx-Monorepo als technisches Fundament

Ein Monorepo nach dem Prinzip von Nx ist dabei kein Widerspruch zur Modularität – im Gegenteil: Nx bietet ein starkes Build- und Orchestrierungstool sowie Unterstützung für einen schnellen Start für große Codebasen und mehrere Teams.

Es ermöglicht:

• gemeinsame Libraries und Utilities, die von allen Teams genutzt werden,
• intelligente Abhängigkeitsanalyse und nur betroffene Builds & Tests,
• einheitliche Pipelines für Qualitätssicherung, Testing und Deployment.

Durch diese Struktur sinkt der Wartungsaufwand: gemeinsame Regeln, gemeinsame Toolchains, ein gemeinsames Repository , aber dennoch unabhängige Komponenten.

Import Maps – Entkopplung zur Laufzeit

Ein Knackpunkt bei Microfrontends ist die Frage: Wie laden wir die einzelnen Teile zur Laufzeit, ohne alles statisch zu koppeln?

Hier kommen Import Maps ins Spiel. Eine Browser-Technologie, die steuert, wie Module im Browser aufgelöst werden. Eine Shell interpretiert die Import Maps, lädt und orchestriert die Module so, dass ein Frontend-Anwendung entsteht, die wie aus einem Guss erscheint.

Mit Import Maps definieren wir eine Mapping-Tabelle, zum Beispiel

<script type="importmap">
{
"imports": {
"feature-a": "/dist/feature-a/main.js",
"feature-b": "/dist/feature-b/main.js"
}
}
</script>

Der Browser weiß so zur Laufzeit, wo er welche Module findet, ohne dass wir Bundles hart koppeln müssen. Das erlaubt es uns:

• einzelne Microfrontends unabhängig zu deployen,
• dynamisch neue Versionen einzuspielen,
• Rollbacks schnell durchzuführen,
• und ohne großen Build-Overhead zu arbeiten.

Import Maps stellen durch diese Trennung eine lose Kopplung zwischen Shell und Microfrontends her.

Kommunikation zwischen den Microfrontends

Auch bei klarer Entkopplung müssen die einzelnen Teile miteinander sprechen. Stellen wir uns bspw. vor in einem Microfrontend wird zwischen Hell- und Dunkelmodus getoggelt. Dann müssen das alle anderen Microfrontends auch wissen, um sich korrekt verhalten zu können. Hierzu können verschiedene Patterns verwendet werden:

• Query-Parameter für Zustandsübergaben (Route-based sharing, deep linking etc.)
• Broadcast Channels für ereignisbasierte Kommunikation (tab-übergreifende Events wie Logout, Theme-Change, Token-Refresh über die BroadcastChannel-API)
• Shared State / Shared Services (zentraler Login-Status, User-Profil, Feature-Flags, globaler API-Client, gemeinsames Caching, zentrales Error-Handling)

Diese Muster erlauben es, die Kommunikation sauber zu strukturieren, ohne Silos oder unklare Abhängigkeiten zu schaffen.

Vorteile für Kunden und Teams

Die Kombination aus Microfrontends, Nx Monorepo und Import Maps bringt viele Vorteile:

Für Entwicklerinnen und Entwickler:

• Unabhängige Entwicklung & Deployments
• Geringere Komplexität
• Schnellere Feedback-Loops

Für das Business:

• Höhere Resilienz des Gesamtsystems: Fehler treffen ein Modul, nicht das ganze Frontend und Fehler in geteilten Bausteinen müssen nur einmal gefixt werden
• Schnelle und unabhängige Releases einzelner Features (Time-To-Market)
• Reduzierte Redundanz im Code und im Business
• Ein einheitliches Nutzererlebnis über alle Features und Produkte hinweg

Infrastruktur & Wartung:

• Zentral verwaltete Standards für Qualität, Tests, UI
• Klare Architekturregeln und -standards
• Effiziente Builds dank intelligentem Caching

Fazit: Balance zwischen Entkopplung und Plattform (gemeinsame Basis)

Die Kombination von Microfrontends und Bibliotheken im Nx-Monorepo mit Import Maps hat sich in unserem Projekt als äußerst erfolgreicher Ansatz erwiesen.

Die Nutzung eines gemeinsamen Repositories verhindert redundante Implementierungen, reduziert den Integrationsaufwand, sorgt für einheitliche Standards und erleichtert Wartung und Governance erheblich. Gleichzeitig erlaubt die Architektur jedem Team, autonom zu arbeiten, unabhängig zu releasen und bei Bedarf einzelne Features auszutauschen – ganz nach dem Baukastenprinzip.

Was anfangs wie ein Widerspruch erschien, hat sich als perfekte Balance zwischen Modularität und gemeinsamer Struktur erwiesen: maximale Entkopplung mit minimaler Redundanz – genau das, was unser Kunde gesucht hat.