© SkillUp/Shutterstock.com
Mit Module Federation und Web Components Angular und React gemeinsam nutzen

Architekturvielfalt durch Microfrontends


Module Federation erlaubt das Laden separat bereitgestellter Microfrontends und das Teilen von Abhängigkeiten. Web Components erlauben zusätzlich den parallelen Einsatz verschiedener Frameworks und Versionen. Die Kombination von beidem erhöht jedoch auch die Bundle Size und macht einige Workarounds notwendig.

Microfrontends bringen – zumindest theoretisch – die Vorteile von Microservices in den Client: Einzelne autarke Teams entwickeln und deployen ihre Codestrecken unabhängig voneinander und treffen auch ihre eigenen Entscheidungen. Das geht sogar so weit, dass jedes Team über die zu nutzenden Technologien, darunter Bibliotheken und Frameworks sowie deren Versionen, selbst entscheidet. Allerdings führt die Nutzung unterschiedlicher Frameworks und Versionen im Frontend zu Herausforderungen: Zum einen müssen sie in den Browser geladen werden und erhöhen somit die Anzahl an Bytes, die über die Leitung gehen. Zum anderen müssen die verschiedenen Frameworks und Versionen, die eigentlich gar nichts voneinander wissen, zum Zusammenspiel bewegt werden. Es gibt allerdings eine Lösung für dieses Problem, indem man die Module Federation mit Web Components kombiniert. Letztere basieren auf unterschiedlichen Angular-Versionen und auf React. Welche Konsequenzen dieser Ansatz mit sich bringt, beschreibe ich am Ende dieses Artikels. Der Quellcode des dazu verwendeten Beispiels findet sich unter [1].

Das Beispiel zur Ausgangssituation

Um zu veranschaulichen, wie sich mit der Kombination von Module Federation und Web Components verschiedene Frameworks, bzw. verschiedene Framework-Versionen, kombinieren lassen, kommt die in Abbildung 1gezeigte Anwendung zum Einsatz.

steyer_multiframeworks_1.tif_fmt1.jpgAbb. 1: Beispiel mit mehreren Frameworks und Versionen

Dieser Screenshot lässt schon erkennen, dass die Beispielanwendung sowohl Angular als auch React kombiniert. Tatsächlich kombiniert sie aber ebenfalls noch zwei verschiedene Angular-Versionen (Abb. 2).

steyer_multiframeworks_2.tif_fmt1.jpgAbb. 2: Teilen von Frameworks und Versionen

Interessant hieran ist auch, dass sich jeweils zwei Anwendungen eine Angular-Version teilen. Dies lässt sich, wie weiter unten beschrieben, mit dem Standardverhalten von Module Federation erreichen. Damit die einzelnen Frameworks und die unterschiedlichen Framework-Versionen zusammenspielen, wurden sie als Web Components veröffentlicht.

Web Components mit Module Federation bereitstellen

Das vom Angular-Team entwickelte Projekt @angular/elements erlaubt das Bereitstellen von Angular-Komponenten als Framework-unabhängige Web Components. Da auch eine Angular-Anwendung lediglich eine Komponente ist, die wiederum aus zahlreichen weiteren Komponenten besteht, lassen sich damit auch ganze Anwendungen in Web Components umwandeln. Um @ angular/elements zu nutzen, ist das gleichnamige Paket zu installieren:

ng add @angular/elements

Anschließend können Sie seine Methode createCustomElement nutzen, um eine Angular-Komponente als Web Component zu verpacken. Listing 1 übernimmt diese Aufgabe in der Methode ngDoBootstrap des AppModules.

Listing 1

[...] import { createCustomElement } from '@angular/elements'; [...] @NgModule({ […] declarations: [ [...], AppComponent ], bootstrap: [] // No bootstrap components! }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const ce = createCustomElement(AppComponent, {injector: this.injector}); customElements.define('mfe1-element', ce); } }

Angular ruft ngDoBootstrap auf, wenn das AppModule keine Bootstrap-Komponente aufweist. In diesem Fall sind die Autor:innen selbst für die Bootstrapping-Logik verantwortlich. Neben der Angular-Komponente bekommt createCustomElement auch den aktuellen Injector übergeben, um die Komponente mit dem Dependency-Injection-Mechanismus von Angular zu verbinden. Die Methode customElements.define wird durch den zugrunde liegenden Browserstandard definiert und registriert die Web Component unter dem Elementnamen mfe1-element. Insofern lässt sie sich nun mit jedem beliebigen Framework mittels <mfe1-element></mfe1-element> aufrufen. Inputs und Outputs bildet Angular Elements übrigens auf gleichnamige Eigenschaften und Events ab.

Um diese Web Component...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang