Share on FacebookTweet about this on TwitterShare on Google+

Cada vez que realizamos una aplicación o un sitio web nos encontramos con ciertas tareas repetitivas como la descarga de plugins, reducir el número de peticiones http y organizar la estructura de directorios y ficheros de un modo óptimo.
Es frecuente que tengamos ciertos automatismos ya creados de modo que alguna de las tareas que realizamos con asiduidad no supongan un lastre en nuestra productividad. Otra opción es utilizar un software que nos ayude en estas tareas como es el caso de Yeoman. De este modo nos beneficiaremos de toda la comunidad que hay detrás y tendremos una solución más general y probablemente más completa.
Yeoman consiste en tres herramientas que nos automatizarán nuestro desarrollo web haciendo que seamos más productivos y eficaces:

    • yoCrea la estructura de directorios de la aplicación, así como los ficheros de configuración para el resto de herramientas. Como nuestra aplicación web puede ser diversa: un MVC mediante angularJS, un sitio web mediante framework bootstrap + less… para su funcionamiento necesitará tener instalado un generador adecuado para el tipo de sitio web que queramos construir.
    • bower – Nos servirá para instalar paquetes desde línea de comandos sin navegar por las web de los desarrolladores de los diversos frameworks, plugins, etc que queramos utilizar. Además gestiona dependencias, de modo que si queremos utilizar un plugin, no tendremos que descargar otros paquetes adicionales que pueda necesitar, bower lo hará por nosotros. Básicamente bower es un gestor de paquetes de frontend. Una especie de apt-get o homebrew para JavaScript y CSS.
    • grunt o gulp – Es un gestor de tareas: se encarga de realizar tareas repetitivas como concatenar ficheros, comprimir imágenes sin pérdida o minify de ficheros html, css y js. También nos levanta un servidor web o recarga la página si hay cambios. Vamos, una auténtica navaja suiza.workflow.c3cc

Instalación de Yeoman

Los requisitos son los siguientes:

      • Node.js v0.10.x+
      • npm (se instala con node) v2.1.0+
      • git

Para comprobar las versiones que tenemos instaladas:

Una vez cumplidos los requisitos instalaremos los  paquetes necesarios mediante el gestor de paquetes de node. Como los instalamos de manera global (opción -g), utilizaremos el comando sudo:

Además deberemos instalar algún generador. Hay multitud de generadores, para WordPress, Ionic, etc. En la lista de generadores, aparecen enlaces a su repositorio en github donde dan instrucciones específicas del funcionamiento de cada uno. Podemos instalar alguno de los más utilizados como el generador de aplicaciones basadas en Angular o el de webapp, para una aplicación web más estándar:

Preparar mi aplicación

Vamos a crear una aplicación muy sencilla para conocer el flujo de trabajo con Yeoman. Nuestra apliación consistirá en una única página web con un formulario que contendrá varios campos para validar: nombre, email… Para validar los campos utilizaremos un plugin de jQuery de modo que no tengamos que escribir apenas código. Para ello nos ayudaremos del plugin de jQuery Validate.

En primer lugar crearemos un directorio donde colgar nuestra aplicación. Utilizaremos nuestro usuario estandar (sin sudo) y generaremos una aplicación de tipo webapp:

En función de las opciones que seleccionemos (pulsando barra espaciadora), nos instalará no solo más o menos componentes de frontend (css y js), sino también más tareas para automatizar a través de grunt o gulp (el uso de uno u otro dependerá del generador instalado). En principio no me hace falta ningún componente de los anteriores, así que dejaré desmarcados Bootstrap, Sass y Modernizr.

yeoman_start

Si tenemos algún error de permisos al hacer la instalación, aseguraos de que todos los ficheros que hay en el directorio $HOME/.npm pertenecen al usuario que utilizamos.

Con esto ya tendremos creado un esqueleto básico para nuestra aplicación (directorio app):

El entorno de desarrollo de la aplicación si es algo más complejo y lo veremos con detalle:

