Livecoding avec Yeoman & AngularJS

Matthieu Lux

• Développeur & Architecte chez Zenika Lyon
  • JavaScript: AngularJS, jQuery, Yeoman, Grunt...
  • Java : Spring, MVC, Data, Integeration
  • Mobilité : Android, PhoneGap


• Twitter : @Swiip


• Blog : http://swiip.github.io/


• Anciennement : ArchetypeJS

• A l'Epitech, le "premier" Mardi du mois


• Prochaine session : le 7 Mai


• Toute l'actu : @LyonJS


• Site : http://lyonjs.org

MODERN WORKFLOWS FOR MODERN WEBAPPS

L'équipe

• Paul Irish
• Addy Osmani
• Sindre Sorhus
• Mickael Daniel
• Eric Bidelman

yo webapp
yo angular
yo backbone

yo <generator> - generate template project with the generator
yo --help
                

bower search <dep> - search for a dependency in the Bower registry
bower install <dep>..<depN> - install one or more dependencies
bower list - list out the dependencies you have installed
bower update <dep> - update a dependency to the latest version
        

'use strict';
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};

module.exports = function (grunt) {
    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // configurable paths
    var yeomanConfig = {
        app: 'app',
        dist: 'dist'
    };

    grunt.initConfig({
        yeoman: yeomanConfig,
        watch: {
            coffee: {
                files: ['<%= yeoman.app %>/scripts/*.coffee'],
                tasks: ['coffee:dist']
            },
            coffeeTest: {
                files: ['test/spec/*.coffee'],
                tasks: ['coffee:test']
            },
            compass: {
                files: ['<%= yeoman.app %>/styles/*.{scss,sass}'],
                tasks: ['compass']
            },
            livereload: {
                files: [
                    '<%= yeoman.app %>/*.html',
                    '{.tmp,<%= yeoman.app %>}/styles/*.css',
                    '{.tmp,<%= yeoman.app %>}/scripts/*.js',
                    '<%= yeoman.app %>/images/*.{png,jpg,jpeg}'
                ],
                tasks: ['livereload']
            }
        },
        connect: {
            livereload: {
                options: {
                    port: 9000,
                    middleware: function (connect) {
                        return [
                            lrSnippet,
                            mountFolder(connect, '.tmp'),
                            mountFolder(connect, 'app')
                        ];
                    }
                }
            },
            test: {
                options: {
                    port: 9000,
                    middleware: function (connect) {
                        return [
                            mountFolder(connect, '.tmp'),
                            mountFolder(connect, 'test')
                        ];
                    }
                }
            }
        },
        open: {
            server: {
                url: 'http://localhost:<%= connect.livereload.options.port %>'
            }
        },
        clean: {
            dist: ['.tmp', '<%= yeoman.dist %>/*'],
            server: '.tmp'
        },
        jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            all: [
                'Gruntfile.js',
                '<%= yeoman.app %>/scripts/*.js',
                'test/spec/*.js'
            ]
        },
        mocha: {
            all: {
                options: {
                    run: true,
                    urls: ['http://localhost:<%= connect.test.options.port %>/index.html']
                }
            }
        },
        coffee: {
            dist: {
                files: {
                    '.tmp/scripts/coffee.js': '<%= yeoman.app %>/scripts/*.coffee'
                }
            },
            test: {
                files: [{
                    expand: true,
                    cwd: '.tmp/spec',
                    src: '*.coffee',
                    dest: 'test/spec'
                }]
            }
        },
        compass: {
            options: {
                sassDir: '<%= yeoman.app %>/styles',
                cssDir: '.tmp/styles',
                imagesDir: '<%= yeoman.app %>/images',
                javascriptsDir: '<%= yeoman.app %>/scripts',
                fontsDir: '<%= yeoman.app %>/styles/fonts',
                importPath: 'app/components',
                relativeAssets: true
            },
            dist: {},
            server: {
                options: {
                    debugInfo: true
                }
            }
        },
        // not used since Uglify task does concat,
        // but still available if needed
        /*concat: {
            dist: {}
        },*/

        uglify: {
            dist: {
                files: {
                    '<%= yeoman.dist %>/scripts/main.js': [
                        '.tmp/scripts/*.js',
                        '<%= yeoman.app %>/scripts/*.js'
                    ],
                }
            }
        },
        useminPrepare: {
            html: '<%= yeoman.app %>/index.html',
            options: {
                dest: '<%= yeoman.dist %>'
            }
        },
        usemin: {
            html: ['<%= yeoman.dist %>/*.html'],
            css: ['<%= yeoman.dist %>/styles/*.css'],
            options: {
                dirs: ['<%= yeoman.dist %>']
            }
        },
        imagemin: {
            dist: {
                files: [{
                    expand: true,
                    cwd: '<%= yeoman.app %>/images',
                    src: '*.{png,jpg,jpeg}',
                    dest: '<%= yeoman.dist %>/images'
                }]
            }
        },
        cssmin: {
            dist: {
                files: {
                    '<%= yeoman.dist %>/styles/main.css': [
                        '.tmp/styles/*.css',
                        '<%= yeoman.app %>/styles/*.css'
                    ]
                }
            }
        },
        htmlmin: {
            dist: {
                options: {
                    /*removeCommentsFromCDATA: true,
                    // https://github.com/yeoman/grunt-usemin/issues/44
                    //collapseWhitespace: true,
                    collapseBooleanAttributes: true,
                    removeAttributeQuotes: true,
                    removeRedundantAttributes: true,
                    useShortDoctype: true,
                    removeEmptyAttributes: true,
                    removeOptionalTags: true*/
                },
                files: [{
                    expand: true,
                    cwd: '<%= yeoman.app %>',
                    src: '*.html',
                    dest: '<%= yeoman.dist %>'
                }]
            }
        },
        copy: {
            dist: {
                files: [{
                    expand: true,
                    dot: true,
                    cwd: '<%= yeoman.app %>',
                    dest: '<%= yeoman.dist %>',
                    src: [
                        '*.{ico,txt}',
                        '.htaccess'
                    ]
                }]
            }
        },
        bower: {
            rjsConfig: 'app/scripts/main.js',
            indent: '    '
        }
    });

    grunt.renameTask('regarde', 'watch');
    // remove when mincss task is renamed
    grunt.renameTask('mincss', 'cssmin');

    grunt.registerTask('server', [
        'clean:server',
        'coffee:dist',
        'compass:server',
        'livereload-start',
        'connect:livereload',
        'open',
        'watch'
    ]);

    grunt.registerTask('test', [
        'clean:server',
        'coffee',
        'compass',
        'connect:test',
        'mocha'
    ]);

    grunt.registerTask('build', [
        'clean:dist',
        //'jshint',
        'test',
        'coffee',
        'compass:dist',
        'useminPrepare',
        'imagemin',
        'cssmin',
        'htmlmin',
        'concat',
        'uglify',
        'copy',
        'usemin'
    ]);

    grunt.registerTask('default', ['build']);
};
              

