Yeoman, Grunt, Bower, Oh My!!!


Crear sitios o aplicaciones web requiere conocer varias tecnologías tanto del lado del cliente, como del lado del servidor.

Estas tecnologías están básicamente diferenciadas en 2 categorías principales: Frontend (programación en el lado del cliente) y Backend (programación del lado del servidor).

Los programadores Frontend tienen que utilizar HTML, Javascript y CSS para lograr construir la web que desean. Esto casi siempre implica crear varios ficheros html, js y css.

Como los ficheros css y js que utilizas debes referenciarlos desde tu(s) fichero(s) HTML, es tedioso tener que incluirlos de forma manual incluso con la ayuda de editores como Sublime Text o IDEs como Web/PhpStorm.

El tema se hace más complicado cuando utilizas frameworks y bibliotecas javascripts como jquery, angular o algún framework de presentación como Bootstrap, pues ya no tendrías que administrar tus propios assets, sino también los assets de terceros.

Hablando de estos assets, recuerda que también los obtienes de forma manual, o sea, si necesitas jQuery, te diriges a su página oficial, lo descargas y lo copias hacia tu proyecto, en el mejor de los casos, tendrás el asset en tu ordenador, en cuyo caso tendrás que realizar solo la última acción. Hacer esto con cada asset es muy frustrante pues pierdes mucho tiempo en tareas de administración.

Y… hablando de tareas, ¿qué piensas acerca de visualizar lo que haces en el navegador cada vez que realizas algún cambio en el código? ¿o preparar los ficheros de desarrollo para desplegar en producción? (dígase minimizar los ficheros css y js, concatenarlos en uno solo para disminuir la cantidad de peticiones HTTP, optimizar imágenes)? ¿No habrá una mejor forma?

¡Sí!

Bower

bower-logoEs un módulo de nodejs que te permite administrar tus assets de una forma súper cómoda. Elimina el problema de estar buscando online (o local en tu PC) las dependencias de tu proyecto (bibliotecas y frameworks).

Bower es un sirviente, tú solo le ordenas (desde la terminal) la biblioteca o framework que necesitas, y él se encarga de descargar la última versión disponible. Tiene además opciones de búsqueda, actualización y eliminación de assets.

Por ejemplo, si estás comenzando un nuevo proyecto, y decidiste que vas a utilizar jQuery, AngularJS, Bootstrap, Angular-Bootstrap y MomentJS, puedes tenerlo todo con una simple instrucción:

bower install jquery angular bootstrap angular-bootstrap momentjs

Este comando realizará 3 operaciones:

  1. Buscar en su base de datos online la existencia de estos assets
  2. Descargarlos hacia la caché (.cache/bower en Linux, %appdata%/Local/bower en Windows) en caso que no se hayan descargado ya.
  3. Copiarlos hacia tu proyecto.

Por defecto estos assets se instalarán dentro del proyecto en la carpeta app/bower_components, pero este comportamiento puede ser cambiado creando un fichero en la raíz llamado .bowerrc, donde si al escribir lo siguiente:

{
  directory : "vendor"
}

ejecutamos nuevamente el comando anterior, los assets se instalarán en vendor en lugar de app/bower_components.

¿Luego de ejecutar este comando la segunda vez, los assets se descargarán nuevamente? Pregunta usted.

La respuesta es No.

Bower tiene un poderoso sistema de cache en el cual al descargar una dependencia para un proyecto X, esta se puede utilizar en un proyecto Y sin tan siquiera conectarse a Internet. Solo tendrás que añadirle la opción -o al comando anterior:

bower install -o jquery angular bootstrap angular-bootstrap momentjs

Este parámetro le dice a bower que se ejecute offline, por lo que copiarán los ficheros de la caché directamente. Observa además que bower, si no se le especifica una versión, descarga la última disponible.

Todo genial, ¿cómo lo instalo? Pregunta usted.

sudo npm install -g bower (GNU/Linux)

En Windows no necesitas escribir sudo, pero sí es necesario en todas las plataformas especificar la opcion -g, para instalarlo como una utilidad global, o sea, que pueda ser invocada desde cualquier carpeta en tu sistema de ficheros.

Recuerda además, que npm depende de NodeJS para ser utilizado.

