it-swarm.com.de

Winkel- und Micro-Frontends

Ich forsche gerade darüber nach, wie man einen riesigen Monolith mit einer Seite in eine Mikro-Frontend-Architektur aufteilen kann.

Die Idee:

  • die Seite besteht aus mehreren Komponenten, die autonom ausgeführt werden
  • jede Komponente wird von einem Entwicklerteam verwaltet
  • jedes Team kann seine Komponenten ändern, aktualisieren und bereitstellen, ohne Komponenten anderer Teams zu zerstören
  • jedes team wählt seinen eigenen toolstack

Der Grund

Um große Anwendungen effizient zu entwickeln, müssen viele Personen daran arbeiten. Die Anzahl der Entwickler pro App/Team lässt sich jedoch nicht gut skalieren. Die parallele Entwicklung mehrerer unabhängiger Apps durch unabhängige Teams kann jedoch beliebig skaliert werden

Vor diesem Hintergrund ist es zwingend erforderlich, dass Teams ihren eigenen Toolstack auswählen und insbesondere unabhängige Versionsaktualisierungen von Drittanbieter-Bibliotheken durchführen können (z. B. eckig, reagieren, jquery). Ist dies nicht der Fall, muss ein Framework-Update mit jeder einzelnen Komponente kompatibel sein, bevor Sie es für die Produktion bereitstellen können.

Funktioniert das mit Angular?

Obwohl unabhängige Versions-Upgrades erforderlich sind, wäre es sinnvoll, die Teams auf einige unterstützte Frameworks (Angular, React, Vue, Polymer ...) zu beschränken, und ich versuche vorerst, eine Demo zu erstellen, die ausschließlich aus Angular-Apps besteht.

Auch wenn Angular 5 angeblich ein Plattform-Framework ist, das riesige Multi-Modul-Apps unterstützt, scheint es fast unmöglich zu sein, dass mehrere unabhängige Winkel-Apps in einem Browserfenster laufen.

Es ist mir gelungen, mehrere Angular-Apps (verschiedene Versionen, jeweils auf einem eigenen Server) auf einer einzigen Webanwendung mittels HTML-Imports zu booten. Es gibt jedoch mehrere global-Abhängigkeiten, die von Apps gemeinsam genutzt werden müssen

  • zone.js kann nur einmal gestartet werden
  • routing erfordert URL-Änderungen
  • Browser-Sachen wie Cookies, Sitzungsspeicher usw.

Es gibt mehrere Artikel im Netz zum Bootstrappen mehrerer Winkelmodule, aber alle beziehen sich auf mehrere Module in derselben Core-App, was wiederum bedeutet, dass sie alle auf derselben Framework-Version laufen, und ein Update bedeutet, dass Sie dies tun müssen Wiederaufbau und Bereitstellung des gesamten Monolithen.

Gibt es eine andere Lösung als "iframes", um mehrere Angular (5) -Apps auf derselben Seite auszuführen?

45
H W

Anstatt direkt gegen diese Idee zu denken, hauptsächlich wegen der separaten Stack-Anforderungen, werde ich die Kompromisse festlegen und einige Einschränkungen angeben, die dies ermöglichen. 

die Seite besteht aus mehreren Komponenten, die autonom ausgeführt werden

Wir alle wissen, dass dies in Angular-Komponenten mit eindeutiger Abgrenzung der Ein- und Ausgänge angeboten wird. 

Kleines CAVEAT: When/Wenn Sie Objekte für @Input übergeben und Ereignisobjekte mit @Output() interagierenden Komponenten ausgeben, müssen Sie eine vordefinierte Schnittstelle festlegen.

Problemumgehung: Erstellen Sie ein anderes TypeScript-Projekt, das nur diese Artefakte definiert. Alle anderen "Komponentenprojekte" würden von einer bestimmten Version davon abhängen.

jede Komponente wird von einem Entwicklerteam verwaltet