grunt - build an optimized, production-ready version of your app
grunt server - preview an app you have generated (with Livereload)
grunt test  - run the unit tests for an app
              

Imperative

Old browsers & Pure JS

<!-- HTML -->
  <h3 id="greeting"></h3>

// JavaScript
  var isIE = document.attachEvent;
  var addListener = isIE
    ? function(e, t, fn) { e.attachEvent('on' + t, fn); }
    : function(e, t, fn) { e.addEventListener(t, fn, false); };
  addListener(window, 'load', function() {
    var greeting = document.getElementById('greeting');
    if (isIE) greeting.innerText = 'Hello World!';
    else greeting.textContent = 'Hello World!';
  });

Imperative ++

jQuery era

<!-- HTML -->
    <h3 id="greeting-jquery"></h3>
    <input type="text" id="greeting-input-jquery"/>

// JavaScript
    $(function() {
        var greeting = $('#greeting-jquery');
        var input = $('#greeting-jquery-input');
        greeting.html('Hello World!');
        input.val('Hello World!');
        input.keyup(function() {
            greeting.html(input.val());
        });
    });

Declarative

Injection + MVC + Binding

<!-- HTML -->
    <div ng-controller="controller">
        <h3>{{greeting}}</h3>
        <input type="text" ng-model="greeting"/>
    </div>

// JavaScript
    function controller($scope) {
        $scope.greeting = 'Hello World!';
    }