Angular et micro-frontends

Question

Je fais des recherches sur la façon de diviser un énorme monolithe à page unique en une architecture micro-frontale.

L'idée :

• la page est constituée de plusieurs composants qui fonctionneraient de manière autonome
• Chaque composant est géré par une seule équipe de développement.
• chaque équipe peut modifier, mettre à jour et déployer ses composants sans casser les composants des autres équipes.
• chaque équipe choisit sa propre boîte à outils

La raison

Pour développer efficacement de grandes applications, il faut que de nombreuses personnes y travaillent. Cependant, le nombre de développeurs par application/équipe n'est pas très évolutif. Le développement parallèle de plusieurs applications indépendantes par des équipes indépendantes peut cependant être adapté de manière arbitraire.

Dans cette optique, il est impératif que les équipes puissent choisir leur propre boîte à outils et, en particulier, effectuer des mises à jour indépendantes des bibliothèques de tiers (comme angular, react, jquery). Si ce n'était pas le cas, une mise à jour du framework devrait être compatible avec chaque composant avant de pouvoir le déployer en production.

Cela fonctionne-t-il avec Angular ?

Bien que des mises à jour indépendantes des versions soient nécessaires, il serait raisonnable de limiter les équipes à quelques frameworks supportés (Angular, React, Vue, Polymer...) et pour l'instant j'essaie de construire une démo purement constituée d'Angular-Apps.

Cependant, bien qu'Angular 5 soit censé être un cadre de plate-forme prenant en charge d'énormes applications multi-modules, il semble presque impossible de faire fonctionner plusieurs applications angulaires indépendantes dans la même fenêtre de navigateur.

J'ai réussi à amorcer plusieurs applications Angular (différentes versions, chacune hébergée sur son propre serveur) sur une seule application web en utilisant les importations HTML. Cependant, il y a plusieurs global les dépendances qui doivent être partagées entre les applications.

• zone.js ne peut être lancé qu'une seule fois
• le routage nécessite des changements d'url
• Les éléments du navigateur tels que les cookies, le stockage de la session, etc.

Il existe plusieurs articles sur le net sur la façon d'amorcer plusieurs modules angulaires, mais ils font tous référence à plusieurs modules dans la même application principale, ce qui signifie qu'ils fonctionnent tous sur la même version de cadre et qu'une mise à jour signifie que vous devez reconstruire et déployer le monolithe entier.

Existe-t-il une solution autre que " iframes "Comment faire fonctionner plusieurs applications Angular (5) sur la même page ?

Answer 1

Au lieu de suggérer carrément de s'opposer à cette idée, principalement en raison des exigences de piles distinctes, je vais exposer les compromis et fournir certaines restrictions qui rendront cette idée possible.

la page est constituée de plusieurs composants qui fonctionneraient de manière autonome

Nous savons tous que cela est proposé d'emblée dans les composants Angular avec une démarcation claire des entrées et des sorties.

Petit AVERTISSEMENT : Quand/sinon vous passez des objets pour des @Input et émettre des objets d'événement avec @Output() Les composants en interaction doivent convenir d'une interface définie au préalable.

Solution de rechange : Créez un autre projet TypeScript qui définit uniquement ces artefacts. Tous les autres "projets composants" dépendront d'une version spécifique de ce projet.

Chaque composant est géré par une seule équipe de développement.

Les équipes de développement peuvent distribuer les composants comme le font d'autres projets Angular dans le domaine des logiciels libres. Elles peuvent publier leurs artefacts dans un dépôt npm. Pour développer des composants attribuables, je vous recommande de vous référer à Matériau angulaire2 ce qui peut être accablant ou vous pouvez utiliser quelque chose comme ngx-library-builder (sur la base de Membre de l'équipe Angular filipesilva/angular-quickstart-lib ) que chaque équipe de composants utilise.

ATTENTION : Jusqu'à ce jour, l'équipe d'Angular ne dispose pas d'une configuration de projet de partage de bibliothèque de composants rapide comme cela est évident dans Angular CLI. Mais de nombreux développeurs ont créé des sortes de constructeurs de bibliothèques pour combler le vide de l'Angular CLI.

chaque équipe peut modifier, mettre à jour et déployer ses composants sans casser les composants des autres équipes.

Demandez à votre projet principal d'extraire tous les composants et d'effectuer une construction/déploiement périodique ou déclenchée par des changements sur un serveur CI. Il s'agit essentiellement de produire des builds de production AOT avec toutes les dernières versions des composants. En prime, vous pouvez faire construire des tests e2e abstraits pour effectuer des tests d'intégration automatisés afin de vous assurer que les effets secondaires d'un composant ne cassent pas les autres composants.

