Bonjour à tous ! A la suite des billets de mon cher collègue Sylvain, je me permets de vous faire une petite intro à Yeoman.

Yeoman est un projet open-source qui a pour but d’améliorer votre productivité en vous fournissant des outils pour construire rapidement votre application web. Les principaux contributeurs sont des ingénieurs ayant déjà fait leurs preuves dans le monde l’open source, l’équipe est sérieuse et il est clair que ce projet est voué à un bel avenir !

Introduction

Sans plus attendre, voici le workflow proposé par Yeoman : Grosso modo l’outil « yo » va vous permettre de créer votre application à l’aide de différents générateurs. Les générateurs vous fournissent également une CLI permettant de créer rapidement des éléments de votre application. Par exemple le générateur d’application angular vous permet de créer une application angular et fournit des commandes pour créer vos routes, vos directives, vos filtres, vos services, … De même le générateur d’application backbone vous permet de générer une nouvelle application utilisant backbone puis vous fournit des commandes pour créer vos modèles, vos vues, vos contrôleurs, … Pour ce qui est de bower et grunt je vous renvoie vers les articles publiés précédemment sur le blog de Dcube (bower et grunt). Lors de la création de votre application, yeoman vous créée les fichiers de configuration pour bower et grunt afin de vous décharger au maximum de toute la partie config, déploiement, build ,… Tout cela pour que vous puissiez vous concentrer au maximum sur le développement de votre application.

Installation

Pour la suite du tuto vous devez préalablement avoir installé :

– NodeJS + NPM

–Git

Ceci fait, installez yeoman à l’aide du gestionnaire de package NPM :

npm install -g yo

Lorsque l’installation est terminée vérifiez le bon déroulement de l’opération en tapant la ligne de commande suivante :

yo --version && bower --version && grunt --version

L’installation est ok ? On passe à la suite ! Bon, Yeoman est installé, mais il vous faut impérativement installer un générateur pour profiter pleinement des possibilités offertes par yo. Dans le cadre de notre tuto nous allons installer le générateur le plus utilisé : angularJs. Deux façon pour l’installer, purement une question de gout.

Soit via npm :

npm install --g generator-angular

Soit en utilisant yo :

yo

Cette dernière commande vous permet d’accéder au menu principal de yo, vous pouvez rechercher un générateur et l’installer, mettre à jour vos générateurs déjà installés, lancer un générateur, ….

Création de l’application

Bon assez papoté, passons à la création de votre application ! Pour utiliser le générateur fraîchement installé, commencez par créer un dossier, placez-vous dans celui-ci puis lancez le générateur à l’aide de la commande suivante :

yo angular MyApp

Par défaut si vous ne précisez pas le nom de votre application, le générateur utilisera le nom du dossier courant comme namespace pour votre application. Après avoir tapé la commande ci-dessus vous devriez tomber sur cette écran : Le générateur ne fonce pas bêtement tête baissé pour générer votre application, non, non ! Il vous propose différents choix afin de savoir ce qu’il doit générer et installer ! Choisissez ce que bon vous semble, afin de terminer la génération de votre application. Si il y a des erreurs lors de la génération de votre app, pensez à vérifier les droits sur le dossier dans lequel yeoman génère votre application. Sinon c’est peut-être qu’il vous manque des packages que devez aller chercher sur NPM. Généralement le message d’erreur à la sortie de la génération est assez clair. La génération est terminée ? Bon, allons jeter un coup d’œil pour voir ce que nous a créée Yeoman !

Premier constat, tous les fichiers de configuration pour la gestion des dépendances (npm et bower) ont été générés. Mais le plus intéressant est le fichier utilisé par grunt : Gruntfile.js ! En ouvrant le fichier vous pouvez voir que plusieurs tâches ont été définies : tâche pour build l’application (minification, compilation Sass, injection automatique des composants bower dans l’application, compression des images, vérification de la syntaxe des fichiers js,…), tâche pour lancer les tests, tâche pour lancer le serveur en local avec notamment le livereload (écoute les fichiers de l’application et relance le serveur à chaque modification),… Le reste du contenu du dossier est assez simple. Le dossier app est le répertoire parent de votre application angular, il contient les fichiers js, html, css, … propre à votre application. Le dossier test contient tout bêtement la configuration et la définition des tests. Sans plus attendre testez votre appli en tapant la commande suivante :

grunt serve

Et la BOUM : Votre serveur se lance et la tâche de livereload défini dans le fichier grunt reste à l’écoute de modification sur les fichiers de votre appli afin de déterminer quand relancer le serveur ! Maintenant que nous avons vérifié que notre coquille est fonctionnelle passons aux tests. Lancez la commande suivante :

grunt test

Les tests unitaire et E2e se lance ! Tout cela pour vous montrer que Yeoman à tout configuré de façon à vous simplifier la vie. Pour ce qui est de la CLI qui vous permet de créer vos routes, filtres, directives, services, … voici comment l’utiliser, placez-vous à la racine du dossier de votre application et entrez la commande suivante :

yo angular:route maRoute

Et là… MAGIE ! Notre nouvelle route est définie dans notre fichier app.js, un contrôleur et une vue correspondant à notre nouvelle route ont été créés et un fichier de test unitaire pour notre contrôleur a également été généré ! Cela démontre clairement le gain de productivité que la CLI du générateur apporte.

Conclusion

Dans ce billet j’espère vous avoir démontré l’utilité de Yeoman, si vous souhaitez voir la liste complète des générateurs dispo c’est ici. Il y en pour tous les goûts du emberJs, du backbone, du polymere,…Le seul reproche que je peux faire à l’outil est son manque de maturité, le générateur angular par exemple devrait proposer plus de choix lors de la création de l’application. Comme la possibilité d’utiliser le module ui-router à la place du ng-route. Mais le super truc sur yeoman c’est que n’importe qui a la possibilité de créer et diffuser son générateur ! Je vous laisse allez voir sur le site comment créer un générateur yeoman, peut-être cela fera-t-il l’objet d’un futur billet qui sait ? Si vous avez des questions n’hésitez pas !