FDTSPAGenerator 1.0 : Générez automatiquement votre front end Angular

FDTSPAGenerator 1.0 : Générez automatiquement votre front end Angular

Fondative, développe des application SPA (Single Page Application) en Angular. Ce type d’applications est d’une efficacité incontestable. Cependant, leur intégration et maintenance génèrent des coûts élevés dus à :

  • La nécessité d’un niveau élevé d’expertise.
  • L’absence d’un modèle d’architecture de SPA standard et fiable recommandé par la communauté Angular.
  • La mise en place d’une API Rest est inévitable pour assurer l’interfaçage entre le front end (SPA) et le back end.
  • La répétitivité des tâches.

Suite à une étude approfondie, Fondative a décidé d’avoir recours à un générateur SPA Angular produisant un code standard, 100 % fonctionnel et testé.

FDTSPAGenerator 1.0, quels objectifs ?

Compte tenu des spécificités des applications développées par Fondative, ce générateur doit répondre aux exigences suivantes :

  • Être capable de générer une API Rest et une application front end Angular.
  • Établir l’interfaçage standard front end / back end à l’aide des API.
  • Fournir un code de qualité.

Le générateur Ng-admin étudié est un module Angular qui se branche à une API Rest pour obtenir une interface d’administration complète très rapidement en passant par les fichiers de configuration. Ces fichiers javascript sont créés par NgAdminGeneratorBundle. Ce couple permet de générer le front end et l’API back end mais ne répond pas aux seuils d’exigences sus indiqués à cause des imperfections suivantes :

  • L’architecture des projets ng-admin ne correspond pas aux bonnes pratiques d’Angular (ils regroupent toutes les couches de l’application dans un seul fichier en abandonnant l’utilisation des contrôleurs et des services) donc l’ajout de comportement personnalisé devient une tâche compliquée.
  • Le module ng-admin ne prend pas en considération les relations ManyToMany.
  • Le bundle ne peut pas créer l’API Rest pour la génération des fichiers de configuration javascript pour ng-admin. Un autre bundle (stanlemon/rest-bundle) se charge de la création.
  • Le module à été abandonné par Marmelab, plus de mises à jour compatibles avec la version 2 d’Angular.
  • L’incompatibilité des mises à jour entre le module ng-admin et NgAdminGeneratorBundle a impacté négativement leur réputation d’où leur abandon progressif par la communauté.
BANNIERE_ARTICLE_v08122017
FDTSPAGenerator 1.0, quelles missions ?

FDTSPAGenerator 1.0 est tenu à assurer 3 principaux rôles :

  • La configuration d’une API REST.
  • L’extraction de la métadonnée des entités du projet Symfony.
  • La création du front end Angular à partir de la métadonnée.

Dans le but de garantir une modularité et une dépendance faible entre le front end et le back end, le générateur va se composer de 2 sous-générateurs : Le sous-générateur back end (Symfony) qui se charge de la configuration de l’API et celui front end (Nodejs) qui crée l’application Angular. Ce générateur peut fonctionner en 3 modes différents :

  • Full mode : On se base sur les ressources fournies en entrée (entités PHP) pour :- Générer l’API Rest grâce à l’API Platform. – Extraire la métadonnée pour générer à la fin l’application Angulars. Ce mode permet de tout générer. Il s’agit de l’exécution des deux sous-générateurs.
  • Back mode : Permet de générer l’API Rest grâce à l’API Platform. Le Bundle -à développer- va automatiser tout le reste ; c’est-à-dire l’ajout des dépendances nécessaires et l’écriture dans les fichiers de configuration.
  • Front mode : Permet de générer l’application SPA Angular en se basant sur le fichier de configuration décrivant les ressources avec leurs contraintes. L’application générée pourra ainsi être interconnectée avec l’API Rest apportant ces ressources indépendamment de la technologie avec laquelle elle a été conçue.

Afin de lancer ces travaux, Fondative va utiliser :

  • Un DFTGENBundle Symfony qu’elle a développé pour manipuler la métadonnée des entités du projet.
  • Le générateur Yeoman qui sera utilisé par le Bundle. Il reçoit la métadonnée en entrée et produit le code de l’application Angular en sortie. Il a les caractéristiques suivantes : – Générateur de code source. – Gestionnaire de dépendances. – Moteur de templating. – Fonctionnalités extensibles.
FDTSPAGenerator 1.0 efficace mais perfectible

Les travaux menés ont permis d’aboutir à :

  • Minimisation des coûts d’intégration et de maintenance des projets SPA Angular.
  • Architecture uniforme et standardisée.
  • Code normalisé et intégrant le maximum de bonnes pratiques.
  • Développeurs mieux concentrés sur l’implémentation de la logique métier.

D’autres améliorations sont également possibles :

  • Sécuriser l’API avec des systèmes d’authentification comme les jetons JWT.
  • Automatiser les tests unitaires des opérations CRUD générées.
  • Ajouter un composant de génération multilingue.
  • Migrer le générateur vers Angular v2.x et Symfony v3.x.
BANNIERE_ARTICLE_v08122017

Laisser un commentaire