Fichero package.json y directorio node_modules: es el fichero que contiene todas las dependencias de nuestro entorno de desarrollo: Una lista de paquetes (módulos) que se ejecutan en el entorno de node y que se ejecutarán con nuestro gestor de tareas grunt. Para instalar estos paquetes tendremos que ejecutar el comando npm install, que crea un directorio node_modules con todos los módulos indicados en el fichero de configuración:

En cualquier momento podremos instalar nuevos paquetes mediante la inserción en el fichero y ejecutando de nuevo el comando npm install o directamente mediante:

Fichero bower.json y directorio bower_components: El funcionamiento de los paquetes de frontend es similar. Se guardan en el fichero bower.json y se pueden añadir o quitar según conveniencia. Observa que me ha incluido ya por defecto jQuery:

Los paquetes se guardan bajo el directorio bower-components. Si ejecutamos el comando bower-install, leerá todos las entradas de dependencias del fichero bower.json y las instalará bajo bower-components. Es importante que bower-install lo ejecutes desde el directorio adecuado.
Podemos por ejemplo instalar por ejemplo el plugin de jQuery Mockjax que nos sirve para simular peticiones y respuestas ajax:

También podríamos instalar el plugin jquery-validate para la validación de formularios:

Observa como en este segundo caso, existe una dependencia con jquery, que deberá instalar. bower lo sabe porque la descarga de jquery-validate tiene su propio fichero bower.json con sus dependencias.

Diferenciar las dependencias de producción y desarrollo es útil ya que estas últimas no las tendrá en cuenta para cuando hagamos el build y generemos nuestro código definitivo (directorio app/dist que todavía no está creado). Mediante los parámetros –save-dev o –save indicamos que además de instalar los paquetes queremos que figuren en el fichero de dependencias de bower:

Directorio test: Contiene la estructura y ficheros base para realizar tests, según el framework de test de JavaScript Mocha.

Codificar la aplicación

Instalamos el plugin de validación:

Podemos comprobar que se actualiza el fichero bower.json y la instalación del paquete en el directorio bower_components.  bower tiene muchos comandos que pueden resultarnos de utilidad, lo mejor es echar un ojo a la web de bower o ejecutar el comando bower –help que nos mostrará las opciones de uso de bower. Por ejemplo podemos ir a la página web del plugin mediante bower home jquery-validate.

Para ver la lista de plugins que tenemos instalados:

Editamos el fichero index.html situado en el directorio app para quitar todo el código innecesario:

Añadiremos ahora el código de formulario al comienzo del body:

Observa que atendiendo a la documentación del plugin se han creado el atributo minlength para el nombre y la class required para el nombre, email y url. Además el plugin validará que el email o la url sean correctas atendiendo al tipo de campo que son. El formulario tiene además el atributo novalidate, para evitar la validación propia de html5 por los navegadores.
Lo siguiente que haremos será añadir algún estilo propio de css. Analizando el código de nuestro documento html, lo que haremos será modificar el fichero styles/main.css de modo que quede así:

Tendremos que incluir los scripts de jquery y jquery-validate, esto lo hará grunt por nosotros mediante el siguiente comando:

Si editamos el fichero index.html veremos que nos ha añadido nuestras dependencias de librerías js. Lo mismo habría pasado si tuvieramos dependencias con librerías de css previamente configuradas mediante el fichero bower.json.
Ahora solo falta añadir nuestro código javascript, editando el fichero scripts/main.js para que quede así:

Por último podremos ver que nuestra página web funciona ejecutándolo:

Grunt crea un servidor web y nos muestra la página. No solo eso, se queda en observación y cualquier cambio que detecte en la página html, css o js asociados hará que la página se recargue en el navegador. Podremos parar el servidor mediante CTRL + C.
Por último podemos generar una versión optimizada de nuestra página web para producción. Esto lo haremos mediante el comando:

Observa que todos los ficheros html, css y js recién creados están minificados y que los scripts de jquery y jquery-validate los ha concatenado en un solo fichero.

Leave a Reply

Your email address will not be published. Required fields are marked *