AMBIENT INTELLIGENCE
tech days•
2015
#mstechdays techdays.microsoft.fr
Grunt / Bower / Yeoman ou comment
automatiser le développement d'un
projet web SPA
Maxime LUCE
CEO @ Touchify
maxime@touch...
tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdays
 Gestion des dépendances
 Compilation / Minification / Tests / Linting
 Développement
Tâches ...
tech.days 2015#mstechdays
 Node.JS
 Scripts simples mais puissant
 Projet web donc javascript !
Outils d’automatisation...
tech.days 2015#mstechdays
 Bower ?
 Grunt ?
 Yeoman ?
Outils d’automatisation
Comment automatiser le développement d'un...
tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdays
 Gestionnaire de librairies JS / CSS
 Utilisé pour installer et mettre à jour les librairies
...
tech.days 2015#mstechdays
 Registre de librairies JS / CSS
 Enregistre les versions dans un fichier bower.json
 Arbre d...
Bower
# install bower
$ npm install –g bower
# install a package
$ bower install jquery --save
#install from github
$ bowe...
tech.days 2015#mstechdays
Bower
Comment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdays
 Gestionnaire de tâches Node.JS
 Automatise les tâches récurrentes
 Enormément de tâches dans...
tech.days 2015#mstechdays
 Configuration dans un fichier Gruntfile.js
 Tâches dans NPM ou en local
 Simple !!
