Mikrofrontends: Was sind sie und welche Vorteile bieten sie?

In den letzten Jahren haben sich verschiedene Arten von Softwarearchitekturen durchgesetzt, die uns helfen, auf die tatsächlichen Bedürfnisse des zu entwickelnden Produkts zu reagieren.

Die Software-Architektur befasst sich mit dem Entwurf der Struktur eines Systems; eine Reihe von Mustern und Abstraktionen, die sich zu einem definierten und klaren Rahmen entwickeln, der es uns ermöglicht, mit dem Programm zu interagieren.

In dieser ständigen Weiterentwicklung der Muster, die uns bei der Gestaltung von Software helfen, entsteht das Konzept der Mikrofrontends, das eng mit der Microservices-Architektur verbunden ist.

Was sind die Microfrontends?

Der Begriff Microfrontend tauchte etwa 2016 auf. Das Konzept der monolithischen Software hatte sich hin zu einem modularisierten Backend in verschiedenen Teilen entwickelt, die über ein API-Gateway mit dem Front-End kommunizieren. In dieser neuen Architektur wurde das Frontend jedoch weiterhin als monolithischer Block betrachtet. Als Ergebnis dieses Ansatzes mit Microservices können wir die breiter gefächerten Vorteile sehen, die uns die Modularisierung des Frontends ebenfalls bieten kann.

Nehmen wir die Website eines Reisebüros. Wir könnten die Reservierungs- und Suchfunktionen oder sogar den Blog in verschiedene unabhängige Anwendungen isolieren und für jede von ihnen unterschiedliche Back- und Frontends entwickeln, wobei wir die Technologie verwenden, die wir für sie benötigen. Denn einer der großen Vorteile, die uns diese Architektur bietet, ist die Möglichkeit, verschiedene Front-End-Frameworks für jede Anwendung zu verwenden, die später an eine Host-Anwendung gekoppelt wird.

Experten wie Luca Mezzalira definieren Microfrontends als technische Repräsentation einer geschäftlichen Subdomäne. Jede unabhängige Anwendung vermeidet die gemeinsame Nutzung von Logik mit anderen Subdomänen, jede hat ihre eigenen Regeln.

Der Autor selbst verteidigt die Anwendungsfälle, für die der Einsatz dieser Art von Architektur zu empfehlen wäre:

„Ich glaube nicht, dass Microfrontends der Schlüssel zur Frontend-Entwicklung sind, aber ich halte sie für eine großartige Ergänzung zu Single Page Applications (SPA) und Server Side Rendering (SSR) Architekturen. Microfrontends sind besonders nützlich, wenn wir Projekte mit Dutzenden von Entwicklern haben, die in einer großen Geschäftsdomäne zusammenarbeiten und die Komplexität reduzieren wollen, indem sie sich in mehrere Subdomänen aufteilen und unabhängig voneinander verschiedene Teile von Anwendungen bereitstellen, ohne die Kommunikation und Koordination zwischen den Teams zu überlasten.“

Vor- und Nachteile der Verwendung von Microfrontends

Die Verwendung dieser Architektur bei der Entwicklung unseres Produkts kann uns viele Vorteile bieten:

