¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Yeoman: Herramientas y Frameworks para tus aplicaciones web

Hasta no hace mucho, mi trabajo con la web era un poco de HTML por aquí, algo de CSS por allá, JavaScript cutre por otro lado y… bueno, a eso no se le puede llamar página web del todo pero servía.

Poco a poco las tecnologías comenzaron a avanzar, comencé a aprender otras cosas algo más avanzadas y viene la necesidad de adaptarte a dispositivos móviles y tablets que, aunque pueden ejecutar el código e interpretarlo con casi el mismo rendimiento, el ancho de banda del que disponen en muchas ocasiones, es bastante limitado. Lees consejos sobre comprimir las imágenes, CSS y JavaScript y algo te dice que WinRar no te ayudará para esta tarea…

Después descubrí Codekit, para Mac. Que sin duda me ayudó enormemente a mejorar mi flujo de trabajo y a conseguir archivos más optimizados pero claro… es de pago y es para Mac.

Pero de repente, de la mano de ilustres en este mundillo de hacer la web un mundo mejor, ha llegado Yeoman. Una herramienta que hace todo lo que necesitamos por nosotros, sin entrometerse mucho en nuestro trabajo.

Yeoman – Un galante inglés

¿Qué es Yeoman? Tal y como explican sus autores en su página web, Yeoman es:

