Rutha Stack - Ambiente de desarrollo web con AngularJS y HapiJS (y como no reinventar la rueda)

Introducción

Iniciar a desarrollar aplicaciones front end, ya sea Angular, Backbone, Ember y otras requiere de lo que llamamos un 'developer workflow' o 'stack'. Hay diversos stacks como MEAN y generadores como Yeoman, inclusive otros Github repos como Angular-Seed. Yo buscaba algo que tuviera tanto HapiJS y AngularJS. Y no encontré algo existente. De este modo surgió "Rule Them All HapiJS AngularJS" o Rutha.

Reinventar la rueda?

Mis requerimientos para un stack ideal con lo cual Rutha contiene:

A nivel de server

REST

Debe solo enfocarse en REST y tener validación de usuarios, validación de cada REST route y tener health check. Con HapiJS Joi y hapi-auth-bearer esto es posible.

Módulos

HapiJS soporta plugins, lo cual se basan en npm.

Documentación

El API debe ser capaz de documentarse. Usando HapiJS Joi, el modulo de HapiJS Lout auto genera la documentación.

Test Driven Development con Jasmine 2.0

Por medio de server.inject de HapiJS, integramos Jasmine 2.0 y obtenemos uno de los mejores TDD engine en el mercado. Porque no HapiJS Lab? Simplemente necesitaba Jasmine 2.0. Lab todavía no utiliza la ultima versión de Jasmine.

Errores predeterminados

HapiJS tiene incluido una forma de errores predeterminados que siguen la definición HTTP. No mas json generados a manos.

A nivel de UI

Mismo ambiente de desarrollo que en producción

Puedo asumir que esto es lo mas revolucionario. En modo de desarrollo, empaquetamos todos los activos o 'assets' en la carpeta 'dist' (o la puedes cambiar a tu nombre preferido) con la excepción de minificacion. En modo de producción, ocurre el mismo proceso incluyendo en este caso la minificacion. A continuación los procesos que ocurren.

Generación por medio de ngTemplates

Compacta los templates de AngularJS dentro de funciones Javascript.

Concatenación

Todo el contenido de javascript se concatena y se crean dos archivos: app.js y templates.js

Generación de anotaciones de los módulos de Angular con ngAnnotate

Los módulos de Angular necesitan anotación antes de la minificacion para evitar problemas con la ofuscación.

Uglify (conocido como minificacion que es  una forma de ofuscar el código)

En modo de desarrollo, solo genera el sourcemap del código para permitir depuración. En modo de producción, permite sourcemap y minificacion. El sourcemap no se distribuye como tal a la hora de publicación.

Enlazar con el HTML de inicio

Se enlaza y renueva referencias basadas en la configuración de Bower. Esto permite siempre tener los módulos utilizados enlazados al HTML de desarrollo en el SPA (Single Page Application).

BrowserSync

Tanto como LiveReload y fb-flo me parecieron complicado configurar. BrowserSync fue super sencillo. Esto permite que cada cambio en tu editor (Vim, Sublime, etc) sea refrescado automáticamente en tu browser preferido.

Otras tecnologías

Grunt JIT realiza precompilacion o precargado de ciertos pasos de Grunt, lo cual ejecutar los grunt tasks sean mas rápido que antes.

Adoptamos el modelo de 'dev stack' con código de demostración. Esto es la clave y lo herede de la época de .NET y VS.NET.

De tal modo, usamos una variación de patrones de AngularSeed, PacktPub Mastering Web Application Development with AngularJS y la guía de estilo o patrones de AngularJS por Todd Motto.

Que vendrá a continuación

Tengo un conjunto de cosas que agregar, pueden esperar el siguiente roadmap:

• 0.2.x:
• Patrones de HapiJS para Autenticación de UI y API
• 0.3.x:
• Definir si nos vamos con Restangular o angular-restmod

• CSS (LESS O SCSS), esto necesitare tiempo y ayuda. Se aceptan contribuciones.
• 0.4.x:
• Instanbul para code coverage
• 0.5.x:
• Abierto a ideas. Puede ser desde generadores hasta soporte a React en el server. Pero seguramente sean rutha-contrib-* modulos y no parte del main branch.

Hasta la siguiente entrega

Rogelio Morrell