Automate your frontend [ESP]

Learn how to automate and boost your frontend to focus on important things.

Transcript

1. Automate your frontend, bitch!
2. EL BACKEND ESCALA Reparte a ~100 usuarios
3. Deliver to ~100 users Reparte a ~1m usuarios EL BACKEND ESCALA
4. Y TAMBIÉN LO HACE EL FRONTEND Deliver to ~100 users Deliver to ~1m users
5. MANERAS DE MEJORAR TU FRONTEND pre-procesadores CSS: LESS, Sass, Stylus… lenguajes compila-a-js: Coffeescript, Typescript, Clojurescript… frameworks en el cliente: AngularJS, Backbone.js, Ember.js… frameworks CSS: Bootstrap, Pure, UIKit, tuktuk…
6. Y TODAS ELLAS TIENEN EN COMÚN…
7. POR QUÉ UN LANZADOR DE TAREAS? AUTOMATIZACIÓN
8. QUÉ TIENE GRUNT DE BUENO? gran ecosistema que crece cada día JAVASCRIPT node.js y npm === gran combinación cientos de plugins enorme flexibilidad
9. Manos a la obra
10. REQUISITOS node.js >= 0.8.0 y npm Gruntfile.js (.coffee) package.json npm install -g grunt-cli
11. PACKAGE.JSON { "name": “bbalm-project", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-uglify": “~0.2.2”, // Todos los demás plugins } } npm install +
12. npm init npm install grunt --save-dev PACKAGE.JSON npm install <module> --save-dev
13. GRUNTFILE.JS module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); ! grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['uglify']); }; función principal configuración carga módulos declara tareas
14. module.exports = function(grunt) { grunt.initConfig({ uglify: { build: { src: 'src/bbalm.js', dest: 'build/bbalm.min.js' } }, concat: { dist: { src: ['src/a.js', 'src/b.js'], dest: 'src/bbalm.js' } } }); ! grunt.loadNpmTasks(‘grunt-contrib-uglify'); grunt.loadNpmTasks(‘grunt-contrib-concat’); ! grunt.registerTask('default', [‘uglify']); grunt.registerTask(‘prod’, [‘concat’, ‘uglify:build’]); };
15. grunt-contrib-clean grunt-contrib-coffee PLUGINS MANTENIDOS POR GRUNT grunt-contrib-compass grunt-contrib-compress grunt-contrib-concat grunt-contrib-connect grunt-contrib-copy grunt-contrib-cssmin grunt-contrib-htmlmin grunt-contrib-imgmin grunt-contrib-jasmine grunt-contrib-jshint grunt-contrib-less grunt-contrib-sass grunt-contrib-watch
16. GRUNT LESS grunt.initConfig({ less: { dev: { options: {sourceMap: true}, files: { “style/bbalm.css": “src/style/bbalm.less” } }, prod: { options: {cleancss: true}, files: { “style/bbalm.min.css”: “src/style/bbalm.less” } } } }); grunt less / grunt less:dev / grunt less:prod
17. GRUNT WATCH grunt.initConfig({ watch: { css: { files: [‘src/style/*.less’], tasks: [‘less:dev’], options: { livereload: 1337, }, }, coffee: { files: [‘src/scripts/*.coffee'], tasks: [‘coffee:src’, ‘coffee:test’, ‘test’], } } }); grunt watch / grunt watch:css / grunt watch:coffee
18. GRUNT CONNECT grunt.initConfig({ connect: { server: { options: { port: 9001, hostname: ‘localhost’, base: ‘dist’, open: true, livereload: 1337 // true } } } }); grunt connect / grunt connect:server
19. TODO JUNTO grunt.loadNpmTasks(‘grunt-contrib-connect'); grunt.loadNpmTasks(‘grunt-contrib-watch'); grunt.loadNpmTasks(‘grunt-contrib-less'); grunt.loadNpmTasks(‘grunt-contrib-coffee'); ! grunt.registerTask('default', [‘connect’, ‘watch’]);
21. SOURCE MAPS //@ sourceMappingURL=/path/to/file.js.map X-SourceMap: /path/to/file.js.map
22. MUCHA MÁS AUTOMATIZACIÓN
23. MUCHA MÁS AUTOMATIZACIÓN crea la estructura básica de tu proyecto y toda la configuración para empezar viene con toda la configuración y tareas para que montes, pruebes y previsualices manejo de dependencias para el navegador para que no tengas que hacerlo a mano
24. REQUISITOS node.js >= 0.8.0 y npm npm install -g yo npm install -g grunt-cli bower npm install -g <generador>
25. APP DE EJEMPLO $ npm install -g generator-webapp $ yo webapp bbalmapp ! $ cd bbalmapp $ bower install underscore ! # lanza la app en un servidor con livereload $ grunt server ! # prepara la aplicación para producción $ grunt
26. YO ANGULAR $ npm install -g generator-angular $ yo angular ! $ bower install angular-ui ! # corre los test unitarios de la app $ grunt test ! # lanza la app en un servidor con livereload $ grunt server ! # prepara la aplicación para producción $ grunt
27. AÚN HAY MÁS $ yo angular:controller miControlador $ yo angular:directive miDirectiva $ yo angular:filter miFiltro $ yo angular:service miServicio
28. “Deja a Grunt hacer todo el trabajo y céntrate en lo importante!” Dirk Ginader
30. ¡Gracias! ¿Preguntas? =)
31. KUDOS grunt.js: http://gruntjs.com/ grunt connect: https://npmjs.org/package/grunt-contrib-connect grunt watch: https://npmjs.org/package/grunt-contrib-watch yeoman: http://yeoman.io/ bower: http://bower.io/ yo angular: https://github.com/yeoman/generator-angular yo webapp: https://github.com/yeoman/generator-webapp