Yo : Quel générateur sélectionner pour votre projet Angular?

Le dilemme

Angular – 4700 étoiles sur GitHub

https://github.com/yeoman/generator-angular

 

ou

 

Angular-fullstack – 4500 étoiles sur GitHub

https://github.com/angular-fullstack/generator-angular-fullstak

 

 

Au CIMMI

Au CIMMI, nous avons sélectionné le générateur angular-fullstack pour deux projets. Le premier projet utilise la Stack MEAN (Mongo Express Angular et Node) tandis que l’autre projet vise seulement à développer le côté client d’une application de géolocalisation.

Structure des dossiers

Les deux générateurs offrent sensiblement les mêmes outils côté client (grunt server, grunt test, wiredep, watch). Par contre, la structure des dossiers est différente. Pour un petit projet, cette structure est sans importance, mais plus le projet est  grand, plus il sera facile de le faire évoluer avec la structure de angular-fullstack.

Le module pattern correspond à la structure generator-angular-fullstack.

Scalable code organization in AngularJS — Opinionated AngularJS

https://medium.com/opinionated-angularjs/scalable-code-organization-in-angularjs-9f01b594bf06

Autres considérations du générateur yeoman angular-fullstack

L’inconvénient du générateur est qu’il est plus lourd à installer. Puisqu’il convient au développement client et serveur, plus de dépendances doivent être installées sur le poste.

Le générateur permet la mise en place facile d’un système d’authentification, que ce soit une authentification standard avec courriel et mot de passe ou avec Facebook, Google ou Twitter.

Le générateur angular-fullstack est déjà configuré afin de déployer facilement votre projet sur Heroku ou OpenShift.

Finalement, il est aussi facile de mettre en place un système d’échange temps-réel offert par les Websockets. Lors de la configuration de votre générateur, vous avez l’option d’installer Socket.IO, soit la librairie la plus populaire pour simplifier l’utilisation des WebSockets, tant côté client que serveur.

Angular-fullstack évolue rapidement

Après avoir mis à jour angular-fullstack à la version 3.3.0 (la plus récente), j’ai réalisé qu’il est maintenant impossible d’écrire du JavaScript vanille (vanille étant du JavaScript sans transcript). Il faut absolument écrire le JavaScript dans un langage intermédiaire qui sera ainsi transformé en JavaScript.

En utilisant la dernière version du générateur, le code initialement généré sera en format Babel ou TypeScript en fonction de l’option sélectionnée lors de la création de votre projet.

Peut-être ne voulez-vous pas apprendre un nouveau langage? Si c’est le cas, vous devrez utiliser la version 2.0.13 du générateur.

Oups! J’ai déjà la version 3.3 et je ne veux pas Babel!

Voilà un beau défi à relever!

Pour débuter tentez la commande suivante :

Si cela ne fonctionne pas, poursuivez.

La première étape est de se débarrasser du générateur le plus récent. Identifier les endroits où le generator-angular-fullstack est installé sur votre système.

Vous pouvez vérifier la version du générateur installé avec la commande suivante. Par contre, j’ai réalisé que cette version n’était pas toujours la bonne!

├─┬ generator-angular-fullstack@2.0.13

│ ├── generator-ng-component@0.0.10

├─┬ generator-webapp@0.5.1

La commande « locate » peut vous aider.

Inspecter le fichier package.json, la version du générateur s’y trouve.

Supprimer les dossiers trouvés.

Installer la bonne version du générateur.

Lancer le générateur dans un dossier vide.

Note : la version 2 du générateur ne propose pas l’option Babel ou TypeScript. Si cette option est proposée, vous utilisez la version 3 du générateur.

Conclusion

Pour un petit projet, n’hésitez pas à sélectionner generator-angular, le générateur officiel de l’équipe Yeoman.

Pour un projet MEAN, fiez-vous à generator-angular-fullstack.

Pour un projet sans TypeScript ou Babel, utilisez generator-angular ou generator-angular-fullstack@2.0.13

Pour un projet client d’envergure moyenne, considérez sérieusement fullstack qui vous offre une structure de dossiers qui évolue mieux.

Comments

comments