Presentación del flujo de trabajo Yeoman dentro del desarrollo FrontEnd

Índice

El flujo de trabajo de Yeoman

Cuando comenzamos un proyecto web, hay tareas repetitivas que tenemos que realizar y que suponen un esfuerzo considerable. Tareas como:

  • La creación de la estructura del proyecto.
  • La configuración necesaria para las pruebas (tests).
  • La configuración de herramientas que realicen análisis del código fuente para evitar que la calidad no se descuide (bloques sin llaves, variables que no se usan, etc).
  • La gestión de las dependencias.
  • La construcción del 'ejecutable' proyecto.
  • etc.

Yeoman es un proyecto Open Source compuesto de tres herramientas: Yo, Bower y Grunt.

Que ayudan notablemente a los desarrolladores tanto en el arranque como en el desarrollo de sus proyectos FrontEnd. Estandariza un flujo de trabajo (workflow) y promueve buenas prácticas.

Para instalar Yeoman, Bower y Grunt debemos ejecutar el comando:

npm install -g yo bower grunt-cli

Requiere el instalador de paquetes de NodeJS, npm.

La Herramienta "Yo"

Yo es una herramienta de línea de comandos que permite la generación inicial del proyecto: estructura de carpetas, archivos de configuración, archivos base para completar del proyecto.

Debido al extenso abanico de tecnologías para la construcción de un proyecto (Ember.js, Backbone.js, AngularJS, etc.), yo se apoya en generadores específicos para cada tipo de proyecto.

Es decir, el desarrollador deberá instalar el generador específico para el tipo de proyecto que desea construir.

En este proyecto vamos a usar el generador para aplicaciones AngularJS (generato-rangular), si desea usar otro, deberá buscarlo usando:

Nota: Por convenio todos los generadores empiezan con el prefijo generator-.

A continuación vamos a ver los pasos comunes del uso de yo:

  • Instalamos el generador que requiera nuestra aplicación web, por ejemplo el generador de aplicaciones AngularJS.

    npm install -g generator-angular (sólo hay que ejecutarlo una vez por cada ordenador).

  • Ahora para generar la aplicación, sencillamente ejecutamos el comando:

    yo angular <my-angular-web-app-name>

    Abrirá un asistente (wizard) que le realizará un conjunto de preguntas relacionadas con las opciones a instalar.
    Una vez respondidas, automáticamente generará todo lo necesario para ponernos directamente a trabajar en nuestro proyecto.

    A continuación podemos observar una captura de pantalla de la estructura de archivos y directorios creada por el generador:

    Cada generador dispone de sus propios comandos, por lo que para más información sobre su uso particular deberá consultar la documentación.

    Por ejemplo, para el generador de proyectos AngularJS, disponemos los comandos que aparecen en la izquierda, los cuáles generan los archivos de la derecha (controlador, directiva, filtro y servicio):

    yo angular:controller <myController>
    • /app/scripts/controllers/mycontroller.js.
    • /test/spec/controllers/mycontroller.js
    yo angular:directive <myDirective>
    • /app/scripts/directives/mydirective.js
    • /test/spec/directives/mydirective.js
    yo angular:filter <myFilter>
    • /app/scripts/filters/myfiltro.js
    • /test/spec/filters/myfiltro.js
    yo angular:service <myService>
    • /app/scripts/services/myservice.js
    • /test/spec/services/myservice.js

    Es decir, que nos crea tanto el esqueleto de la clase como el de su correspondiente test.

La Herramienta Bower

Bower es la segunda herramienta del flujo de trabajo de Yeoman.

Fue creada por Twitter y nos facilita notablemente la gestión de dependencias de nuestro proyecto, permitiéndonos realizar las siguientes tareas a partir de sencillos comandos:

  • Instalar las dependencias que necesitamos.
  • Actualizar las librerías a la última versión disponible.
  • Gestionar conflictos entre librerías no compatibles.
  • Eliminar dependencias que ya no necesitamos.
  • Buscar dependencias.

Por ejemplo, si ejecutamos:

bower install query

Bower se descarga la última versión de la librería JQuery, la guardará en el directorio app/bower_components.

Podemos ver los comandos disponibles tecleando, bower en la línea de comandos:

Bower registra en las dependencias del proyecto en un archivo bower.json ubicado en el directorio raíz del proyecto.

Contenido del archivo bower.json:

En el se indica respectivamente: el nombre del proyecto, su versión, las dependencias de ejecución, las dependencias de desarrollo (ejecución de test) y el directorio raíz donde está ubicado el proyecto.

Para indicar la versión de las librerías, se usa un formato semántico que explicaré a continuación apoyándome en ejemplos:

  • ~1.2.0 Cualquier librería entre las versiones >= 1.2.0, < 1.3.0
  • ~1.2 Cualquier versión entre >= 1.2.0, < 1.3.0
  • ~0.2.3 Cualquier versión entre >=0.2.3 <0.3.0
  • ^1.2.3 Cualquier versión entre >= 1.2.3, < 2.0.0
  • ^0.2.3 Cualquier versión entre >=0.2.3 <0.3.0