Entwicklerteams können die Komponenten genauso verteilen wie andere Angular-Projekte in der OpenSource-Quelle. Sie können ihre Artefakte in einem npm-Repository veröffentlichen. Um zuzuordnende Komponenten zu entwickeln, empfehle ich, dass Sie sich auf Angular Material2 beziehen, das überwältigend sein kann, oder Sie verwenden etwas wie ngx-library-builder (basierend auf Angular Team Member filipesilva/angle-quickstart-lib ) das jedes Komponententeam verwendet.

CAVEAT: Bis zu diesem Datum hat das Winkel-Team kein Projekt zum schnellen Teilen von Komponentenbibliotheken eingerichtet, wie in der Angular-CLI zu sehen ist. Zahlreiche Entwickler haben jedoch eine Art Bibliotheks-Builder erstellt, um die Lücke in Angular CLI zu schließen.

jedes Team kann seine Komponenten ändern, aktualisieren und bereitstellen, ohne Komponenten anderer Teams zu zerstören

Veranlassen Sie, dass Ihr Hauptprojekt alle Komponenten abruft, und führen Sie auf einigen CI-Servern eine periodische, durch Änderungen ausgelöste Erstellung/Bereitstellung aus. Im Wesentlichen werden AOT-Produktions-Builds mit den neuesten Komponentenversionen produziert. Als zusätzlichen Bonus können Sie einige abstrakte e2e-Tests erstellen, um automatisierte Integrationstests durchzuführen, um sicherzustellen, dass die Nebenwirkungen einer Komponente die anderen Komponenten nicht beschädigen.

CAVEAT: Es ist schwierig zu regeln, wie jedes Team die Komponenten entwickelt, d. H., Sie nutzen Speicher und CPU sowie andere Ressourcen optimal. z.B. Was ist, wenn ein Team mit dem Erstellen von Abonnements beginnt und sie nicht entfernt. Die Verwendung statischer Codeanalysen kann nützlich sein, aber Sie können diesen Quellcode derzeit nicht zur Verfügung haben - es sei denn, sie veröffentlichen auch ihren Quellcode.

jedes team wählt seinen eigenen toolstack

Dies ist ein vollständiger Deal Breaker, es sei denn, Sie meinen "Toolstack" wie in Entwicklertools wie IDEs und einigen der "devDependencies". Bestimmte Teile von "devDependencies" jedes Teams müssen die gleichen genauen Versionen von Winkel-Dev-Kits wie Compiler usw. haben. 

Zumindest muss jedes Team den gleichen Winkel, RxJS usw. verwenden.

Am wichtigsten ist jedoch, dass jedes Team keine Komponenten bootstrapiert - nur die Hauptprojekte verfügen über ein Bootstrap-Modul, und dies führt zu einer Bootstrap der Root-Komponente. Dies hilft bei der Beantwortung Ihres zone.js-Problems

Funktioniert das mit Angular?

Wenn Sie die Einschränkungen erkennen und Governance vorsehen, schlagen Sie vor. 

9
bhantol

Wir haben uns die gleiche Frage gestellt. Leider scheint die Antwort auf die Frage zu sein

