Les générateurs de code, pour se simplifier la vie au quotidien. Talk présenté le 8 mars 2016 au meetup Human Talks Paris.

1. 1
LESLES GÉNÉRATEURS DE CODEGÉNÉRATEURS DE CODE,,
POUR SEPOUR SE SIMPLIFIER LA VIESIMPLIFIER LA VIE AU QUOTIDIENAU QUOTIDIEN

2. 2
@NICOESPEON@NICOESPEON
http://nicoespeon.com

3. 3
QUELQUESQUELQUES USE CASESUSE CASES
Un nouveau projet en mode proto
On veut juste quelque chose qui marche rapidement et
nous permet de coder
Un nouveau projet selon des standards persos
Pour ré-utiliser nos outils / conventions (ex: freelances)
Création d’un nouveau fichier au quotidien
Quelles sont les conventions ? Est-ce-que je dois l’instancier
quelque part ?…

4. 4 . 1
QU’EST-CE-QU’UNQU’EST-CE-QU’UN GÉNÉRATEUR DE CODEGÉNÉRATEUR DE CODE??

5. 4 . 2
LE PRINCIPELE PRINCIPE
1. On lance une commande
2. On répond à quelques questions
3. TADAAA ! Les fichiers sont générés !
Éviter d'aller copier/coller un autre fichier « similaire » (lequel ?),
puis supprimer les lignes inutiles et déclarer tout ça où il faut
(sans se tromper ?)

6. 4 . 3
GAIN DE TEMPSGAIN DE TEMPS AU SCAFFOLD D’UN PROJETAU SCAFFOLD D’UN PROJET

7. 4 . 4
GAIN DE TEMPSGAIN DE TEMPS && MOINS D'ERREURSMOINS D'ERREURS AU QUOTIDIENAU QUOTIDIEN

8. 5 . 1
EXEMPLE DE GÉNÉRATEUR JS #1 :EXEMPLE DE GÉNÉRATEUR JS #1 :
YEOMANYEOMAN

9. 5 . 2
«« THE WEB'STHE WEB'S SCAFFOLDING TOOLSCAFFOLDING TOOL FOR MODERN WEBAPPSFOR MODERN WEBAPPS »»
Très populaire
Facile à installer / utiliser
Language agnostic (Web, Java, Python, C#, etc.)
De nombreux generators pour scaffold un projet
standard :
On peut créer et publier son propre générateur
yeoman.io/generators/

10. 5 . 3
EN PRATIQUEEN PRATIQUE
npm install -g yo
npm install -g generator-webapp
Installer Yeoman
Installer un générateur
yo webappScaffold un projet
yo angular:controller MyNewControllerBootstrap un fichier
Getting started: http://yeoman.io/learning/index.html

11. 6 . 1
EXEMPLE DE GÉNÉRATEUR JS #2 :EXEMPLE DE GÉNÉRATEUR JS #2 :
PLOPPLOP

12. 6 . 2
KEZAKOKEZAKO PLOPPLOP ??
« Micro-generator framework that makes it easy for an entire
team to create files with a level of uniformity »
Le projet n’est pas forcément standard
Créer un générateur, le publier et le maintenir dans un
dépôt distinct n’a pas forcément de valeur ajoutée
Au quotidien, ce serait quand même bien pratique
Getting started: https://github.com/amwmedia/plop

13. 6 . 3
EN PRATIQUEEN PRATIQUE
Dans le projet :
plopfile.js
des templates
module.exports = function (plop) {};
npm install -g plop
Installer Plop

14. 6 . 4
POURQUOIPOURQUOI PLOPPLOP PLUTÔT QUEPLUTÔT QUE YEOMANYEOMAN ??
Léger, embarqué dans le projet =
maintenance plus simple
Simple à prendre en main, plus
facilement adopté car peu coûteux

15. 6 . 5
DES USE CASESDES USE CASES DIFFÉRENTSDIFFÉRENTS
scaffold un nouveau projet
selon des standards
bootstrap de nouveaux
fichiers dans le cadre de
ce projet (standard)
PlopYeoman
bootstrap de nouveaux fichiers
selon les standards
personnalisés d'un projet

16. 7
MERCI !MERCI ! DES QUESTIONS ?DES QUESTIONS ?
Pour découvrir plop plus en détail : http://bit.ly/22hX160

17. 8 . 1
LES TEMPLATESLES TEMPLATES
C'est du !Handlebars
/**
* TODO - Describe what your model does.
*
* @class {{pascalCase name}}.Model
* @module {{pascalCase name}}
* @constructor
*/
import {Model} from "backbone";
export default Model.extend( {
initialize() {
// Executed on model initialization
}
} );
On a accès :
aux variables du prompt
aux / définishelpers partials
plop.addHelper( name, helper );
plop.addPartial( name, template );
Dans plopfile.js :

18. 8 . 2
CRÉER UN GÉNÉRATEURCRÉER UN GÉNÉRATEUR
module.exports = function ( plop ) {
plop.setGenerator( "module", {
description: "create a new module",
prompts: [],
actions: []
} );
};
plop.setGenerator( name, config );
Création Utilisation

19. 8 . 3
GÉNÉRATEURGÉNÉRATEUR −− PROMPTSPROMPTS
module.exports = function ( plop ) {
plop.setGenerator( "module", {
description: "create a new module",
prompts: [
{
type: "input",
name: "name",
message: "What is your module name?",
validate: function (value) {
if ((/.+/).test(value)) { return true; }
return "name is required";
}
}
],
// …
} );
};
C'est du !Inquirer

20. 8 . 4
GÉNÉRATEURGÉNÉRATEUR −− ACTIONSACTIONS
module.exports = function ( plop ) {
plop.setGenerator( "module", {
description: "create a new module",
// …
actions: [
{
type: "add",
path: "modules/{{camelCase name}}.js",
templateFile: "templates/module.js"
}
]
} );
};
3 types d'actions :
add
modify
custom (fonction)
Strings parsées avec Handlebars

21. 8 . 5
GÉNÉRATEURGÉNÉRATEUR −− ACTIONSACTIONS
actions: function( data ) {
var actions = [];
if( data.wantTacos ) {
actions.push( {
type: "add",
path: "folder/{{dashCase name}}.txt",
templateFile: "templates/tacos.txt"
} );
} else {
actions.push( {
type: "add",
path: "folder/{{dashCase name}}.txt",
templateFile: "templates/burritos.txt"
} );
}
return actions;
}
actions peut aussi être une
fonction qui :
prend les réponses de
prompts en paramètre
retourne le tableau des
actions à effectuer
Permet d'adapter les actions en
fonction des réponses données