YEOMANModern web app workflow

mercredi 1 mai 13

whoami

Louis-Michel Couture ( twitter @louim )

Développeur web chez Chalifour / Nebbio

mercredi 1 mai 13

Une combinaison d’outils

mercredi 1 mai 13

Yeoman : permet de «scaffolder» une nouvelle application web. Crée la configuration de Grunt, et «pull» les Grunt tasks

Bower : Gestionnaire de dépendances. S’occupe de télécharger et de gérer les scripts requis.

Grunt : Build, preview, test. Permet de developper en local, de rouler la suite de test, et compiler une version «production».

mercredi 1 mai 13

One command to rule (install) them all:

npm install -g yo

Sass + Compass optionnel si souhaité.

Installation

mercredi 1 mai 13

FeaturezzLightning-fast scaffolding

Great build process

Automatically compile CoffeeScript & Compass

Automatically lint your scripts

Built-in preview server

Awesome Image Optimization

Killer package management

PhantomJS Unit Testing

mercredi 1 mai 13

Exemple de workflow Angularnpm install -g generator-angular \ generator-karma

yo angular

bower install angular-ui

grunt test

grunt server

grunt

mercredi 1 mai 13

Les Générateurs

mercredi 1 mai 13

Générateurs

Fonctionne à la manière du Scaffolding dans Rails.

yo angular:controller myController

yo angular:directive myDirective

yo angular:filter myFilter

Permet de démarrer rapidement un projet.

Supporte plusieurs types de projets

mercredi 1 mai 13

Générateurswebapp

angular

backbone

bbb (backbone boilerplate)

ember

chromeapp

chrome-extension

bootstrap

mocha

karma

mercredi 1 mai 13

Générateurs

Pour ceux qui sont vraiment meta, il existe un générateur de générateur. (generatorception)

Permet de générer des générateur selon le besoin spécifique

mercredi 1 mai 13

Bower

mercredi 1 mai 13

Bower

Gestion de dépendances facile, Côté client.

bower search <something>

bower install <something>

bower list

bower update <something>

mercredi 1 mai 13

Bower

Liste complète des packages disponible:

http://sindresorhus.com/bower-components/

mercredi 1 mai 13

Grunt

mercredi 1 mai 13

Grunt

Javascript task runner

Permet de créer et d’automatiser des opérations sur le projet.

grunt test

grunt server

grunt

mercredi 1 mai 13

Grunt

Compile: Coffee, SASS/Compass

LiveReload

Jslint

WebServer

Anything else

mercredi 1 mai 13

DEMO!

mercredi 1 mai 13