Un robusto conjunto para el lado del cliente compuesto por herramientas y frameworks que pueden ayudar a los desarrolladores a crear rápidamente bonitas aplicaciones web Yeoman
Para que nos entendamos, Yeoman es un conjunto de herramientas construidas sobre [Node.js](http://nodejs.org/) y que lleva a cabo una serie de tareas (bajo demanda, claro…) para hacernos la vida más fácil a la hora de desarrollar aplicaciones. Con unos pocos comandos, Yeoman se encargará de crear esqueletos para aplicaciones, comprimir imágenes o concatenar unos pocos CSS por poner un ejemplo. Por si fuera poco, Yeoman puede activar un sencillo servidor web en un directorio en particular para que puedas probar tu herramienta. Si manejas frameworks como [Backbone](http://backbonejs.org/), [Ember](http://emberjs.com/) o [Angularjs](http://angularjs.org/), Yeoman te puede ayudar a crear código básico para tus Modelos, Vistas y Controladores. ### Instalando Yeoman Antes de que sigas leyendo, Yeoman solo está disponible para Linux y Mac aunque el soporte para Windows está en camino. Además, necesita que tengas instalado en tu máquina una versión 0.8.x de Node.js. Además, quiero advertir que Yeoman es un CLI. Es decir, todo va por consola. Si esto te desanima, ¡anímate! ¡Usar Yeoman es realmente sencillo!
La instalación de Node.js está fuera del alcance de este artículo y, aunque no es demasiado complicado, pronto quiero empezar a escribir artículos sobre la programación con Node.js desde el inicio.
La instalación de Yeoman es muy sencilla. Abre tu terminal y escribe: `curl -L get.yeoman.io | bash` A no ser que seas `root`, cosa que no deberías, Yeoman nos pedirá una contraseña para revisar una serie de dependencias:
Yeoman se encargará de instalar todas las dependencias que necesita y es posible (y probable) que te pida un par de veces más la contraseña. Yeoman te ayudará en la medida de lo posible a instalar las dependencias, pero no lo hará por ti.

Puedes automatizar el proceso de instalación ejecutando el siguiente script, que revisará las dependencias y las instalará por ti.

curl -L https://github.com/tomlane/Yeoman-scripts/blob/master/scripts/old-installer.sh | bash

Esta automatización ha sido eliminado de Yeoman recientemente por motivos que desconozco.

¿Podría usted ayudarme, Yeoman?

A pesar de ser una herramienta de línea de comandos, uno de los puntos fuertes de Yeoman es que su ayuda es realmente sencilla e intuitiva de usar. Lamentablemente está en inglés.

Yeoman, como buen caballero, permite que le preguntes en cualquier momento para ayudarte a comprender su funcionamiento. Si hay algo que no te quede claro, ¡pregúntale!

Por ejemplo, lo has instalado y quieres saber qué puedes hacer. Pregúntale.

$ yeoman

Nuestro amigo nos mostrará una serie de comandos que puede ejecutar:

Si quieres, por ejemplo saber más sobre un comando, puedes pedirle ayuda sobre un comando en concreto:

$ yeoman lookup --help

Vamos al lío

Una vez que hayamos terminado todo el proceso de instalación ya estamos preparados para comenzar a usar Yeoman. Vamos a crear una aplicación de ejemplo. El típico TODO. Abre tu terminal y crea una carpeta donde quieras tener guardado tu proyecto. En Documentos en mi caso. Lo primero que haremos es pedirle a Yeoman que inicie su trabajo: yeoman init

 $ cd ~/Documents $ mkdir todo $ cd todo $ yeoman init

Yeoman comenzará a hacernos algunas preguntas rápidas y fáciles. Responde si o no en función de los requisitos de tu proyecto.

Lo primero que nos pregunta Yeoman es si queremos incluir los estilos y plugins de Bootstrap de Twitter. Después, Yeoman nos preguntará si queremos incluir RequireJS (para soporte AMD). Finalmente, Yeoman nos pregunta si queremos escribir dar soporte para módulos ECMAScript 6. Tras responder, Yeoman se pondrá manos a la obra.

Si habéis sido curiosos y habéis escrito yeoman init --help habréis observado que Yeoman nos ofrece más comandos para init. Por ejemplo yeoman init ember-starter que nos inicia un proyecto de Ember.js. El más interesante sin duda es el siguiente:

yeoman init quickstart  

Este modo nos permite meter lo básico. HTML5 Boilerplate, jQuery y Modernizr. Genial para empezar una nueva web sencilla.

Volviendo a nuestra aplicación. Veamos como Yeoman ha dejado nuestra carpeta todo:

Instalando paquetes con Yeoman

Aun nos queda mucho por aprender con Yeoman. Vamos a ver cómo podemos buscar e instalar frameworks o librerías. Normalmente tendrías que bajártelas a mano, probablemente usando Google, y guardarlo en la carpeta js o scripts de tu proyecto. Yeoman incluye la última joya de Twitter, Bower, que te ayuda a evitar todo esto. Dale un nombre y se encargará de intentar buscarlo por ti.

Vamos a intentar instalar normalize-css. Una hoja de estilos que intenta que los navegadores rendericen los elementos en la página de forma más consitente entre diferentes navegadores.

$ yeoman install normalize-css

Yeoman se encargará de descargar el código y lo pondrá en /app/scripts/vendor. Genial, ¿no?

¡A producción!

En algún momento del desarrollo, acabarás… bueno, el desarrollo. Es el momento de poner a Yeoman a currar por última vez.

$ yeoman build

Esto es todo lo que hace Yeoman en ese momento (y en este orden):

  • Lleva a cabo todos los tests unitarios que tengas. Si los tienes.
  • Verifica, concatena y comprime los archivos JavaScript.
  • Comprime los archivos CSS
  • Optimiza las imágenes
  • Cambia la fecha de todos los archivos para evitar la caché del navegador
  • Repasa todos tus archivos HTML para asegurarse de que las referencias sean correctas y apunta a los archivos nuevos concatenados.

Yeoman añadirá 2 carpetas nuevas a nuestro árbol: temp y dist. La carpeta tmp es temporal y sirve para almacenar archivos compilados. Si ejecutas otra vez el mismo comando, Yeoman comprobará si alguno de los archivos ha cambiado, si no lo hace usará los de tmp acelerando su proceso. La carpeta dist extrae las cosas de tmp y s queda con todos los archivos comprimidos, verificados, concatenados, etc.

Ya puedes subir tus archivos a tu servidor y disfrutar de tu nueva aplicación.

Nota

Yeoman está en una fase muy inicial de su desarollo y es muy probable que todo esto cambie poco tiempo después de haber escrito el artículo. De hecho, he tenido que actualizar la parte de la instalación ya que comencé a escribirlo el mismo día que salió y poco después cambió.

¡Espero que disfrutes de Yeoman!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!