Gibt es eine andere Lösung als "iframes", um mehrere Angular (5) -Apps auf derselben Seite auszuführen (Bearbeiten: wo jede Angular-App eine andere Angular-Version verwenden kann?

derzeit ist 

Nein, leider nicht, solange Sie die Änderungserkennung von Angular verwenden möchten (die zone.js verwendet).

Aufgrund von zone.js verschmutzt Angular den globalen Geltungsbereich. Noch schlimmer macht zone.js eine ganze Reihe von Browser-APIs ( https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md ), um herauszufinden, wann eine Zone abgeschlossen ist.

Es ist nur möglich, verschiedene Versionen eines Frameworks auf einer Seite ohne Nebenwirkungen zu verwenden, wenn das Framework den globalen Geltungsbereich nicht berührt (dies scheint für React und Vue der Fall zu sein). Anschließend können Sie mit jeder Anwendung verschiedene Framework-Versionen über Webpack bündeln (mit getrenntem Umfang und dem Nachteil, dass die Größe jedes Anwendungspakets zunimmt).

Wenn Sie also eine Webseite mit Angular erstellen möchten, auf der verschiedene Anwendungen/Module auf einer Seite integriert werden sollen, ist die derzeit praktikable Lösung die Erstellung eines Implementierungsmonolithen (z. B. Bündeln verschiedener Module aus verschiedenen Teams in einer Angular-Anwendung durch ein CI (CD-System als Bhantol in seiner Antwort erklärt). 

Es scheint, dass das Angular-Team sich auch des Problems bewusst ist und dass es möglicherweise mit folgenden Hauptversionen angegangen wird. Siehe die Antwort von robwormwald zu der folgenden Github-Frage bezüglich der Roadmap für Winkelelemente: https://github.com/angular/angular/issues/20891

Hoffentlich wird das Angular-Team weitere Informationen zu diesem Thema erhalten, wenn die nächste größere Version Angular 6 Ende März veröffentlicht wird.

4
Philip

Sehen Sie sich Angular Elements (Custom Elements) an. https://moduscreate.com/blog/angular-elements-ngcomponents-everywhere/

Die neue Ionic-Version (4) basiert vollständig darauf, um auf jeder Angular-Version und auf jedem JS-Framework verwendet werden zu können.

Dafür haben sie https://stenciljs.com/ erstellt, mit deren Hilfe Sie benutzerdefinierte Elemente erstellen können.

Wenn jedoch alle Teams Angular verwenden, kann jedes von ihnen eine Bibliothek erstellen, die beispielsweise ngm verwendet.

2
Gilsdav

Ja, du kannst.

Sie möchten jedoch nicht unbedingt in einem Rahmen stecken, wenn Sie Webkomponenten schreiben, da der gesamte Punkt einer Webkomponente möglicherweise überall verwendet werden kann.

Ich teile Ihre Vision, es ist definitiv besser für die Qualität der Software sowie für die Produktivität der Entwickler, um bei der Implementierung an fokussierten Funktionen statt an großen Apps zu arbeiten.

Schließlich suchen Sie nicht nach Angular, sondern nach StencilJS. Stencil ist ein Compiler für Webkomponenten, die auch ein virtuelles DOM in Ihrer Komponente generieren, um die Leistung der Benutzeroberfläche zu verbessern. Hör zu ;-)

1

Die einzige Möglichkeit, verschiedene Angular Apps neben IFrames und die Kommunikation über postMessage zu integrieren, ist das "Deep-Linking" und der Austausch von Informationen über URL-Parameter. Alle Angular-Apps befinden sich dann auf einer eigenen Browser-Registerkarte. Bei gängigen Diensten und Komponenten möchten Sie jedoch möglicherweise einen "Shared Kernel" implementieren, der von allen Ihren Angular-Apps verwendet wird. Daher bleiben Sie in einem bestimmten Angular-Versionsbereich stecken. Wenn Sie diesen gemeinsam genutzten Kernel benötigen, ist der NGModule-Ansatz der empfohlene Weg. Sie können die Versionen Angular 2 und Angular 5 in einer App kombinieren, da sie abwärtskompatibel sind. Es ist nicht zwingend erforderlich, dass die Teams an derselben Version festhalten, bis das Angular Team bahnbrechende Änderungen einführt. Trotzdem steigen Ihre technischen Schulden, wenn Sie nicht aktualisieren. Die Häufigkeit für technische Updates ist im Bereich Angular/Javascript deutlich höher.

0
Dirk Lammers

Neben Iframe gibt es eine weitere Option, die derzeit verfügbar ist, das SPA-Framework. Den Beispielcode erhalten Sie hier

https://github.com/PlaceMe-SAS/single-spa-angular-cli-exampleshttps://github.com/joeldenning/simple-single-spa-webpack-example

0
Aji

Es scheint, dass es seit einiger Zeit eine Lösung für Ihre Bedürfnisse gibt. Schauen Sie sich das Single-SPA-Projekt HIER an.

Es ist ein Wrapper-SPA-Projekt für Ihre Micro-SPA-Projekte.

0
eddyP23