johanBleuzen

Disponible depuis hier pour le public, le projet Yeoman, que Google tease depuis quelque temps, propose de moderniser les worflows des webapps modernes. Vaste programme, pour un utilitaire qui n’en est pas un, mais une concaténation de très nombreux outils pour en faire un énorme.
Lors des vidéos de présentation, Yeoman avait l’air sympa, voyons voir ce qu’il en est en pratique…

Comme il est de coutume de nos jours, Yeoman repose sur node puisque c’est un package qui s’installe avec NPM et il dispose d’un script d’installation ce qui laisse espérer une installation rapide.

Installation

Pour profiter de Yeoman, il vous faudra une git, ruby et une version assez récente de node (supérieur à 0.8.x), l’installation de l’utilitaire se fait avec une seule commande :

$> curl -L get.yeoman.io | bash

La durée de l’installation dépendra de votre environnement initial, mais sachez que si vous avez un environnement de développeur déjà configuré (avec brew déjà installé) le temps d’installation de Yeoman n’en sera que plus court. Personnellement, il n’a fallu que 4 minutes pour installer toutes les dépendances, mais sur le site ils annoncent un bon quinze minutes, alors soyez patients.

«Please authorize the installer»

Je peux me tromper mais je ne vois pas pourquoi Yeoman a besoin de faire du sudo pour s’installer. Il repose sur brew et il n’est jamais nécessaire de saisir son mot de passe pour installer une formula. De plus, il peut être dangereux de saisir son mot de passe root pour installer un script qui vient d’internet et cela est encore plus vrai pour l’installation de NPM…

Du coup, je ne saurai que vous conseillez de saisir la commande suivante pour vous protéger des packages NPM en diminuant les droits des package téléchargés :

$> sudo chown -R $USER /usr/local

Un petit lien qui explique le danger d’installer NPM avec sudo.

Une liste de dépendances longue comme le bras

Au moment de l’installation du package «Yeoman», c’est 22 dépendances qui seront installés sur votre machine et si on compte les dépendances transitives cela fait environ 70 package installés, rien que ça !

Ils auraient pu proposer une installation des composants au moment de la première utilisation, car on se retrouve avec foule de packages NPM que la majorité des développeurs n’utiliseront peut être jamais.

Utilisation

Une fois l’installation terminée, il faut ouvrir un nouveau shell car impossible d’accéder au binaire yeoman dans la session de l’installation. On va enfin pouvoir entrer dans le vif du sujet.

Initialisation

Tout comme un dépôt git, Yeoman a besoin d’être initialisé, l’utilitaire en profite pour poser quelques questions afin de pouvoir générer une arborescence complète. L’initialisation s’effectue avec la commande suivante :

$> yeoman init

On obtient alors une arborescence de webapp générée à partir de HTML5 Boilerplate, la webapp contient la dernière version de jQuery, de modernizr ainsi que le framework bootstrap. Heureusement, le contenu de la webapp est allégé par rapport au contenu «normal» de H5BP.

Gestion des frameworks

Yeoman permet de gérer facilement les package que l’on veut utiliser dans sa webapp, grâce à Bower qui a été développée par Twitter.
Ainsi, pour installer un package, il suffit de saisir la commande :

$> yeoman install MON_PACKAGE

Ainsi, le nouveau package sera installé dans le répertoire vendor de vos assets. Cela permet d’éviter la fastidieuse étape d’installation des librairies à la main. Mais comment savoir quels packages peuvent être installés ? C’est très simple, il existe une commande qui va imprimer la liste de tous les packages aujourd’hui gérés par Bower :

$> yeoman search

Pour l’instant, il n’y a pas énormément de package disponibles, mais cela devrait venir il suffit au développeur de plugin jQuery d’ajouter un fichier package.json à la racine de leur projet, de le publier sur github pour pouvoir ensuite s’ajouter à la liste des package disponibles.

Assister le développement

Yeoman propose un mode «Preview» qui permet de lancer un serveur compatible avec LiveReload afin de recharger automatiquement le navigateur lorsque des modifications sont sauvées dans le projet. Cela s’active avec la commande :

$> yeoman server 

Yeoman est tellement sympa qu’il a même été jusqu’à ouvrir lui même un nouvel onglet pointant vers http://localhost:3501.

Builder un livrable

Surement l’une des fonctionnalité qui me semble la plus intéressante de Yeoman. Il est possible de facilement construire un livrable grâce à l’utilisation de grunt.js. Ainsi il est possible avec cette phase de build de :

• Valider son JavaScript avec JSHint
• Compiler ses fichiers SASS, coffeescript, …
• Concaténer et minifier ses feuilles de style
• Compresser ses images
• Lancer des tests unitaires d’intégrations avec un headless browser
• Générer un fichier de AppCache
• Générer des noms de fichiers

Cette liste est très complète mais si l’on veut encore plus de granularité sur le process de build, il est possible de builder un livrable avec différentes cibles (ou target) afin de bien controler le package livré.

Ce n’est pas tout…

Bien sur, je fais une description des parties qui me semblent intéressantes de l’utilisation de Yeoman que je pourrais en faire. Pour voir l’intégralité des services fournit par Yeoman, je ne peux que vous conseiller d’aller lire la documentation complète sur les lignes de commandes.

Generators

Cette partie intéressera uniquement les développeurs d’applications JavaScript, pour les autres passez-votre chemin. Yeoman vient avec son générateur de code pour les projets JavaScript.
Ces générateurs sont capables de générer les controllers, les models d’une application JavaScript. Je n’ai pas trop regardé mais la liste de tous les frameworks supportés sont disponibles sur le dépôt Github du projet.

Conclusion

Yeoman ne me parait pas si révolutionnaire et si intéressant que cela. Ca ressemble à un gros Maven pour le développeur front avec la verbosité qui va bien, mais mis à part la fonctionnalité de build et les generators pour les dev JavaScript, le reste n’est qu’une concaténation d’autres outils.

Du coup, je pense qu’il est plus simple d’importer soit même les modules que l’on souhaite utiliser dans un projet plutôt que d’utiliser Yeoman; par exemple utiliser son propre fichier grunt.js pour le build et de manuellement installer bower pour la gestion des paquets.

Plus le temps passe et moins j’aime les solutions qui font trop de choses, Yeoman rentre exactement dans cette catégorie.

Images : Yeoman