• Möglichkeit der Verwendung verschiedener Technologien: Wie wir bereits erwähnt haben, ist die Agnostik in Bezug auf die verwendete Technologie eine der nützlichsten Lösungen, die diese Art von Architektur bietet. Wir können einige Teile unserer Anwendung unter anderem mit Vue, React oder Angular entwickeln lassen. Die Entwicklungsteams arbeiten unabhängig voneinander an den einzelnen Mikrofrontends und entwerfen in sich geschlossene Anwendungen, die nicht voneinander abhängig sind.
• Skalierbarkeit: Die Tatsache, dass eine Anwendung skalierbar ist, ermöglicht es uns in geschäftlicher Hinsicht, entsprechend den Anforderungen des Projekts weiter zu wachsen, ohne die Qualitäten zu verlieren, die den Wert der Anwendung ausmachen, und neue hinzuzufügen. Diese Unabhängigkeit vom Front[1]end ermöglicht es uns, schrittweise neue Funktionen hinzuzufügen, ohne auf den bestehenden Code angewiesen zu sein.
• Mehr wartbarer und reduzierter Code: Die Entwickler können jeden Teil des Frontends isoliert und in kleineren Stücken bearbeiten, als wenn sie dies in einem monolithischen Frontend tun müssten.
• Unabhängigkeit und Autonomie: Jedes Mikro-Frontend kann parallel entwickelt werden, ohne von den anderen abhängig zu sein. Verschiedene Teile der Host-Anwendung können unterschiedliche Versionen haben und einzeln getestet und bereitgestellt werden.
• Optimierung der Unternehmensressourcen: Durch die Aufteilung der Entwicklungsteams, die an den verschiedenen Funktionen arbeiten, können alle parallel und organisiert arbeiten, was die Entwicklungszeiten verkürzt. Dies ist vor allem bei einem Großprojekt interessant, bei dem diese Art der Organisation größere Auswirkungen haben kann als bei einem Projekt mit geringerer technischer Komplexität.

Die Übernahme dieser Methodik muss nicht immer Vorteile für unser Projekt bringen. Bevor wir uns für den einen oder anderen Arbeitsweg entscheiden, ist es wichtig, die Eigenschaften unseres Produkts zu analysieren, um zu sehen, mit welcher Art von Architektur wir eine bessere Leistung erzielen. Auf diese Weise können wir die folgenden Probleme in einer mikrofrontend-orientierten Architektur finden:

• Höhere betriebliche Komplexität: Jedes Mikrofrontend muss unabhängig eingesetzt werden, so dass wir eine größere Anzahl von Entwicklungsumgebungen, Servern usw. verwalten müssen, mit all den damit verbundenen wirtschaftlichen Kosten und Ressourcen.
• Erhöhte Größe des endgültigen Pakets der Host-Anwendung: Die endgültige oder Host-Anwendung, in der alle Mikrofrontends zusammenlaufen, kann im Vergleich zu einem monolithischen Frontend größer sein, z. B. aufgrund der Verdoppelung von Abhängigkeiten. Die Erstellung einer gemeinsamen Bibliothek mit Abhängigkeiten kann uns helfen, die endgültige Größe unserer Anwendung zu reduzieren.

Microfronted Architecture: Wie verwaltet man ein Projekt mit ihnen?

Durch die Verwendung dieses Architekturmusters können wir Gruppen von Entwicklern in unserem Team organisieren, die sich mit jeder Abteilung der endgültigen Anwendung befassen. Der in jeder Mikroanwendung erzeugte Code kann in einem Monorepo gespeichert werden, d. h. in einem gemeinsamen Repository für alle Teile, aus denen die Anwendung besteht. Andererseits können wir auch Multirepos verwenden, um die Mikrofrontends vollständig zu isolieren.

Für die Integration der einzelnen Mikroanwendungen in die Host-Anwendung gibt es folgende technische Ansätze:

• Client-seitige Integration: Der Browser übernimmt die Integration.
• Server-seitige Integration: Der Server übernimmt die Integration.
• Build-Time-Integration: Die Integration wird zur Kompilierungszeit durchgeführt.

Tools wie Webpack Federation Module oder single-spa können uns bei der Arbeit mit unseren Microfrontends helfen.

Wir werden den Verlauf dieses neuen Entwicklungsparadigmas beobachten müssen. Wir können jedoch mit Sicherheit sagen, dass seine Popularität im Laufe der Jahre weiter zunehmen wird, und dass es vor allem für große Unternehmen mit Projekten von hoher technischer Komplexität notwendig sein wird, die es ihnen ermöglichen, modularisiert zu arbeiten und ihre technischen und betrieblichen Ressourcen effizienter zu verteilen.