Después de buscar por horas en Internet, encontré que no hay muchos (yo no encontré ninguno) tutoriales de la implementación de un ambiente de desarrollo completo usando node.js y algunos de los módulos más populares. Me refiero a las tareas necesarias para el desarrollador (ejecutar pruebas de unidad, integración, compilación de templates etc). Es verdad que yeoman (Generardor de plantillas automáticas) tiene templates con todo lo necesario para iniciar el desarrollo pero en lo personal las encontré complejas de entender (no de usar) por la cantidad de características e instrucciones.
node.js , (Donde todo inició)
Primero definamos que es node.js , si bien en el sitio web es descrito como un framework para crear aplicaciones con un modelo de desarrollo no bloqueante (es decir Javascript en el servidor). node.js se popularizo también porque permite escribir tareas en Javascript, gestionar dependencias y es extensible mediante módulos (tipo plugins). Los módulos por lo general son tareas necesarias para el desarrollo como comprimir archivos, ofuscar archivos, compilar CSS (SASS o LESS) o Javascript desde un lenguaje que lo genera (por ejemplo CoffeeScript).
Gestionando las dependencias
El primer gran cambio en esta “nueva” era del desarrollo js en la UI es la gestión de dependencias. Antes lo más común era descargar la librería a usar como Jquery, Ext-js y incluirla en nuestro proyecto haciendo uso de la etiqueta <script>. Esto aunque funcionó por años, se han presentado problemas como:
1. Manejar las actualizaciones y versiones.
2. Modificar el código para el ambiente de producción y desarrollo.
Para realizar esta tarea ahora existen sistemas como Maven y Ant en Java o Nuget en .Net que permiten mediante un archivo de configuración administrar las dependencias de nuestros proyectos.
Bower (Imagen Bower)
Bower es uno de los gestores de dependencias más usados. Es instalado mediante node.js y permite configurar las dependencias en un archivo de en formato JSON (bower.json ). La instalación de bower se realiza de la siguiente forma:
En una consola con node.js ejecutamos el comando.
npm install -g bower
Este comando instalara Bower a nivel global lo cual lo vuelve accesible desde todos nuestros proyectos. Bower administra las dependencias en un archivo de configuración bower.json. Para instalar una dependencia es necesario incluirla en el archivo de configuración y usar el comando
bower install
{
"name": "my-app",
"version": "0.0.0",
"dependencies": {
"jquery": "^2.1.0"
}
}
<html>
...
<body>
<script src="../bower_components/jquery.js"></script>
</body>
Un momento ahora parece mucho más complicado? Inicialmente para que si la diferencia es que cuando necesitemos cambiar la versión de Javascript solo tendremos que modificar el archivo de configuración. Incluso podemos fácilmente cambiar entre la versión de depuración y la versión de producción sin estar modificando y copiando archivos.
Archivos y dependencias JS locales
Otro de los problemas comunes es la gestión de las dependencias locales, todos los archivos locales js que constituyen una aplicación. En el desarrollo tradicional la solución fue agregar todas las dependencias al archivo index.html y en cada página que fuera necesario. Pero esto además de impactar el desempeño afecta otros atributos de calidad como la modificabilidad del código.
Para solucionar este problema existen diferentes ejecutadores de tareas que nos permiten solucionar este tipo de problemas.
Grunt
Grunt permite la ejecución y definición de tareas mediante un archivo de configuración. Para instalarlo podemos usar el comando install de node.js. Con la opción de configuración –save-dev node.js instala grunt en el proyecto y no a nivel global.
npm install grunt --save-dev
{
"name": "todo-app",
"version": "1.0.0",
"devDependencies": {
"grunt": "~0.4.5",
}
}
Después de instalar grunt que también es extensible mediante plugins, es necesario instalar una de sus tareas más conocidas «grunt-contrib-concat» (npm install grunt-contrib-concat–save-dev). Esta tarea me permite concatenar todos los archivos en un solo y agregar una única dependencia en nuestro proyecto.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-concat');
concat: {
js: {
src: 'js/**/*.js',
dest: 'js/concat.js'
}
}
});
grunt.registerTask('serve', ['concat']);
};
<html>
...
<body>
<script src="concat.js"></script>
</body>
Un momento, son muchos archivos ¿esto podría ser un verdadero problema? Con la llegada de «nuevos» Frameworks basados en una arquitectura MVC para cliente como Angular y Ember, la cantidad de recursos es mucho mayor (separación de responsabilidades). Por lo que administrar las dependencias locales de manera efectiva es sin duda un aspecto a considerar.
Desplegando los cambios
Aunque es posible abrir el archivo de nuestra página Html o servir la aplicación en Tomcat, IIS u otro. Tener un servidor implica configuraciones y construcciones especificas (en el caso de Tomcat un war). Y abrir archivos locales puede no funcionar correctamente por restricciones del navegador o acceso a los recursos. Por eso podemos instalar otro módulo de grunt conocido como expres. Express nos permite desplegar un servidor con nuestros archivos especificando los recursos.
express: {
all: {
options: {
port: 9000,
hostname: "0.0.0.0",
bases: ['js', 'bower_components'],
livereload: true
}
}
...
grunt.registerTask('serve', ['concat', 'express']);
Agregando un poco de magia, cambios en “caliente”, iniciando la aplicación automáticamente
Uno de las tareas más interesantes en grunt es el refresco de la interfaz gráfica tan pronto los cambios son almacenados, para eso es necesario agregar la tarea watch que observa los cambios y notifica al navegador. Finalmente, agregamos la tarea open que inicia el servidor y la tarea clean que permite limpiar el directorio.
Eso es todo. Para la aplicación de ejemplo use la versión de Ember de Todo-List App. Pueden revisar el código en Github. No duden en comentar o escribir cualquier pregunta, el mercado de Javascript en general ofrece cientos de frameworks con funcionalidades diferentes. La invitación es hacer una buena selección que nos permite llevar nuestros proyectos a feliz termino!
Desarrollo & diseño de Software 