Yeoman où comment être productif quand on crée une application web moderne

L’avantage de faire des conférences comme Mixit 2013 c’est que l’on découvre parfois des outils très pratiques comme Yeoman. Les développeurs Java utilisent depuis très longtemps des outils de build comme Ant, Maven ou Gradle mais côté développement  web il n’y avait pas grand chose.

Yeoman est une solution pensée pour répondre à différents besoins. L’idée de départ est de fournir tous les outils permettant de faciliter la création et la gestion d’une application web : génération de squelette, exécution des tests, compilation (et oui même pour du web statique se compile...)

Yeoman est un projet Open Source géré par l’équipe de développement de Chrome dont Paul Irish (qui a travaillé sur JQuery, HTML5 Boilerplate...), Addy Osmani (Jquery) et Eric Bidelman (html5rocks.com). La documentation liée au projet est très bien faite et vous trouverez toutes les informations nécessaires sur le site web.

Pour la petite histoire un yeoman était un paysan dans l’angleterre médiévale qui était propriétaire de sa terre. Les Yeoman sont aujourd’hui les gardiens de la tour de Londres. 

Prérequis

Avant d’utiliser Yeoman vous devez disposer de Node.js (la plateforme JS constuite sur le moteur Javascript de Chrome) et de son gestionnaire de package npm. Si ce n’est pas le cas rendez vous sur http://nodejs.org/.

Yeoman est en fait composé de trois outils

• Yo outil de scaffolding maintenu par Yeoman permettant de générer l’ossature de votre application
• Bower outil de gestion des dépendances
• Grunt, lanceur de tâche

Le schéma ci dessous résume bien le workflow


Installation de Yeoman et création d’une webapp

Pour installer Yeoman une commande
npm install -g yo

Pour genérer une webapp
yo webapp

Vous n’avez plus qu’à choisir si vous voulez utiliser twitter bootstrap pour les styles et require.js (loader de fichier javascript qui se charge des dépendances entre les scripts et de la récupération des fichiers Javascript)

Yo vous créé ensuite toute l’arborescence de votre application web qui sera compatible avec tous les navigateurs (dans la limite de la version des scripts JS utilisés). L’application se base sur HTML5 Boilerplate et jQuery.

Vous pouvez également générer une application Angular.js en utilisant le generator adéquate. Il existe plusieurs autres generator et vous pouvez créer le votre

npm install -g generator-angular
yo angular

Utilisation de bower

Comme je l’ai dit plus haut Bower est un gestionnaire de package qui va faciliter la gestion des fichiers Javascript, des fichiers CSS ou des images de l’application. Le projet Bower est un projet Open source et n’est pas maintenu par Yeoman mais par Twitter.

On l’installe via npm
npm install -g bower

Pour les commandes
bower help

donnera

Usage: bower <command> [<args>] [<options>]

Commands:
cache-clean    Clean the Bower cache, or the specified package caches
completion     Tab Completion for Bower
help           Display help information about Bower
info           Version info and description of a particular package
init           Interactively create a bower.json file
install        Install a package locally
link           Symlink a package folder
list, ls       List all installed packages
lookup         Look up a package URL by name
register       Register a package
search         Search for a package by name
uninstall      Remove a package
update         Update a package

Bower vous permet de chercher une librairie, d’installer les dépendances s’il y en a, de les mettre à jour....
bower install jquery-ui

Utilisateur de Windows vous pouvez avoir des problèmes d’interaction entre Git et bower. Pour les résoudre vous devez suivre les indications sur le site Github de bower

Grunt l’outil optionnel qui devient indispensable

Grunt est un lanceur de tâche. Sur un projet toutes les tâches répétitives doivent être automatisées pour gagner en productivité : compilation, minification du HTML et du JS, exécution des tâches unitaires..... Grunt permet de gérer l’ensemble de ces tâches.

installattion via npm
npm install -g grunt-cli

Grunt se base sur deux fichiers pour fonctionner

• package.json : stockage des metadata des projets publiés comme des modules npm. On y trouveles différents plugins grunt
• gruntfile.js : définition des tâches

Rassurez vous ces deux fichiers sont générés par Yeoman. Le fichier Gruntfile.js est important pour connaître les différentes tâches que vous pouvez lancer. Par exemple la tâche build sera l’enchainnement de plusieurs sous tâches

grunt.registerTask('build', [
'clean:dist',
'jshint',
'test',
'coffee',
'compass:dist',
'useminPrepare',
'imagemin',
'cssmin',
'htmlmin',
'concat',
'copy',
'cdnify',
'ngmin',
'uglify',
'rev',
'usemin'
]);

La compilation de votre application se fait dans le répertoire dist. Grunt lance un explorateur web, par exemple Chrome et pour que ce soit possible vous devrez ajouter une variable d’environnement CHROME_BIN donnant le chemin pour retrouver l’exécutable.

Une fonctionnalité très pratique de grunt est
grunt server

Cet ensemble de tâche permet de lancer votre application dans un navigateur et de la raffraîchir à chaque fois qu’une modification est détectée.

Conclusion

J'ai mis plus de temps que prévu pour installer Yeoman. Mais je l'ai fait sur mon PC professionnel sous Windows XP (ce n'est pas facile pour tout le monde...). Les gros problèmes rencontrés ont été

• les problèmes d'interaction entre Git et Bower
• l'utilisation de compass qui nécessite la présence de Ruby

En tout cas une fois en place c'est vraiment bluffant. Essayez...