Microfrontends: Ein Architekturansatz für skalierbare Frontends

Skalierbarkeit und Modularisierung sind allgegenwärtige Themen für viele Softwareunternehmen. Dabei beschränkt sich dieses Thema längst nicht mehr nur auf die Backend-Seite, sondern ist ebenso wichtig für das Frontend. Microfrontends bieten einen Ansatz, der genau hier ansetzt. Dieser Beitrag zeigt, warum sie sich besonders für kommerzielle Software eignen.

Wenn über Skalierung gesprochen wird, denkt man oft zuerst an Server, Datenbanken oder Microservices. Das Frontend bleibt dabei häufig auf der Strecke und muss sich in die bestehende Struktur eingliedern. Warum betrachten wir die Situation nicht ganzheitlich und fassen die Benutzeroberfläche ebenfalls in unsere Domäne ein? Die Anforderungen wachsen, und neue Features werden immer schneller verlangt.
Microfrontends können hier eine attraktive Lösung für allgegenwärtige Probleme bieten.

Microfrontends kurz erklärt

Es gibt verschiedene Methoden, um Microfrontends zu realisieren. In meinen Augen macht die Variante mit Webpack Module Federation (Doc) am meisten Sinn, weshalb ich mich hier darauf beziehe. Module können unabhängig voneinander entwickelt, getestet und deployt werden, solange die vereinbarten Webpack-Schnittstellen zur Verfügung gestellt werden. Die Shell-Applikation kann aus dem Pool der verschiedenen Module genau diejenigen konsumieren, die der Kunde erworben hat.

Die Grundidee ist einfach: Ein Frontend wird nicht mehr als geschlossene Einheit gebaut, sondern als Zusammenspiel mehrerer unabhängiger Module. Jedes Modul repräsentiert einen fachlich klar abgegrenzten Teil der Anwendung und kann eigenständig entwickelt und ausgeliefert werden. Technisch wird dieser Ansatz heute häufig mit Webpack Module Federation umgesetzt.

Warum Microfrontends?

Microservices sind angesagter denn je – und das nicht ohne Grund. Diese Architektur lässt sich auch im Frontend nutzen, um von ähnlichen Vorteilen zu profitieren. Frontend-Module auf diese Weise bereitzustellen erlaubt es zudem, technologie- und frameworkunabhängiger zu werden. Es spielt keine Rolle, ob Modul A React nutzt und Modul B Angular – beide Module können mithilfe von Webpack Module Federation gemeinsam eingesetzt werden.

Module Federation ist eine Erweiterung von Webpack, die es erlaubt, zur Laufzeit Code zwischen unterschiedlichen Frontend-Anwendungen zu teilen. Einzelne Module können unabhängig deployt werden und sind dennoch Teil einer gemeinsamen Benutzeroberfläche. Eine gute Übersicht bietet die offizielle Webpack-Dokumentation: https://webpack.js.org/concepts/module-federation/.

Genug der Einführung – wie hilft uns das?

Die Frontends werden entlang fachlicher Domänen geschnitten, nicht entlang technischer Schichten. Dieses Umdenken in der Architektur wirkt sich auch auf die Teams und deren Arbeitsweise aus. Es entstehen klar abgegrenzte Verantwortlichkeiten, und Teams können unabhängig voneinander entwickeln, testen und deployen. Das vereinfacht die Zusammenarbeit und reduziert Abhängigkeiten.

Die technologische Flexibilität zeigt sich in mehreren Vorteilen: Module können unterschiedliche Frameworks oder Versionsstände verwenden, solange sie sich an definierte Schnittstellen halten. Gleichzeitig lassen sich zentrale Themen wie Authentifizierung, Design-Systeme oder Observability übergreifend regeln. So entsteht ein ausgewogener Kompromiss zwischen Freiheit und Konsistenz. Die Basis kümmert sich um gemeinsame, geteilte Aufgaben, während sich die Module auf das Business konzentrieren können.

Ushani Anuradha erklärt die Microfrontend-Architektur mit Module Federation sehr gut in einem Medium Beitrag. Im Folgenden zeige ich ein einfaches Beispiel, wie eine webpack.config.js eingerichtet wird und wie ein Remote-Modul konsumiert werden kann. Voraussetzung ist, dass auf der Gegenseite ein Modul exportiert und entsprechend gebündelt wird.

// webpack.config.js for a remote app
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button', // Exposing a Button component
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

// webpack.config.js for a host app
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

Oft wird dieser Architektur vorgeworfen, zusätzliche Komplexität zu erzeugen. Auch das Zusammenspiel der Module sowie deren Versionierung können herausfordernd sein. Diese Kritikpunkte sind valide und erfordern, dass man sich diesen Herausforderungen von Beginn an bewusst stellt. Webpack Module Federation ist kein Selbstzweck, sondern ein Werkzeug. Ohne klare Architekturprinzipien, saubere Schnittstellen und gemeinsame Konventionen entsteht schnell ein fragmentiertes System. Richtig eingesetzt hilft die Technik jedoch, bestehende Komplexität sichtbar zu machen und strukturiert zu ordnen.

Microfrontends mit Hilfe von Webpack Module Federation sind daher weniger ein kurzfristiger Trend als vielmehr eine Antwort auf unterschiedliche Herausforderungen in Architektur, Organisation und Technologie.

Fazit

Sowohl technisch als auch organisatorisch sind Microfrontends ein Architekturansatz, der Unternehmen vielfältige Möglichkeiten bietet, ihre Software zukunftssicher zu skalieren und zu modularisieren.

Dieser Blog-Beitrag wurde mit Unterstützung von KI erstellt