Herramientas de desarrollo front-end

por Natalia Ventre el 08/04/2013 ・ podés leerlo en 10 minutos ・

Para desarrollo front-end hay muchísimas herramientas disponibles que suenan bien, pero ¿para qué sirven realmente? ¿en qué me va a beneficiar usarlas? ¿cómo las integro a mi flujo de trabajo?

Bower

Bower es un gestor de paquetes (HTML, CSS, JavaScript) que instala, actualiza y gestiona dependencias.

Por ej. si desde la terminal ejecutás:

bower install jquery-ui

en la carpeta del proyecto, Bower crea una carpeta “components” y descarga jQuery UI y jQuery (dependencia).

Beneficio

Para crear un proyecto es más rápido que descargar, descomprimir y mover los archivos a la carpeta del proyecto manualmente, pero hay paquetes que están en la lista de componentes de Bower y no los instala correctamente1.

Uso

Bower se instala usando Node y npm, como ya los tenía instalados fue muy sencillo. El uso es básicamente bower search, bower install, bower update, son pocos comandos y fáciles de recordar.

CoffeeScript

CoffeeScript es un lenguaje que compila a JavaScript. La sintaxis está inspirada en Ruby y Python. Omite los puntos y coma, llaves, la declaración de variable, el return (siempre ejecuta la última línea de una función) y reemplaza (){} por () -> para representar visualmente una función2.

Por ejemplo:

cafe = (mensaje = "¿Te interesa CoffeScript?") ->
  respuesta = confirm mensaje
  "Tu respuesta es #{respuesta}"

alert cafe()

compila a:

var cafe;

cafe = function(mensaje) {
  var respuesta;

  if (mensaje == null) {
    mensaje = "¿Te interesa CoffeScript?";
  }
  respuesta = confirm(mensaje);
  return "Tu respuesta es " + respuesta;
};

alert(cafe());

Beneficio

CoffeeScript es JavaScript, pero más fácil de escribir y de leer y por lo tanto más fácil de mantener.

Uso

CoffeeScript se puede probar online, instalar con el Node Package Manager y compilarlo via la terminal o usar una aplicación como CodeKit, LiveReload, etc.

1) Instalar CoffeeScript:

npm install -g coffee-script

2) Vigilar y re-compilar un proyecto:

coffee -o js/ -cw coffee/

Grunt

Grunt automatiza tareas repetitivas, por ej.: compilación, concatenación, minificación, tests unitarios, linting, etc.

Para empezar a usar Grunt, hay que instalar3 una serie de cosas, en mi caso:

1) Instalar la CLI (interfaz de la línea de comando):

sudo npm install -g grunt-cli

2) Crear un package.json en la raíz del proyecto:

{
    "name": "Mi Proyecto",
    "version": "1.0"
}

3) Instalar Grunt y los plugins necesarios (en cada proyecto):

npm install grunt --save-dev

npm install grunt-contrib-sass --save-dev
npm install grunt-regarde --save-dev
npm install grunt-contrib-connect --save-dev
npm install grunt-contrib-livereload --save-dev

4) Crear un Gruntfile.js, agregar y configurar las tareas. Tarea de ejemplo4: compilar Sass y recargar el navegador (replicar la funcionalidad de LiveReload):

'use strict';
var path = require('path');
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;

var folderMount = function folderMount(connect, point) {
  return connect.static(path.resolve(point));
};

