Mise à jour du 24/05/2018: Nous sommes maintenant +3 versions d'Angular à partir de mon article d'origine et n'avons toujours pas de solution finale viable. Lars Meijdam (@LarsMeijdam) a proposé une approche intéressante qui vaut certainement le détour. (En raison de problèmes de propriété, il a dû supprimer temporairement le référentiel GitHub où il avait initialement publié son échantillon. Cependant, vous pouvez lui envoyer un message directement si vous souhaitez une copie. Veuillez consulter les commentaires ci-dessous pour plus d'informations.)
Les récents changements architecturaux dans Angular 6 nous rapprochent d'une solution. De plus, Angular Elements ( https://angular.io/guide/elements ) fournit certaines fonctionnalités de composant - mais pas tout à fait ce que j'ai décrit à l'origine dans cet article.
Si quelqu'un de l'incroyable équipe Angular rencontre cela, veuillez noter qu'il semble y avoir beaucoup d'autres personnes qui sont également très intéressées par cette fonctionnalité. Cela vaut peut-être la peine d'envisager l'arriéré.
Je souhaite mettre en place un cadre enfichable (plug-in) dans un Angular 2
, Angular 4
, Angular 5
, ou Angular 6
application.
(Mon cas d'utilisation spécifique pour développer ce cadre enfichable est que je dois développer un système de gestion de contenu miniature. Pour un certain nombre de raisons qui ne sont pas nécessairement développées ici, il Angular 2/4/5/6
correspond presque parfaitement à la plupart des besoins de ce système.)
Par framework enfichable (ou architecture de plug-in), j'entends spécifiquement un système qui permet aux développeurs tiers de créer ou d'étendre les fonctionnalités d'une application principale grâce à l'utilisation de composants enfichables sans avoir un accès direct ou une connaissance du code source de l'application principale. ou fonctionnement interne .
(Cette formulation à propos de " sans avoir un accès direct ou une connaissance du code source ou du fonctionnement interne de l'application " est un objectif fondamental.)
Des exemples de cadres enfichables comprennent des systèmes de gestion de contenu courants tels que WordPress
ou Drupal
.
La situation idéale (comme avec Drupal) serait de pouvoir simplement placer ces composants enfichables (ou plug-ins) dans un dossier, faire en sorte que l'application les détecte ou les découvre automatiquement et les fasse «fonctionner» comme par magie. Cela se produirait d'une manière enfichable à chaud, c'est-à-dire pendant que l'application s'exécutait, serait optimal.
J'essaie actuellement de déterminer les réponses ( avec votre aide ) aux cinq questions suivantes.
- Praticité: un framework de plugin pour une
Angular 2/4/5/6
application est-il même pratique? (Jusqu'à présent, je n'ai trouvé aucun moyen pratique de créer un framework vraiment connectable avecAngular2/4/5/6
.) - Défis attendus: Quels défis peut-on rencontrer lors de la mise en œuvre d'un framework de plugins pour une
Angular 2/4/5/6
application? - Stratégies de mise en œuvre: Quelles techniques ou stratégies spécifiques pourraient être employées pour implémenter un framework de plugins pour une
Angular 2/4/5/6
application? - Meilleures pratiques: Quelles sont les meilleures pratiques pour implémenter un système de plugins pour une
Angular 2/4/5/6
application? - Technologies alternatives: si un framework de plugins n'est pas pratique dans une
Angular 2/4/5/6
application, quelles technologies relativement équivalentes (par exempleReact
) pourraient convenir à une application Web moderne hautement réactive ?
En général, l'utilisation de Angular 2/4/5/6
est très souhaitable car:
- il est naturellement extrêmement rapide - de manière fulgurante.
- il consomme très peu de bande passante (après le chargement initial)
- il a une empreinte relativement petite (après
AOT
ettree shaking
) - et cette empreinte continue de diminuer - il est hautement fonctionnel, et l'équipe et la communauté Angular poursuivent la croissance rapide de son écosystème
- il fonctionne bien avec bon nombre des meilleures et dernières technologies Web telles que
TypeScript
etObservables
- Angular 5 prend désormais en charge les techniciens de service ( https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7 )
- étant soutenu par
Google
, il est susceptible d'être soutenu et amélioré dans le futur
J'aimerais beaucoup l'utiliser Angular 2/4/5/6
pour mon projet actuel. Si je peux utiliser Angular 2/4/5/6
, j'utiliserai également Angular-CLI
et probablement Angular Universal
(pour le rendu côté serveur.)
Voici mes réflexions, jusqu'à présent, concernant les questions ci-dessus. Veuillez examiner et fournir vos commentaires et éclaircissements.
Angular 2/4/5/6
Les applications consomment des packages - mais ce n'est pas nécessairement la même chose que d'autoriser des plugins dans une application. Un plugin dans d'autres systèmes (par exempleDrupal
) peut être essentiellement ajouté en déposant le dossier plugin dans un répertoire de modules commun où il est automatiquement "récupéré" par le système. DansAngular 2/4/5/6
, un package (comme un plugin pourrait l'être) est généralement installé vianpm
, ajouté aupackage.json
, puis importé manuellement dans l'application - comme dansapp.module
. C'est beaucoup plus compliqué que laDrupal
méthode de suppression d'un dossier et de détection automatique du paquet par le système. Plus il est compliqué d'installer un plugin, moins les gens seront susceptibles de les utiliser. Ce serait bien mieux s'il y avait un moyen pourAngular 2/4/5/6
pour détecter et installer automatiquement les plugins. Je suis très intéressé de trouver une méthode qui permette aux non-développeurs d'installer l'Angular 2/4/5/6
application et d'installer les plugins choisis sans avoir à comprendre toute l'architecture de l'application.En général, l'un des avantages de fournir une architecture enfichable est qu'il est très facile pour les développeurs tiers d'étendre les fonctionnalités du système. De toute évidence, ces développeurs ne seront pas familiarisés avec toutes les subtilités du code de l'application à laquelle ils se connectent. Une fois les plugins développés, d'autres utilisateurs encore moins techniques peuvent simplement installer l'application et les plugins sélectionnés. Cependant,
Angular 2/4/5/6
est relativement compliqué et a une courbe d'apprentissage très longue. Pour d' autres choses compliquent, la plupart production desAngular 2/4/5/6
applications utilisent aussiAngular-CLI
,Angular Universal
etWebPack
. Quelqu'un qui implémente un plugin devrait probablement avoir au moins quelques connaissances de base sur la façon dont tous ces éléments s'emboîtent - ainsi qu'une solide connaissance pratique deTypeScript
et une familiarité raisonnable avecNodeJS
. Les exigences en matière de connaissances sont-elles si extrêmes qu'aucun tiers ne voudrait jamais développer un plugin?La plupart des plugins auront probablement un composant côté serveur (par exemple pour stocker / récupérer des données liées au plugin) ainsi qu'une sortie côté client.
Angular 2/4/5
décourage spécifiquement (et fortement) les développeurs d'injecter leurs propres modèles lors de l'exécution - car cela pose un risque sérieux pour la sécurité. Afin de gérer de nombreux types de sortie qu'un plugin peut accueillir (par exemple, l'affichage d'un graphique), il apparaît que permettre aux utilisateurs de créer du contenu qui est injecté dans le flux de réponse, sous une forme une autre, est probablement nécessaire. Je me demande comment il pourrait être possible de répondre à ce besoin sans déchiqueter au sens figuréAngular 2/4/5/6
les mécanismes de sécurité.La plupart des
Angular 2/4/5/6
applications de production sont précompilées à l'aide de la compilationAhead of Time
(AOT
). (Probablement tous devraient l'être.) Je ne sais pas comment des plugins pourraient être ajoutés (ou intégrés à) des applications précompilées. Le meilleur scénario impliquerait de compiler les plugins séparément de l'application principale. Cependant, je ne sais pas comment faire fonctionner cela. Une solution de secours pourrait être de recompiler l'application entière avec les plugins inclus, mais cela complique un peu les choses pour un utilisateur administratif qui souhaite simplement installer l'application (sur son propre serveur) avec les plugins sélectionnés.Dans une
Angular 2/4/5/6
application, en particulier une application pré-compilée, un seul morceau de code errant ou en conflit peut casser toute l'application.Angular 2/4/5/6
les applications ne sont pas toujours les plus faciles à déboguer. L'application de plugins mal conduits peut entraîner des expériences très désagréables. Je ne suis actuellement pas au courant d'un mécanisme pour gérer gracieusement les plugins mal conduits.