Etiqueta: Tecnología

28 Feb 2016

Maqueteando proyectos rápidos con Yeoman

¿Has tenido que cumplir con plazos ridículos para generar una maqueta que te permita capturar una oportunidad de negocios?  ¿Que tal esos benditos demos construidos en base a requerimientos entregados por un comercial drogado que siempre salen mal y son reemplazados en último momento por una PPT?

Hay que reconocer que nada vende tan bien como un prototipo funcionando, lo cual no solamente nos da la oportunidad de sorprender al potencial cliente (o a nuestros jefes), sino que nos permite capturar requerimientos y hacer una mejor gestión de expectativas.

La comunidad lo ha entendido así y últimamente han surgido muchas herramientas para hacer maquetas y prototipos funcionales de proyectos con diversas configuraciones.

Una de mis alternativas favoritas es Yeoman, herramienta que te permite realizar maquetas rápidas de aplicaciones web en diferentes lenguajes y con diferentes configuraciones.

Generadores

La base de Yeoman son los generadores. Pero, ¿Que es un generador? Dentro de este contexto, son patrones funcionales que le dicen a yeoman como debe ser construido el proyecto. Estos «planos» incluyen la estructura de directorios del proyecto, conectores a bases de datos, diversas tecnologías, patrones de extensiones, comandos personalizados, buenas prácticas y otros.

Entre los generadores mas populares podemos encontrar:

  • Angular-Fullstack: Generador para aplicaciones de Javascript full stack. Es decir, aplicaciones donde la tecnología detrás de cada una de sus capas es javascript (MongoDB, Express Framework, AngularJS, Node.js).
  • Loopback: Generador de aplicaciones para IBM Loopback.
  • AspNET: Generador de aplicaciones para ASP.NET 5
  • JHispter: Genera una base de aplicaciones Java con Spring, JPA y AngularJS.

 

Actualmente existen sobre 3500 diferentes generadores.

Un Ejemplo

Para ver la potencia de yeoman y sus generadores, vamos a instalar el generador Javascript Fullstack y generar una aplicación completa y funcional en cosa de minutos.

Es necesario tener instalado Node.js y MongoDB. Hay varias maneras de instalar estos componentes, enumeradas en sus respectivas páginas para distintos sistemas operativos.

Una vez instalados, necesitamos instalar Yeoman, dependencias y el generador seleccionado por medio de la interfaz de comandos:
npm install -g yo grunt-cli gulp-cli bower generator-angular-fullstack

Necesitamos crear un directorio para el proyecto de ejemplo

mkdir pruebayeoman

Para generar el proyecto, tenemos que ingresar al directorio e invocar el generador

cd pruebayeoman
yo angular-fullstack prueba

Yeoman te hará unas preguntas iniciales para configurar el proyecto:

  1. Quieres usar javaScript o coffeeScript para la programación de la lógica de negocios?
  2. Html o Jade como lenguaje de templates?
  3. Css, Sass, Stylus o Less para el estilo?
  4. ngRouter o uiRouter como manejador de rutas de AngularJS?
  5. Quieres Twitter Bootstrap integrado para el diseño de la UX?
  6. Quieres Ui Bootstrap integrado para el comportamiento de la UX?
  7. Quieres usar Mongoose para modelar los datos sobre mongoDB?
  8. Quieres un sistema de autenticación de usuarios?
  9. Quieres incluir Oauth con Facebook, Twitter o Google?
  10. Usarás Socket.io?

 

Una vez contestadas todas estas preguntas, Yeoman instalará las dependencias requeridas. Puede tardar algunos minutos en la descarga.  Vale mencionar que el generador no solo instalará muchas dependencias y generará una estructura de archivos bastante comprensible (Ej. El directorio «client» tiene la lógica del cliente en HTML y AngularJS, El directorio «server» tiene la lógica del API en node.js, express y mongo) sino que también, varios archivos de utilidad entre los cuales se encuentran:

  • .gitignore: Archivo ignore para GIT
  • package.json: Gestión de dependencias de Node.js
  • bower.json: Gestión de dependencias de AngularJS
  • gruntfile.js: Descripción de tareas automatizadas para Grunt

 

Y archivos de pruebas por defecto para codificar tus pruebas.

Una vez finalizado el proceso de creación y descarga, podemos iniciar el servidor con el comando

grunt serve

Cuando la aplicación se inicie, abrirá automáticamente una página del navegador y te dará acceso a la aplicación, junto con algunos ejemplos de sus funcionalidades.

Captura de pantalla 2016-02-28 a las 4.19.03 p.m.

 

 

Captura de pantalla 2016-02-28 a las 4.18.48 p.m.

La documentación para el generador y sus comandos personalizados se encuentra aquí.

Ahora, con un mínimo de configuraciones extras, tenemos una excelente base para comenzar nuestro demo, prototipo o MVP.