Frameworks und Tools

Es gibt keinen Mangel an Frontend-Frameworks wie Angular und Next.js, aber die meisten von ihnen wurden nicht mit Blick auf Mikro-Frontends entwickelt. Daher fehlen ihnen manchmal Mechanismen, um den Herausforderungen der Mikro-Frontend-Architektur zu begegnen.

Allgemeine Überlegungen zu den Rahmenbedingungen

Dieser Leitfaden zielt nicht darauf ab, einzelne Frameworks zu empfehlen oder zu vergleichen. Da häufig mehrere Mikro-Frontends auf derselben Webanwendungsseite ausgeführt werden, sind Ladevorgänge und Laufzeitleistung ein großes Problem. Es ist wichtig, ein Framework zu wählen, das so wenig Overhead wie möglich verursacht.

Frameworks werden basierend auf der Rendering-Ebene unterteilt:

• Clientseitiges Rendern (CSR)

• Serverseitiges Rendern (SSR)

Frontend-Architekturen beinhalten weitere Funktionen, wie z. B. die Generierung statischer Websites (SSG). SSG wird jedoch nur einmal ausgeführt. Mikro-Frontends werden hauptsächlich zur Laufzeit erstellt, daher sind CSR und SSR die Hauptoptionen.

Clientseitiges Rendern

Für CSR gibt es zwei beliebte Optionen:

• Einheitliches SPA-Framework

• Modul Federation

Single SPA ist eine einfache Wahl für die Zusammenstellung von Mikro-Frontends. Es löst die häufigsten Herausforderungen in Mikro-Frontend-Architekturen, wie z. B. die Zusammenstellung mehrerer Mikro-Frontends auf derselben Seite und die Vermeidung von Abhängigkeitskonflikten.

Module Federation begann als Plugin, das von Webpack 5 angeboten wurde. Es löst die meisten Herausforderungen in Mikro-Frontend-Architekturen, einschließlich der Verwaltung von Abhängigkeiten zwischen verschiedenen Artefakten. Module Federation 2.0 funktioniert nativ mit Rspack, Webpack, Esbuild und jetzt mit. JavaScript

Erwägen Sie, überhaupt kein Framework zu verwenden. Moderne Browser, die laut caniuse.com einen Marktanteil von insgesamt 98 Prozent haben, bieten Funktionen wie benutzerdefinierte Elemente nativ an und sind für eine Micro-Frontend-Anwendung ausreichend. Kombinieren Sie bei Bedarf benutzerdefinierte Elemente mit einfachen Bibliotheken für die Übertragung von Ereignissen, die Internationalisierung oder andere spezifische Probleme.

Serverseitiges Rendern

Auf der SSR-Seite sind die beiden Hauptoptionen komplizierter:

• Nutzen Sie ein vorhandenes Framework wie Next.js und wenden Sie ein Mikro-Frontend-Prinzip an, das Module Federation verwendet.

• Verwenden Sie HTML-over-the-wire , um HTML-Fragmente auszutauschen, die Mikrofrontends darstellen, und fügen Sie diese Fragmente zur Laufzeit in einer Vorlage zusammen. Ein Beispiel für diesen Ansatz ist Podium.