21. Juli 2022
Die Idee hinter MFEs ist es, eine Website oder Webanwendung als eine Komposition von Funktionen zu betrachten, die im Besitz von unabhängigen Teams sind. Es ist ein architektonischer Stil, bei dem unabhängig lieferbare Frontend-Anwendungen zu einem größeren Ganzen zusammengesetzt werden. Erfahren Sie, wie MFEs im Einzelnen funktionieren und welche Vorteile ihre Verwendung mit sich bringt: Skalierbarkeit für Teams, Wiederverwendbarkeit und Technologieunabhängigkeit.
Mikro-Frontends - kurz MFEs genannt - sind weder ein neuer Ansatz, noch der einzig gute den Entwickler:innen und Teams verwenden sollten, um wartbare und skalierbare Frontend-Anwendungen zu erstellen. Es ist jedoch eine Arbeitsweise, die einer Organisation Vorteile bringen kann, wenn sie richtig eingesetzt wird und sich an den Bedürfnissen der Projekte orientiert.
Ein MFE ist ein Code für das Segment einer Anwendung. Darüber hinaus gibt es ein Mikro-Frontend-Framework, das für die Verwaltung des Ladens und Entladens der Mikro-Frontends sowie für alle Operationen wie I/O (Input/Output), Routing zwischen Mikro-Frontends, globale Konfigurationen usw. zuständig ist.
Lassen Sie uns ein wenig in einen der heutzutage am weitesten verbreiteten Ansätze eintauchen - Single-Page-Anwendungen, auch bekannt als SPAs. SPAs bedeuten, dass der gesamte source Code geladen wird und dann APIs und Datenbanken verwendet werden, um eine Verbindung herzustellen. Schließlich wird der Inhalt
auf der Kundenseite gerendert.
Ein Beispiel für ein solches Anwendungs-Framework würde etwa so aussehen:
Wenn Sie sich den Back-End- und DevOps-Teil ansehen, erkennen Sie, dass sie in der Regel eine Struktur haben, die ihnen eine unabhängige Skalierung mit enger Leistungsbegrenzung ermöglicht, die dann bei der Bereitstellung Ihrer Dienste absolut autonom wird.
Wenn ein Unternehmen wächst und seine Teams auch expandieren, müssen sie die Bereiche der Organisation ermitteln, denen besondere Aufmerksamkeit zukommen soll. In der Regel nimmt ein Team eine monolithische Struktur, teilt sie in mehrere Micro-Services auf und schafft eine dedizierte Infrastruktur.
Aber was machen Sie auf der Front-End-Seite? Die Skalierung und Wartung werden sehr schwierig, wenn mehrere verteilte Teams an derselben Code-Basis arbeiten. Dadurch entstehen Kommunikationsprobleme für die Verwaltung verschiedener Teile der Benutzeroberfläche, Wechselwirkungen zwischen Teams usw.
Skalierung unserer Anwendungen mit Micro-Front-Ends
Wie bereits erläutert, nehmen wir unsere monolithische Struktur und unterteilen sie in mehrere APIs, die von Containern angetrieben werden, wodurch unsere Infrastruktur geschaffen wird, die für bestimmte Micro-Services bestimmt ist. Die gleiche Vorgangsweise kann für das Micro-Front-End angewendet werden.
Die Einführung von MFEs bringt Autonomie innerhalb eines Geschäftsbereichs, Verantwortung der Teams für jede Domain (oder Sub-domain), an der sie arbeiten, und nicht zuletzt die Fähigkeit, Verbesserungen und neue Funktionen für bestimmte MFEs einzuführen, ohne die gesamte Struktur und Anwendung zu beeinträchtigen.
Hauptvorteile von Micro-Front-Ends
Team-Skalierbarkeit, was bedeutet, dass jedes Team autonom eingerichtet werden und erfinden, organisieren, initiieren und liefern kann, ohne andere Teile der Anwendung zu beeinträchtigen. Auf diese Weise kann ein Team, das für einen Teil der Anwendung verantwortlich ist, eine Bereitstellung unabhängig von einem anderen Team vornehmen.
Dabei sollten Sie „horizontale“ Teams, die für den gleichen Bereich in zwei oder mehreren MFEs verantwortlich sind, vermeiden. Ein vertikaler Ansatz ist stattdessen geeigneter und nachhaltiger. Ein vertikaler Ansatz bedeutet, dass ein Team, das an einem Micro-Front-End arbeitet, absolut funktionsübergreifend ist und über das gesamte Wissen verfügt, um selbstständig zu arbeiten.
Der MFE-Ansatz ermöglicht es beispielsweise auch dem Plattform-Team, das für die übergeordnete Struktur der Micro-Front-Ends verantwortlich ist, sich stärker auf langfristige Ziele, Leistungen, Routing usw. zu konzentrieren.
Die Micro-Front-End-Teams sind kundenorientierter. Sie interessieren sich mehr für die Konvertierung und Bindung des Kunden und die Verbesserung der Sub-Domain, an der sie arbeiten.
Der zweite Vorteil dieses Ansatzes ist die Wiederverwendbarkeit. Sie können jeden Teil wie etwa die Navigationskomponente übernehmen und wiederverwenden, wann immer Sie wollen, solange Sie den MFE-Standard befolgen. Gleiches gilt auch für andere Teile. Eine gute Möglichkeit für wiederverwendbare Komponenten in den verschiedenen Micro-Front-Ends ist die Erstellung einer gemeinsamen Komponentenbibliothek, die Sie separat verwalten und bei Bedarf verwenden können. Es ist für die Teams sehr hilfreich, wenn dies frühzeitig geplant wird und alle Vor- und Nachteile berücksichtigt werden, bevor man sich für den besten Ansatz entscheidet.
Der dritte Vorteil des MFE-Ansatzes ist die Technologieagnostik. So kann etwa die Struktur in Vanilla JS geschrieben sein und jedes unserer Micro-Front-Ends in React, Vue.js oder was auch immer geeignet ist, solange wir den Standard der MFEs beibehalten.
Um die Vorteile zusammenzufassen: Mit MFE können Sie eine bessere Teamskalierbarkeit, die Wiederverwendbarkeit des Codes, selbstständige Teams und unabhängige Bereitstellungen sowie Technologieagnostik erreichen.
Es muss beachtet werden, dass MFEs Komplexität mit sich bringen und Komplexität nicht immer ein wünschenswertes Merkmal ist.
Wünschen Sie weitere Informationen? Setzen Sie sich mit uns in Verbindung und erfahren Sie, wie Sie MFEs nutzen können.
***
Radoslav Radoychev ist Leiter der Front-End-Entwicklung in unseren Büros in Gabrovo und Veliko Tarnovo, Bulgarien.