Para más información visite la web http://semver.org.

A continuación, vamos a ver los comandos más utilizados cuando se usa Bower:

bower search jquery-ui

Busca librerías cuyo nombre contenga la jquery-ui, dando como resultado:

  • jquery-ui git://github.com/components/jqueryui
  • jquery.ui git://github.com/jquery/jquery-ui.git
  • ...

bower install -S jquery-ui

Se descarga al directorio bower_components la última versión de la librería jqueryui que sea compatible con las dependencias actualmente instaladas en nuestro proyecto, además registra la nueva dependencia en el archivo bower.json.

bower home jquery-ui

Inicia automáticamente un navegador web y abre la página principal del proyecto jqueryui.

bower info jquery-ui

Muestra información sobre las distintas versiones disponibles de una librería así como sus dependencias con otras librerías.

bower list

Muestra las librerías instaladas e informa si hay versiones más modernas.

bower uninstall ng-file-upload

Elimina la librería ng-file-upload tanto del directorio app/bower_components como del archivo bower.json.

La Herramienta Grunt

Grunt es la herramienta final del workflow Yeoman y consiste en una potente herramienta de ejecución de tareas JavaScript.

Durante el ciclo del desarrollo Frontend suelen ser necesarias, entre otras tareas, el análisis estático de los archivos JavaScript, la ejecución de pruebas unitarias, la minificación de las plantillas HTML, la fusión de los archivos JS y CSS, el versionado, etc.

Pues bien, casi cualquier necesidad que nos surja durante el desarrollo está ya desarrollada en forma de plugins y lista para ser integrada en nuestro proyecto.

Para configurar Grunt son necesarios dos archivos:

  • package.json: Archivo con formato JSON en donde se definen las dependencias necesarias para ejecutar las tareas.
  • Gruntfile.js: Archivo en donde se define la configuración deseada de cada tarea.

El archivo package.json generado por Yeoman:

Estás dependencias se descargan a través del comando npm install y se guardan en el directorio node_modules.

Ejecutando los tests de la aplicación

Para ejecutar las pruebas de la aplicación escribiremos en línea de comandos grunt test:

Cómo se puede ver en el resultado del comando anterior se han ejecutado todos los tests sin errores. Grunt nos ha creado el directorio test_reports informes de resultados.

El archivo test_reports/junit/junit.xml:

    <?xml version="1.0"?>
    <testsuites>
      <testsuite name="PhantomJS 1.9.8 (Mac OS X)" package="unit" timestamp="2015-12-26T15:34:06" 
                id="0" hostname="mac13cgp.local" tests="60" errors="0" failures="0" time="0.277">
        <properties>
          <property name="browser.fullName" value="Mozilla/5.0 AppleWebKit/534.34 PhantomJS/1.9.8 Safari/534.34"/>
        </properties>
        <testcase name="AdminCtrl should be initialized successfully" time="0.016" classname="unit PhantomJS 1.9.8 (Mac OS X).Controller: AdminCtrl"/>
        <testcase name="AdminCtrl should init successfully" time="0.005" classname="unit PhantomJS 1.9.8 (Mac OS X).Controller: AdminCtrl"/>
        <testcase name="AdminCtrl should change question state success" time="0.004" classname="unit PhantomJS 1.9.8 (Mac OS X).Controller: AdminCtrl"/>
        <testcase name="AdminCtrl should change question state success" time="0.003" classname="unit PhantomJS 1.9.8 (Mac OS X).Controller: AdminCtrl"/>
        <testcase name="MainCtrl should be initialized successfully" time="0.005" classname="unit PhantomJS 1.9.8 (Mac OS X).Controller: MainCtrl"/>

        ...
        ...

        <system-err/>
      </testsuite>
    </testsuites>

Generando los archivos para paso producción

Para generar los archivos preparados para ser instalados en el entorno de producción escribiremos en línea de comandos grunt build --force:

Grunt nos habrá generado un directorio dist con la aplicación lista para ser desplegada en el producción:

Todos los CSS y los JS han sido concatenados y comprimidos en un sólo archivo.

Además los html verá que también están comprimidos sin espacios en blanco, saltos de líneas, etc.

Ejecutando la aplicación en un entorno de desarrollo

El comando grunt serve inicia automáticamente la aplicación en un servidor web de desarrollo y cualquier cambio que realicemos en los JS, HTML o CSS, se aplicarán automáticamente en caliente.

Conclusiones

Desde mi punto de vista, Yeoman estandariza un flujo de trabajo que promueve buenas prácticas y hacen más sencillo la construcción de software ahorrándonos un gran esfuerzo.

Referencias

Bueno, espero que os sea de utilida.
Un saludo. Carlos García

Categorías del artículo

Comentarios de los lectores