Construyendo Apliciones Web Modernas con Yeoman y Angular

El mundo de Yeoman ;)

El proceso de desarrollo de aplicaciones Web ha ido mutando con el avance de las tecnologías, la mejora en los estándares, el arrivo de HTML5, las nuevas APIs de Javascripts, los nuevos frameworks para desarrollo, todo colabora a que este ecosistema crezca de manera rápida.
Muchas herramientas han emergido en este último tiempo, en esta entrada, estudiaremos Yeoman: una herramienta para la gestión del Workflow de desarrollo de aplicaciones Web, en realidad es un poco más que una simple herramienta, es un conjunto de herramientas y buenas prácticas que trabajan en conjunto para hacer el desarrollo mas ágil y fácil.
Yeoman está compuesto por tres herramientas:
  • Yo: Una herramienta de scaffolding.
  • Grunt: Herramienta para la construccion del proyecto.
  • Bower: Herramienta para la gestion de paquetes.
Cada uno de estos proyectos es mantenido por separado con una importante comunidad de desarrolladores a sus espaldas, pero éstos, trabajan en conjunto, como parte de un flujo de trabajo que hace que nuestro desarrollo sea mucho mas eficiente.

Empecemos instalando Yeoman:

npm install -g yo
npm: Es el gestor de dependencias de Node.js y viene junto con esta.

Para versiones de npm anteriores a la 1.2.10 es necesario la instalación de Grunt y Bower de manera explícita, para versiones mayores o iguales a la 1.2.10, la instalación de estas herramientas es automática con la instalación de yo. 

Para instalaciones explícitas:
npm install -g grunt-cli bower
Si, la herramienta Grunt, se ecuentra ya instalada, fruto de alguna instalación anterior deberá borrarla, de la siguiente manera:
npm uninstall -g grunt
Yo (Yeoman) nos provee la posibilidad de crear nuestras aplicaciones web a partir de una estructura definida haciendo uso de generadores, como desarrolladores, tenemos la posibilidad de crear nuestros propios generadores, en este apartado, veremos como generar una aplicación utilizando un generador para AngularJS.

Antes de hacer uso de un generador, debemos instalarlo (en el caso de que no esté instalado).
npm install -g generator-angular
Ahora, nos posicionaremos en el directorio donde alojaremos nuestro proyecto, en mi caso particular
cd ~/dev/proyects/samples-of-html5/yeoman_test_1
Y luego ejecutaremos la siguiente línea:

yo angular
Acción que nos brindará la siguiente salida:


     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include Bootstrap and some AngularJS recommended modules.

[?] Would you like to use Sass (with Compass)? (Y/n)


En mi caso particular responderé con "n", para los que quieran mas información sobre Saas, sigan el link, lo cual se muestra en la siguiente salida:

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include Bootstrap and some AngularJS recommended modules.

[?] Would you like to use Sass (with Compass)? No
[?] Would you like to include Twitter Bootstrap? (Y/n)

Aquí nos pregunta si queremos incluir Twiter Bootstrap para nuestra interface gráfica, a lo que responderemos con Y:

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include Bootstrap and some AngularJS recommended modules.

[?] Would you like to use Sass (with Compass)? No
[?] Would you like to include Twitter Bootstrap? Yes
[?] Which modules would you like to include? (Press  to select)
‣⬢ angular-resource.js
 ⬢ angular-cookies.js
 ⬢ angular-sanitize.js
 ⬢ angular-route.js
En este momento deberemos seleccionar los módulos de Angular que queremos incluir en la aplicación, por defecto todos los módulos vienen seleccionados, así que presionaremos "enter" para seguir con la creación de la aplicación. (En el caso de no necesitar algún modulo presionamos la tecla espacio sobre el modulo para deseleccionar).

Una vez realizado esto, veremos que se descargan muchas cosas (dependencias) y se termina de hacer la configuración de nuestro proyecto basado en AngularJS.

Como fruto de la ejecución de nuestros comandos, deberemos ver dentro de nuestro directorio angular el siguiente listado de carpetas y archivos:
app  bower.json  Gruntfile.js  karma.conf.js  karma-e2e.conf.js  node_modules
  package.json  test
Este conjunto de directorios conforma nuestra aplicación, y será explicado luego cuando nos insertemos en el mundo AngularJS.
Ahora seguiremos explicando el proceso de desarrollo con Yeoman.

Los generators, como el de angular, pueden poseer sub-generator para la construcción de piesas de código particulares, en el caso de AngularJS, nuevos controladores, servicios, directivas, servicios, etc. Por ejemplo:
yo angular:controller myCustomController
yo angular:directive myCustomDirective
yo angular:filter myCustomFilter
yo angular:service myCustomService
El resultado de esta operatoria es la creación de las piesas de código correspondiente, por ejemplo, si aplicamos sobre la primera línea el resultado sería el siguiente:
create app/scripts/controllers/mycustomcontroller.js
create test/spec/controllers/mycustomcontroller.js

