Cómo empezar un proyecto Angular en 2016
Resumen: ya ha salido la versión estable de Angular 2 y puedes usar angular-cli para generar el proyecto y trabajar con herramientas actuales. Para probarla, he modificado un ejemplo del tutorial de angular 2 (enlaces al final)
Los programadores de Java o C# (de otro modo: los usuarios de Eclipse/IntelliJ/Visual Studio) están acostumbrados a comenzar sus proyectos de manera casi rutinaria, con unos pocos clicks de ratón o comandos sencillos.
Los programadores de tecnologías tradicionales de backend web, como pueden ser PHP, Python o Ruby, también viven razonablemente tranquilos gracias a frameworks maduros como Laravel, Symphony, Django, Flask, Rails o Sinatra. Comenzar un proyecto es cuestión de segundos de una forma bastante estandarizada.
¿Qué pasa con los programadores de JavaScript?
Hasta no hace tanto, no era habitual, al comenzar un proyecto web, decir lo voy a hacer todo en JavaScript. Posiblemente, fue la llegada de NodeJS la que hizo que esto explotara. El programador de JavaScript empezó a tener un problema: ¿cómo empiezo el proyecto?
Durante años, fueron apareciendo tecnologías y herramientas para facilitar la labor de creación y gestión de proyectos JavaScript. Algunas se fueron quedando (Grunt, Gulp, Bower…), pero unas fueron sustituyendo a otras. Ninguna parecía imponerse. Muchas fueron creciendo gracias a parches o contribuciones de usuarios que aportaban lo que a ellos les había funcionado, pero la estandarización estaba lejos. Lo que ayer se hacía así, hoy ya se hace de otra forma.
npm, sin embargo, parecía que se iba a convertir en la herramienta de gestión de paquetes del mundo JavaScript. Ahí se mantenía, aguantando lo que le echaran. Y a npm se le unió Yeoman…
La idea de Yeoman es, precisamente, proporcionar recetas para iniciar y configurar proyectos JavaScript. Para ello, utiliza los llamados generadores. Básicamente, con un comando y tras responder a una serie de preguntas, tendremos un Hola Mundo con nuestro framework favorito, listo para empezar a trabajar.
Estoy proyectos generados a través de Yeoman, contendrán normalmente tareas para desplegar la aplicación en producción, ejecutar los tests automáticamente mientras estamos desarrollando, generar el boilerplate de los elementos más comunes usados en el framework con el que estemos trabajando, etc.
El problema es que hay, literalmente, miles de generadores. Algunos oficiales (es decir, construídos por los autores del framework o librería que el generador utiliza), y la mayoría contribuciones de la comunidad. Muchos están ya desactualizados, y directamente no funcionan.
Por establecer una analogía, es el equivalente a los contenedores de docker que podemos encontrar en Docker Hub. O las imágenes de máquinas virtuales listas para correr en AWS.
Hasta aquí los problemas. A partir de ahora, lo que yo he empezado a considerar como soluciones razonablemente generalistas como para ser utilizadas por mucha gente, y lo razonablemente populares como para tener soporte de la comunidad. Y lo más importantes: usables hoy.
La primera de ellas es fountainjs. Un conjunto de generadores para los dos frameworks JavaScript más mediáticos y populares de la actualidad: Angular y React.
Mediante los generadores de fountainjs, podremos construir rápidamente proyectos basados en Angular 1.x, Angular 2 o React, y trabajar con algunas de las herramientas más extendidas en la actualidad, como Webpack o karma. También podremos construir componentes y servicios de manera sencilla. Y lo más importante: actualizada. Siguiendo buenas prácticas existentes en 2016.
Otra de las herramientas que más me está gustando es angular-cli. La respuesta del equipo de Angular a los generadores Yeoman.
Mediante angular-cli, podremos hacer exactamente lo mismo que con los generadores Yeoman: iniciar un proyecto, y construir componentes y servicios, entre otras cosas, de manera muy rápida.
Hay que tener en cuenta que angular-cli está en fase beta. Hace muy poco que han cambiando SystemJS por Webpack como herramienta de construcción, siguiendo el mismo camino que el framework en si. Y no están incluídas todas las funcionalidades, como la parte móvil, o los módulos. Pero es muy posible que sea cuestión de días o semanas. Como digo, es un work in progress, y con mucha actividad. No se queda atrás con respecto a Angular 2, que ha liberado su primera versión estable hace apenas unos días.
Lo más normal cuando uno quiere usar Angular 2 es que acuda a la documentación oficial. Es bastante clara, concisa y útil. Pero no se actualiza con la frecuencia que a mí me gustaría. Por ejemplo: a pesar de que ya existe una versión del tutorial básico utilizando Webpack, la principal sigue usando SystemJS. Y del tutorial avanzado, llamado Tour of Heroes, todavía no hay versión oficial utilizando Webpack. Lo más parecido es este repositorio de John Papa, en el que se utiliza Webpack y alguna mejora, como el uso de rxjs, pero le falta el uso de módulos.
En vista de lo anterior, he decidido adaptar la versión de John Papa utilizando módulos y separando los componentes y servicios en carpetas. Aquí tenéis el repositorio y aquí una demo.
En próximos posts profundizaré en este ejemplo, y en otros usando Angular 2. Y hablaré también de cómo trabajar con React en 2016. O al menos, como trabajo yo.
¿Y vosotros, cómo creáis vuestros proyectos en JavaScript?