ATTENTION : Il sera difficile de contrôler la façon dont chaque équipe développe les composants, c'est-à-dire s'ils font un usage optimal de la mémoire, du processeur et des autres ressources. Par exemple, que se passe-t-il si une équipe commence à créer des abonnements et ne les supprime pas ? L'utilisation d'une analyse statique du code peut être utile, mais vous ne disposerez pas de ce code source à ce moment-là - à moins qu'ils ne publient également leur code source.

chaque équipe choisit sa propre boîte à outils

Il s'agit d'une rupture totale, sauf si l'on entend par "toolstack" les outils de développement tels que les IDE et certaines des "devDependencies". Bien que certaines parties des "devDependencies" de chaque équipe doivent avoir les mêmes versions exactes des kits angular dev tels que les compilateurs, etc.

Au minimum, chaque équipe doit utiliser les mêmes Angular, RxJS, etc.

Il faut surtout veiller à ce que chaque équipe n'amorce aucun composant - seuls les projets principaux auront un module d'amorçage qui amorcera le composant racine. Cela aidera à répondre à votre zone.js numéro

Cela fonctionne-t-il avec Angular ?

Si vous reconnaissez les limites et assurez la gouvernance, je vous suggère d'aller de l'avant.

Answer 2

Nous nous sommes posés la même question. Malheureusement, il semble que la réponse à la question

Existe-t-il une solution autre que les "iframes" pour faire fonctionner plusieurs applications Angular (5) sur la même page (modifier : où chaque application Angular peut utiliser une version Angular différente) ?

est actuellement

Non, malheureusement pas, tant que vous souhaitez utiliser la détection des modifications d'Angular (qui utilise zone.js).

À cause de zone.js, Angular pollue la portée globale. Pire encore, zone.js corrige un grand nombre d'API de navigateur ( https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md ) pour détecter quand une zone est terminée.

Il n'est possible d'utiliser différentes versions d'un framework dans une page sans effets secondaires que si le framework ne touche pas à la portée globale (cela semble être vrai pour React et Vue). Vous pouvez alors regrouper différentes versions du framework avec chaque application via Webpack (avec une portée séparée et l'inconvénient que la taille de chaque paquet d'application augmente).

Donc, si vous voulez construire une page web avec Angular où différentes applications/modules doivent être intégrés sur une page, la seule solution possible actuellement est de créer un monolithe de déploiement (par exemple, regrouper différents modules de différentes équipes dans une application Angular par un système CI/CD comme bhantol l'a expliqué dans sa réponse).

Il semble que l'équipe d'Angular soit également consciente du problème et qu'elle pourrait s'y attaquer dans les prochaines versions majeures. Voir la réponse de robwormwald sur la question Github suivante concernant la feuille de route d'Angular Elements : https://github.com/angular/angular/issues/20891

Nous espérons que l'équipe Angular fournira davantage d'informations à ce sujet lors de la sortie de la prochaine version majeure d'Angular 6 à la fin du mois de mars.

Answer 3

Jetez un coup d'œil aux éléments Angular (éléments personnalisés). https://moduscreate.com/blog/angular-elements-ngcomponents-everywhere/

La nouvelle version de Ionic (4) est totalement basée sur celui-ci pour pouvoir être utilisée sur toutes les versions d'Angular et sur tous les frameworks JS.

Pour cela, ils ont créé https://stenciljs.com/ qui vous aidera à créer des éléments personnalisés.

Mais si toutes les équipes utilisent Angular, chacune d'entre elles peut créer une bibliothèque en utilisant ngm par exemple.

Answer 4

Oui, vous pouvez.

Cependant vous ne voulez pas vraiment être coincé dans un cadre lorsque vous écrivez des composants Web, car le but d'un composant Web est de pouvoir être réutilisé n'importe où.

Je partage votre vision, il est définitivement préférable pour la qualité du logiciel ainsi que pour la productivité des développeurs de travailler sur des fonctionnalités ciblées plutôt que sur de grandes applications lorsqu'il s'agit de les mettre en œuvre.

Enfin ce que vous recherchez en ce moment n'est pas Angular, mais StencilJS . Stencil est un compilateur pour les composants web qui génère également un DOM virtuel à l'intérieur de votre composant pour améliorer les performances de l'interface utilisateur. Découvrez-le ;-)

Answer 5

Autre que Iframe il y a une autre option qui est actuellement disponible est SPA framework, vous pouvez obtenir le code d'exemple d'ici

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