Cada uno de los generators, tienen la documentación necesaria (o eso esperaríamos) de todos los subgenetators que esten disponibles.

Si, prestamos atención cuando utilizamos el generator de Angular, el cual nos pidió los módulos a instalar, en la consola debemos haber visto un montón de lineas de descarga, muchas de esas lineas eran dependencias que nuestro proyecto necesita, esas dependencias son gestionadas por la segunda herramienta de Yeoman, llamada Bower.

El nundo Bower

Podríamos definir a Bower como un gestor de paquetes para la web.  Ofrece una solución genérica a la gestión de paquetes en el desarrollo de aplicaciones front-end.
Expone un modelo de dependencia de paquetes via un API que puede ser consumido por un mas de un conjunto de herramientas de construcción de aplicaciones. No existen dependencias a nivel de sistema y tampoco las dependencias son compartidas entre aplicaciones, el árbol de dependencias tienen a ser plano. Bower corre sobre Git y es "package-agnostic", un paquete puede ser compuesto por cualquier tipo de archivo y usar cualquier tipo de transporte.

Instalando Bower...

En nuestro caso, al instalar una version de Yeoman superior a la 1.2.10, bower se instala por defecto, pero el caso que querramos instalarlo manualmente debemos ejecutar:

npm install -g bower
Podemos obtener información sobre todos los comandos de bower con la siguiente línea:
bower help
Si miramos dentro de nuestra estructura de directorios creada, podremos observar que existe un archivo bower.json en el cual se describen las dependencias de nuestra aplicación.

Algunos comandos representativos de Bower:

# Busca una dependenia en el registro
bower search <dep>

# Instala una o mas dependencias (..)
bower install <dep>..<depN>

# Lista las dependencias instaladas en el proyecto
bower list

# Actualiza la dependencia  a la ultima version disponile
bower update <dep>
Por ejemplo, supongamos que en nuestra aplicación queremos instalar una nueva dependencia, para lo cual utilizaremos el comando correspondiente:
bower install 
o bien
bower install #
donde puede ser una de los siguientes opciones:
  • Un nombre que mapee con un paquete registrado con Bower, por ejemplo jquery.
  • Un repositorio de git remoto (público o privado), por ejemplo: git://github.com/user/.git
  • Un endpoint local, por ejemplo, una carpeta de un repositorio Git
  • Un endpoint abreviado, por ejemplo. user/repo, (por defecto se completa con GitHub). 
  • La url de un archivo,  zip y tar Este contenido es extraido
Estos tipos de dependencias pueden tener distintas versiones. Se puede especificar una versión compatible con semver para descargar un release específico de la dependencia que nos interesa, también podemos especificar rangos de versiones para nuestras dependencias. Todos los paquetes son instalados en el directorio bower_components por defecto. Nunca debemos borrar el contenido de este archivo.

Como bien hemos mostrado anteriormente con bower list podremos ver todos los paquetes instalados localmente.

En el mundo de Grunt ...

La tercer herramienta de Yeoman es Grunt, este es una especie de gestor de tareas. En el desarrollo de aplicaciones web, nos vemos obligados a realizar una multitud tareas repetitivas, como por ejemplo minificacion, compilación, testing, etc. Grunt, es una herramienta de linea de comandos para proyectos javascripts que nos permitirá gestionar estas tareas.

Grunt por defecto viene instalado con Yeoman desde la versión 1.2.10 tal como explicamos en el apartado de Bower.

Pero en el caso de tener que instalarlo simplemente ejecute esta línea:
npm install -g grunt-cli
Esto instalará la herramienta y la podrá accesible en el PATH del sistema operativo para que podamos ejecutarla desde la línea de comandos.
En la estructura de directorios creada por el generator de Angular, podremos ver dos archivos relacionados con Grunt:
package.json Gruntfile.js
Estos archivos son los que van a configurar todo nuestro trabajo con Grunt. El primero package.json tiene la función de guardar metadatos para proyecto publicados como módulos de npm.  En este archivo podremos enumerar los Grunt Plugin que el proyecto necesita como devDependencies.
El segundo archivos: Gruntfile.js, es utilizado para la definición y configuración de las tareas y además para la carga de los Grunt Plugins.

Algunos comandos intersantes para correr en nuestra aplicación, haciendo uso de Grunt:
grunt serve
grunt test
grunt

Es futuros posts veremos detenidamente el como hacer una app con Angular, agregando dependencias y como utilizar Grunt para correr, y testear la aplicación.



Comentarios

Entradas más populares de este blog

GWT Jsinterop

¿Qué es GWT?