Otros comandos útiles de bower

  1. bower cache list para ver todos los assets que tienes en la cache.
  2. bower uninstall <asset> para desinstalar un asset de tu proyecto.
  3. bower para ver los otros comandos disponibles :)

Para terminar, debes conocer que bower descarga la mayoría de los paquetes de GitHub, por lo que si estás detrás de un proxy, debes configurar git para que se pueda autenticar con el mismo (sí, debes instalar git para utilizar bower).

El procedimiento es muy simple, solo crea en tu HOME un fichero de nombre .gitconfig y especifica lo siguiente:

[http]
        proxy = http://localhost:8080
        sslVerify = false
[https]
        proxy = https://localhost:8080

[url "https://github.com/"]
        insteadOf = git://github.com/

En este ejemplo localhost:8080 apunta al servicio CNTLM que realiza el proceso de autenticación con el proxy, pues en caso contrario, tendrás que especificar tus credenciales en texto plano arriesgando así tu seguridad:

[http]
        proxy = http://user:password@10.0.0.1:8080
        sslVerify = false
[https]
        proxy = https://user:password@10.0.0.1:8080

Esto es todo lo relacionado con bower, por lo que tenemos el problema de la administración de assets resuelto. Pero, ¿y que tal con las tareas de estar incluyendo estos assets dentro de los ficheros HTML, concatenarlos, optimizar imagenes, etc? La respuesta es…

Grunt

gruntlogoAl igual que bower, es un módulo de nodejs que se debe instalar global para que pueda ser ejecutado como un programa del Sistema Operativo.

sudo npm install -g grunt-cli

Con grunt puedes automatizar casi cualquier tarea presente en el desarrollo de aplicaciones web (frontend), pues al estar basado en plugins, se han creado muchos (incluso con distintas variantes) para las diferentes tareas que se desean acometer.

Para que entiendas de forma clara el tipo de cosas que grunt puede hacer, imagina que estás creando un proyecto simple que implica estos ficheros:

+ webapp
  - index.html
  css/
    - bootstrap.css
    - mi_estilo.css
  js/
    -bootstrap_affix.js
    -bootstrap_carousel.js
    -bootstrap_sidebar.js
    -utiles.js
    -functions.js

Normalmente tendrías que crear 5 etiquetas <script> y 2 etiquetas <link>para incluir los archivos javascript y css respectivamente en el fichero index.html. Cuando termines el desarrollo será deseable además concatenar los ficheros js y css (de manera tal que solo exista uno por cada tipo) y minimizarlos para aumentar el rendimiento. Finalmente pondrías los ficheros en un servidor web para visualizar el producto final.

Todo esto es posible hacerlo con un solo comando a través de grunt, y se puede lograr además que se repita todo el proceso con cada fichero que se modifica y se salva durante el desarrollo:

grunt serve

Parece algo genial ¿verdad? Pero atención, no todo es coser y cantar, para lograr hacer esto es necesario crear la tarea serve, en el fichero Gruntfile.js, el cual debe ser creado en la raíz del proyecto que desarrollas, en este caso, junto al fichero index.html.

Observa que la extensión del fichero es .js, por lo que las tareas se deben programar utilizando javascript.

Para el caso del ejemplo, deberás crear 8 tareas:

  1. Concatenar los ficheros JS
  2. Concatenar los ficheros CSS
  3. Minimizar el fichero JS resultante de la tarea 1.
  4. Minimizar el fichero CSS resultante de la tarea 2.
  5. Incluir los ficheros anteriores en el fichero index.html
  6. Ejecutar un servidor local tomando como raíz la propia raíz del proyecto donde se trabaja.
  7. Ejecutar un observador para recargar el contenido de la página del navegador con cada actualización en los ficheros durante el desarrollo.

En este caso, luego de implementar estas 7 tareas, se crea la tarea serve (no necesariamente tiene que tener este nombre) que lo que realiza es ejecutar las tareas anteriores.

Para conocer cómo realizar estas operaciones debes estudiar la documentación de Grunt, y será casi como aprender un nuevo framework.