module.exports = function (grunt) {
  grunt.initConfig({
    connect: {
      livereload: {
        options: {
          port: 9001,
          middleware: function(connect, options) {
            return [lrSnippet, folderMount(connect, options.base)]
          }
        }
      }
    },
    sass: {
      dist: {
        files: {'css/style.css':'sass/style.scss'}
      }
    },
    watch: {
      sass: {
        files: ['**/*.scss'],
        tasks: ['sass']
      },
      css: {
        files: ['**/*.css'],
        tasks: ['livereload']
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-regarde');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-livereload');

  grunt.renameTask('regarde', 'watch');

  grunt.registerTask('default', ['livereload-start', 'connect', 'watch']);
};

5) Ejecutar Grunt:

grunt

Beneficio

Grunt es equivalente a aplicaciones como CodeKit, Hammer, Mixture, etc. pero mucho más personalizable. Se pueden definir distintos sets de tareas, por ej. dev (compilar Sass y CoffeScript) y dist (concatenar y minificar CSS y JS).

Uso

Grunt está bien documentado, cada plugin tiene código de ejemplo, no es difícil de usar, pero tampoco es para principiantes. En el episodio 021 del Build Podcast, que ya lo había mencionado en Recursos para mantenerse actualizado en diseño y desarrollo web, Sayanee muestra cómo empezar a usar Grunt.

LESS, Sass y/o Stylus

En artículos anteriores escribí sobre los beneficios de los pre-procesadores de CSS, la sintaxis de LESS, Sass y Stylus y por qué Sass es mejor.

Beneficio

Los pre-procesadores de CSS ayudan a concentrarse en el aspecto creativo de escribir código porque evitan tener que recordar valores de colores (variables), escribir prefijos para cada navegador (mixins), etc.

Uso

Hay varias aplicaciones amigables para los principiantes, por ej. CodeKit, LiveReload, etc. que compilan LESS, Sass y Stylus y por supuesto se pueden compilar desde la terminal.

Modernizr

Modernizr es una librería de JavaScript que detecta el soporte a características de HTML5 y CSS3 del navegador.

Ejemplo 1: usar un polyfill5 si el navegador no soporta los placeholders HTML5

Modernizr.load({
  test: Modernizr.placeholder,
  nope: 'Placeholders.js'
});

Ejemplo 2: estilo CSS alternativo si el navegador no soporta box-shadow

.no-boxshadow .recuadro{
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

Beneficio

Modernizr te permite aprovechar el potencial de HTML5 y CSS3 en los navagadores modernos y podés elegir para cuáles funcionalidades importantes hay que diseñar un plan B.

Uso

Tiene una versión de desarrollo y para producción se puede seleccionar qué items necesitás y descargar una versión personalizada minificada. Además de la documentación, en el sitio de Modernizr hay una lista de tutoriales.

Normalize.css

Normalize.css es un archivo CSS que reduce las diferencias o “normaliza” los estilos por defecto de cada navegador, no es un reset6.

Beneficio

Además de lo obvio, como por ej. body { margin: 0; } ó img { border: 0 }, normalize.css corrige algunos bugs comunes en todos los navegadores como por ej. que sub y sup afecte la line-height.

Uso

Normalize.css está incluido en el HTML5 Boilerplate y Bootstrap. El creador plantea 2 enfoques para usarlo, personalmente lo incluyo modificado (elimino algunos estilos, pero no personalizo valores).

Yeoman

Yeoman es un conjunto de herramientas, incluyendo Bower y Grunt, optimizadas para el desarrollo de aplicaciones web con MVC/MVVP/MVVM client side (por ej. AngularJS).

1) Crear un proyecto básico:

yo webapp
npm install && bower install

2) Previsualizar en el navegador7:

grunt server

3) Deploy:

grunt build

Beneficio

Yeoman maneja el concepto de opciones por defecto inteligentes, por ej. el pre-procesador de CSS es Sass, los test unitarios son con Mocha, etc. Simplifica y ahorra tiempo principalmente en la etapa de creación de un proyecto nuevo y preparación de los archivos para producción.

Uso

Es un proyecto ambicioso, más que una herramienta es un flujo de trabajo y el uso está muy ligado a las mejores prácticas del desarrollo front-end. Es una manera fácil de empezar a usar las herramientas que incluye.

Zepto

Zepto es una versión recortada de jQuery, compatible con todos los navegadores excepto Internet Explorer, ideal para desarrollar vistas basadas en HTML dentro de frameworks como PhoneGap.

Beneficio

Zepto minificada y gzipeada pesa 9.7kb (jQuery pesa 32Kb). En teoría suena perfecta, pero no es una receta instantánea para hacer un sitio más rápido.

Uso

El slogan es que si sabés jQuery, sabés Zepto. Basta con incluirla al final del documento con un fallback a jQuery:

...
<script src=zepto.min.js></script>
<script>document.write('<script src=' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>')</script>
</body>
</html>

Conclusiones

Cambié varias veces de editor de código y probé distintas aplicaciones para desarrollo front-end, pero las herramientas que realmente cambiaron cómo trabajo son los pre-procesadores de CSS y Grunt.

Hace años atrás, buscando información de cómo usar variables en CSS, llegué al sitio de Sass, pero en su momento (estaba usando Windows) me pareció complicado de usar, y ahora que lo tengo tan integrado al flujo de trabajo, me arrepiento de no haberle sacado provecho apenas lo descubrí.

Grunt me gusta mucho porque hay técnicas, por ej. minificar CSS y JS, que no hay duda que son buena idea, pero a veces porque dan un poquito de trabajo, o requieren usar múltiples mini-herramientas, no se hacen y con Grunt se pueden automatizar todas las tareas necesarias, pero tediosas.


  1. Por ej. Bower no instala la dependencia de Backbone.js (Underscores.js).

  2. Meet CoffeeScript de PeepCode tienen animaciones que muestran claramente cómo se pasa de JavaScript a CoffeeScript (un ejemplo disponible en la free preview).

  3. -g instala globalmente (se puede ejecutar desde cualquier directorio) y –save-dev guarda en el package.json

  4. Esta tarea no ejemplifica el potencial de Grunt.

  5. En HTML5 Please hay una lista de características HTML5 y CSS3 y sugerencias en cuanto a su uso (usar, usar con fallback, usar con polyfill, evitar).

  6. Un reset de CSS hace cosas estúpidas como por ej. eliminar todos los márgenes.

  7. Nota a mí misma: cerrar la aplicación LiveReload para evitar errores (Got error listen EADDRINUSE).