Yeah man !

J'ai découvert hier yeoman. Et yeoman, c'est vraiment top ! Commencer un projet web, c'est toujours un peu intimidant. Même avec un framework bien cadré, on a toujours un peu du mal à trouver pas quoi commencer. Et c'est encore pire avec Node.js qui offre une liberté d'action qui en rebutera plus d'un. Yeoman est là pour vous aider. Il vous propose de construire les fondation de votre webapp à partir de générateurs prédéfinis. Il en existe des tas et vous pourrez d'une simple commande construire une webapp statique avec Bootstrap préinstallé, ou une application MVC basée sur expressjs avec une base de donnée MongoDB. Il se permet aussi d'installer Bower, un outil d'installation de librairies javascript, comme NPM mais pour la partie frontale et il configure Grunt pour vous offrir des fonctions bien pratique comme la fonction serve qui va ouvrir votre navigateur sur la page de votre web app et la recharger tout seul dès que vous sauvegarderez un fichier, mais aussi une commande pour compiler votre webapp afin qu'il ne reste plus qu'à la copier sur votre prod.

Comment ça marche ?

Plutôt bien.
Commençons par l'installer :

sudo npm install -g yo

T'as vu.

Choisir son générateur

La seconde étape est de choisir son générateur parmi la liste déjà très longue proposée par yeoman. Pour l'exemple, nous allons utiliser le générateur de base, webapp :

npm install -g generator-webapp

Placez vous dans le dossier de votre future application et lancez :

yo

Choisissez dans la liste des générateurs disponibles celui de votre choix. Vous pouvez même en chercher et en installer depuis cette interface, c'est vraiment bien foutu. Selon le générateur choisi, il va vous poser quelques questions auxquelle vous répondrez promptement et avec assurance.

Yeoman Install

Ça peut prendre pas mal de temps, parce qu'il installe des tas de trucs selon les générateurs. Mais faite lui confiance et laissez le faire !

Une fois terminé, vous pouvez taper :

grunt serve

Et voir apparaitre un nouvel onglet dans votre navigateur avec votre webapp toute neuve, prête à être écrite !

Vous pouvez utiliser bower pour ajouter des librairies à votre projet et ils seront automajiquement inclus dans votre index.html. Vous pouvez aussi construire un build de votre projet en lançant grunt ou lancer les tests à l'aide de grunt test. Il va compiler vos CSS avec less ou sass (compass) selon ce que votre générateur aura choisi pour vous. Il va aussi vous engueuler à la moindre faute de frappe dans vos fichier javascript à cause de jshint. Pensez à correctement indenter vos accolades et bien mettre des ; à chaque fin de lignes sous peine de vous faire violemment rappeler à l'ordre !

jshint example

Ne reste plus qu'à coder. Au boulot !

Hadrien

Hi, I'm a french Javascript Lead Developer, Web Architect from Toulouse, France. I've worked for 12 years for many projects with YUI, AngularJS, Aurelia.io and now React and React native.

Toulouse, France https://hadrien.eu