Comment ç...
Grunt CLI
# install grunt globally
$ npm install –g grunt-cli
# install grunt locally
$ npm install grunt --save-dev
# ins...
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
// task config
concat: {
dist: {
src: "app/*.js",
dest...
tech.days 2015#mstechdays
Grunt
Comment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdays
 Gestionnaire de template de projets
 Simplifie la création de projet et d’éléments
 Force l’...
tech.days 2015#mstechdays
 Générateurs dans NPM
 Utilise Bower pour gérer les dépendances
 Utilise Grunt pour gérer les...
Yeoman
# install yeoman
$ npm install –g yo
# install generator
$ npm install –g generator-backbone
# run generator
$ yo b...
tech.days 2015#mstechdays
Yeoman
Comment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
Create a simple Grunt Task
module.exports = function (grunt) {
grunt.registerTask("myCustomTask", function () {
// read pa...
Create a multi Grunt Task
module.exports = function (grunt) {
grunt.registerMultiTask("myVersionTask", function () {
var p...
Create a multi Grunt Task
module.exports = function (grunt) {
grunt.initConfig({
// task config
myVersionTask: {
dist: {
s...
tech.days 2015#mstechdays
Grunt avancé
Comment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
Create a Template
• app/
• templates/
• …
• index.js
• model/
• templates/
• …
• index.js
Create a Template
var yeoman = require("yeoman-generator");
var CustomGenerator = yeoman.generators.Base.extend({
construc...
Create a Template
// prompting
var prompts = [{
type: "text",
name: "title",
message: "Title of the application"
}];
this....
tech.days 2015#mstechdays
Yeoman avancé
Comment automatiser le développement d'un projet web SPA
tech.days 2015#mstechdays
 Slides :
http://fr.slideshare.net/Touchify/grunt-bower-yeoman-ou-comment-
automatiser-un-proje...
© 2015 Microsoft Corporation. All rights reserved.
tech days•
2015
#mstechdays techdays.microsoft.fr
Grunt, Bower, Yeoman ou comment automatiser un projet web SPA
Prochain SlideShare
Chargement dans…5
×

Grunt, Bower, Yeoman ou comment automatiser un projet web SPA

1 867 vues

Publié le

Slides de la présentation Grunt, Bower, Yeoman ou comment automatiser un projet web SPA aux Microsoft TechDays 2015.

Introduction aux outils Grunt, Bower, Yeoman et en quoi ils sont liés.

Dans cette session, nous présenterons les bienfaits de l'automatisation, notamment dans les projets web complexes.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 867
Sur SlideShare
0
Issues des intégrations
0
Intégrations
900
Actions
Partages
0
Téléchargements
35
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Projets web moderne
    Beaucoup de librairies
    Beaucoup de Javascript
    Nécessité plus grande de travailler le javascript (compilation, concaténation, minification)
  • Beaucoup de librairies = long et fastidieux de gérer les versions
    Beaucoup de javascript = énormément de tâches pour maintenir le javascript sain et léger
    Tâches répétitives dans le développement = énormément de tâches répétitives (modèles, viewmodels, views, configuraiton)
  • Node.JS ? NPM ?
    On fait du web donc on fait du javascript
    Simple et puissant (beaucoup de package dans NPM)
  • Gestionnaires de librairies au même titre que NuGet ou NPM
    Gère les versions et les dépendances
  • Registre pour recherche et informations sur les packages
    Évite d’enregistrer les versions sur le repo
    Requiert une seule version pour chaque package pour assurer la rapidité de chargement des page et force la vérification de la compatibilité des versions
  • Bower install
    Bower update
  • Tâches récurrentes :
    Compilation (concaténation / minification)
    Tests (unitaires / lint)
    Spriting
    Versionning
  • Grunt tasks
    Grunt watch
  • Exemples de générateurs :
    Webapp
    Angular
    MEAN
    Backbone
    Ember
    Durandal

    Bien fait  Bonne pratiques
    Maintient des bonnes pratiques grâces aux sub generators
  • Beaucoup de générateurs
    Basé sur bower et grunt donc réutilisation des compétences
  • Run yo backbone in tmp
    0.0.1 grunt serve
    Run yo backbone:models user view router
    0.0.3 grunt serve
    Run model repository collection userrepo view repository
    0.0.6 grunt serve
    0.1.0 grunt serve (si -30min)
  • 0.1.1 explain
  • run yo generator in tmp
    0.1.3 explain
  • Grunt, Bower, Yeoman ou comment automatiser un projet web SPA

    1. 1. AMBIENT INTELLIGENCE tech days• 2015 #mstechdays techdays.microsoft.fr
    2. 2. Grunt / Bower / Yeoman ou comment automatiser le développement d'un projet web SPA Maxime LUCE CEO @ Touchify maxime@touchify.co @TouchifyApp
    3. 3. tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
    4. 4. tech.days 2015#mstechdays  Gestion des dépendances  Compilation / Minification / Tests / Linting  Développement Tâches récurrentes d’un projet web Comment automatiser le développement d'un projet web SPA
    5. 5. tech.days 2015#mstechdays  Node.JS  Scripts simples mais puissant  Projet web donc javascript ! Outils d’automatisation Comment automatiser le développement d'un projet web SPA
    6. 6. tech.days 2015#mstechdays  Bower ?  Grunt ?  Yeoman ? Outils d’automatisation Comment automatiser le développement d'un projet web SPA
    7. 7. tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
    8. 8. tech.days 2015#mstechdays  Gestionnaire de librairies JS / CSS  Utilisé pour installer et mettre à jour les librairies  Assure l’intégrité des versions Définition Comment automatiser le développement d'un projet web SPA
    9. 9. tech.days 2015#mstechdays  Registre de librairies JS / CSS  Enregistre les versions dans un fichier bower.json  Arbre de dépendances plat Comment ça marche ? Comment automatiser le développement d'un projet web SPA
    10. 10. Bower # install bower $ npm install –g bower # install a package $ bower install jquery --save #install from github $ bower install user/repo --save-dev # install from url $ bower install http://path.to/script.js
    11. 11. tech.days 2015#mstechdays Bower Comment automatiser le développement d'un projet web SPA
    12. 12. tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
    13. 13. tech.days 2015#mstechdays  Gestionnaire de tâches Node.JS  Automatise les tâches récurrentes  Enormément de tâches dans NPM Définition Comment automatiser le développement d'un projet web SPA
    14. 14. tech.days 2015#mstechdays  Configuration dans un fichier Gruntfile.js  Tâches dans NPM ou en local  Simple !! Comment ça marche ? Comment automatiser le développement d'un projet web SPA
    15. 15. Grunt CLI # install grunt globally $ npm install –g grunt-cli # install grunt locally $ npm install grunt --save-dev # install a task $ npm install grunt-contrib-concat --save-dev # run a task $ grunt concat:dist
    16. 16. Gruntfile.js module.exports = function (grunt) { grunt.initConfig({ // task config concat: { dist: { src: "app/*.js", dest: "dist/app.js" } } }); // load task grunt.loadNpmTasks("grunt-contrib-concat"); // alias task grunt.registerTask("build", ["concat:dist"]); };
    17. 17. tech.days 2015#mstechdays Grunt Comment automatiser le développement d'un projet web SPA
    18. 18. tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
    19. 19. tech.days 2015#mstechdays  Gestionnaire de template de projets  Simplifie la création de projet et d’éléments  Force l’utilisation de bonnes pratiques Définition Comment automatiser le développement d'un projet web SPA
    20. 20. tech.days 2015#mstechdays  Générateurs dans NPM  Utilise Bower pour gérer les dépendances  Utilise Grunt pour gérer les tâches de compilation Comment ça marche ? Comment automatiser le développement d'un projet web SPA
    21. 21. Yeoman # install yeoman $ npm install –g yo # install generator $ npm install –g generator-backbone # run generator $ yo backbone # run sub generator $ yo backbone:model user
    22. 22. tech.days 2015#mstechdays Yeoman Comment automatiser le développement d'un projet web SPA
    23. 23. tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
    24. 24. Create a simple Grunt Task module.exports = function (grunt) { grunt.registerTask("myCustomTask", function () { // read package.json to get version var pkg = grunt.file.readJSON("package.json"); // get the version.js content var content = grunt.file.read("version.js"); // replace the tag {{version}} by the package’s version content = content.replace("{{version}}", pkg.version); // write the new content into version.js grunt.file.write("version.js", content); }); };
    25. 25. Create a multi Grunt Task module.exports = function (grunt) { grunt.registerMultiTask("myVersionTask", function () { var pkg = grunt.file.readJSON("package.json"); // loop over configured files this.files.forEach(function (file) { // loop over src / dest match file.src.forEach(function (src) { var content = grunt.file.read(src); content = content.replace("{{version}}", pkg.version); grunt.file.write("version.js", file.dest); }); }); }); };
    26. 26. Create a multi Grunt Task module.exports = function (grunt) { grunt.initConfig({ // task config myVersionTask: { dist: { src: "app/**/*.js", dest: "dist/" } } }); // load task from local directory grunt.loadTasks("tasks"); // alias task grunt.registerTask("build", ["myVersionTask:dist"]); };
    27. 27. tech.days 2015#mstechdays Grunt avancé Comment automatiser le développement d'un projet web SPA
    28. 28. tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
    29. 29. Create a Template • app/ • templates/ • … • index.js • model/ • templates/ • … • index.js
    30. 30. Create a Template var yeoman = require("yeoman-generator"); var CustomGenerator = yeoman.generators.Base.extend({ constructor: function () { }, prompting: function () { }, writing: { git: function () { }, bower: function () { }, gruntfile: function () { }, index: function () { }, mainjs: function () { }, }, install: function () { }, }); module.exports = CustomGenerator;
    31. 31. Create a Template // prompting var prompts = [{ type: "text", name: "title", message: "Title of the application" }]; this.prompt(prompts, function (answers) { this.title = answers.title; }); // writing this.fs.copy(this.templatePath("gitattributes"), this.destinationPath(".gitattributes")); this.fs.copyTpl(this.templatePath("_gruntfile.js"), this.destinationPath("Gruntfile.js"), { arg1: "value1" }); // installing this.installDependencies({ skipInstall: this.options["skip-install"] });
    32. 32. tech.days 2015#mstechdays Yeoman avancé Comment automatiser le développement d'un projet web SPA
    33. 33. tech.days 2015#mstechdays  Slides : http://fr.slideshare.net/Touchify/grunt-bower-yeoman-ou-comment- automatiser-un-projet-web-spa  Démo : https://github.com/spatools/techdays2015  Documentations : http://bower.io http://gruntjs.com http://yeoman.io Liens Comment automatiser le développement d'un projet web SPA
    34. 34. © 2015 Microsoft Corporation. All rights reserved. tech days• 2015 #mstechdays techdays.microsoft.fr

    ×