Automatizando tu flujo de trabajo Front-End

@slaramen

Sebastián Lara Menares

Desarrollador de Software @ CEFOP, Universidad de Concepción

Administrador de Paquetes para la Web

Flujo actual

Backbone

• Ir al sitio de Backbone
• Buscar biblioteca
• Versión?
• Descargar desde el sitio? Clonar desde Github?
• Dependencias:
  • Repetir para Underscore
  • Repetir para Handlebars?
• Integrar

Bower

$ bower search leaflet

$ bower install leaflet

$ bower update leaflet

Ventajas

• Instalar paquetes es fácil
  • $ bower install paquete
• Descarga en directorio centralizado bower_components/
• 3800+ paquetes!
• Permite controlar distintas versiones
• Basado en git
• Instala todo en un paso $ bower install
• Archivo de configuración bower.json

  {
    "name": "Bower example",
    "version": "0.0.1",
    "main": "index.html",
  
    "dependencies": {
      "backbone": "~1.1.0",
      "underscore": "latest"
    }
  
  }

Automatizador de Tareas

Automatización Tareas en JavaScript

Para el desarrollador sin tiempo

Ventajas

• Algo así como Rake/Cake/Make/Jake en JavaScript
• Gran ecosistema de plugins (1200+)
• Permite integrar módulos Node.js
• Tiene un logo muy bacán

Gruntfile.js

module.exports = function(grunt) {

  grunt.initConfig({
    uglify: {
      build: {
        src: 'myscript.js',
        dest: 'myscript.min.js'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.registerTask('default', ['uglify']);

};

Generador de Proyectos

Crea la estructura de tu aplicación en base a generadores

Una aplicación típica

$ npm install -g yo
$ npm install -g generator-webapp
$ yo webapp

• Componentes Bower
  • HTML5 Boilerplate
  • Twitter Bootstrap for SASS
  • RequireJS
  • Modernizr
• Build Grunt
  • livereload
  • autoprefixer
  • Compass
  • imagemin, usemin, cssmin, htmlmin, etc.
• Testing (--testingFramework)
  • Mocha
  • Chai
  • PhantomJS
• etc...

+250 generadores

• Mobile
• Wordpress
• Chrome Apps
• Firefox OS
• Express.js
• Etc.

Reveal.js

(Esta presentación)

Incluso crear tus propios generadores

Es simple y puede ser escrito para cualquier Framework. Se integra con tu backend.

generator-generator