Bueno, por una parte es bueno porque tienes en tu poder las herramientas para crear potentes cadenas de tareas que te automaticen todo el proceso de desarrollo, pero por la otra es una desventaja pues ser un ninja en Grunt requerirá un poco de tiempo y esfuerzo de tu parte.

Entonces, ¿tengo que estudiar Grunt antes de poner en práctica todas las ventajas descritas en el artículo?

No, para esto existe…

Yeoman

yeoman-02.eed5Si me pidieran describir Yeoman con tres palabras, diría que es el Sol. Yeoman te permite generar proyectos web con un solo comando. Estos proyectos web pueden ser de todo tipo: Ruby, PHP, Javascript, etc.

¿Crearon un nuevo framework PHP? No te preocupes, ya existe un generador para crear proyectos de ese framework con Yeoman.

¿Qué es un generador?

Es el equivalente a un plugin. Por ejemplo, existen generadores para “generar” proyectos para Symfony, Laravel, Phalcon, CodeIgniter, AngularJS, BackboneJS, EmberJS, etc etc etc.

Lo mejor es que muchos de estos generadores ya vienen con tareas de Grunt implementadas para ejecutar las tareas discutidas anteriormente, y muchas más, por lo que en la mayoría de los casos, no necesitarás conocer cómo implementarlas.

Instalar Yeoman

Al igual que Bower y Grunt, Yeoman se instala utilizando npm:

sudo npm install -g yo

Es importante aclarar que este comando instala las 3 herramientas de una sola vez, pues como te comenté anteriormente, la mayoría de los generadores utilizan las dos anteriores para administrar los assets y automatizar las tareas propias del proyecto.

Instalando un generador

Los generadores también son módulos de NodeJS y se instalan utilizando npm. La notación es: generator-<proyecto>, por lo que si deseas instalar un generador para crear proyectos en AngularJS, debes ejecutar lo siguiente:

sudo npm install -g generator-angular

Observa que aunque los generadores los utilizarás a partir del propio yeoman (utilizando el comando yo desde la terminal), es necesario instalarlos de forma global.

Creando una Aplicación AngularJS en 1 minuto

Quiero terminar el artículo con una pequeña aplicación en AngularJS que muestre el poder de yeoman.

Para ello asumo que no se tiene nada instalado, excepto nodejs, npm y git, con los repositorios y acceso a la autenticación por proxy configurados (para el caso en los que lo necesiten).

Paso 1: Instalar yeoman y el generador para AngularJS

sudo npm install -g yo generator-angular

Paso 2: Crear el proyecto

yo angular miSuperProyectoAutomatizado

cd miSuperProyectoAutomatizado

Paso 3: Visualizar el proyecto

grunt serve

Terminado con éxito este paso, abre tu navegador favorito en la URL http://localhost:9000 y verás una aplicación completamente operativa con tres páginas de navegación creada por Yeoman, y sobre la cual podrás comenzar a desarrollar.

Observarás además que al modificar cualquier fichero y salvarlo, el navegador actualizará la página automágicamente con los cambios, ofreciéndote así la mejor experiencia que un desarrollador web puede esperar (a parte del sueño de tener varios monitores claro :) ).

Paso 4: Desarrolla con placer

¡Oh! en mi nuevo proyecto necesito utilizar los modals de Semantic UI porque son el Sol. No hay problema:

bower install --save semantic-ui-modal

Con este comando se garantiza que:

  1. Se descargue y se instale la biblioteca junto con sus dependencias.
  2. Se añada(n) al index.html como etiqueta <link />.
  3. Se recargue la página en el navegador.

Por lo que solo tienes que ir al código y comenzar a utilizar dichos modals.

¡Oh! necesito agregar un servicio y no conozco su sintaxis en AngularJS. No hay problema:

yo angular:service MiSuperServicio

¡Oh! necesito un controlador:

yo angular:controller MiSuperControlador

¡Necesito una ruta!:

yo angular:route miSuperRutaSecreta

Eeen fin. Es para chuparse los dedos.

Concluye ya!

Okey.

Estas tecnologías emergentes creo que son el futuro. Miles de profesionales la están usando desde ya. Si nunca has oído de ellas, recomiendo las pruebes, te aseguro serás un mejor profesional.

Si ya las has utilizado en tus proyectos, cuéntame, ¿Cómo te ha ido?