He decidido hacer un pequeño tutorial sobre cómo montar una aplicación con node.js usando Express como web framework y jQuery en el lado cliente para realizar peticiones AJAX. Al principio iba a escribir un único post, pero estaba quedando demasiado largo, por lo que he decidido partirlo en varios:

• Tutorial node.js + express + jquery (I): Creando la aplicación.
• Tutorial node.js + express + jquery (II): Generando vistas con Jade.
• Tutorial node.js + express + jquery (III): Usando jQuery.
• Tutorial node.js + express + jquery (IV): Conclusiones y próximos pasos.
• Puedes descargar el código fuente de GitHub.

Mi objetivo con este tutorial es poner en claro lo que he aprendido últimamente y ayudar un poco a aquellos que, como yo, estén empezando con esto. Tened en cuenta que esto es sólo un ejemplo sencillo de cómo enganchar distintas liberías para hacer una aplicación, pero no pretende ser ningún momento un catálogo de buenas prácticas. Habrá muchas cosas que se queden en el aire y muchos puntos que puedan ser mejorados, pero lo que intentaré es que lo que hagamos sirva como toma de contacto para luego poder preocuparnos por el resto.

Instalando lo que necesitamos

Lo primero es instalar node.js, pero supongo que si estás leyendo esto problablemente ya lo tengas instalado. Gracias a npm, el gestor de paquetes de node.js, la instalación del resto de cosas resulta bastante sencilla:

Una vez que tengamos creada una carpeta para nuestra aplicación, deberemos entrar en ella y ejecutar los siguientes comandos:

npn install express
npn install jade
npm install underscore
npn install nodemon -g

Con esto, habremos instalado los siguientes paquetes:

• express: Express es un framework para desarrollar aplicaciones web sobre node.js. Está inspirado en Sinatra y además de ser muy fácil de manejar, es bastante potente. Para los que venimos de .net, sería el equivalente a instalarnos ASP.NET MVC3 (realmente más bien sería como instalar Nancy, pero poca gente conoce ese framework).
• jade: Jade es un motor de plantillas que permite generar html con una sintaxis compacta. Está basado en haml. En terminología .net, esto será el View Engine de nuestra aplicación; vamos, el equivalente a Razor.
• underscore: Underscore es una librería con utilidades para javascript que ayuda bastante a la hora de realizar programación funcional. No es vital para el ejemplo, pero permite usar construcciones al estilo LINQ y me resulta cómodo contar con ellas.
• nodemon: nodemon no es una librería, sino una herramienta. Se encarga de monitorizar el código de la aplicación y, si cambia, reiniciar node.js. Así nos evitamos tener que estar continuamente tecleando Ctrl+C, node app.js cada vez que cambiamos algo. Por comodidad la hemos instalado de forma global, pasando el parámetro -g a npm para que esté accesible en el path.

Creando el esqueleto de la aplicación

Ahora que tenemos instalado todo lo que necesitamos (de momento), podemos crear el esqueleto de nuestra aplicación. Podríamos montarlo “a mano”, pero Express incluye una pequeña herramienta que nos ayuda a hacer la configuración inicial. Desde la raíz de la aplicación ejecutaremos:

./node_modules/express/bin/express -t jade
destination is not empty, continue? y

   create : .
   create : ./package.json
   create : ./app.js
   create : ./routes
   create : ./routes/index.js
   create : ./views
   create : ./views/layout.jade
   create : ./views/index.jade
   create : ./public
   create : ./public/javascripts
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./public/images

   dont forget to install dependencies:
   $ cd . && npm install

Esto creará los ficheros que indica arriba con una aplicación lista para funcionar. Por seguir con mi comparativa para la gente de .net, esto es el equivalente a hacer File -> New Project -> ASPNET MVC en el Visual Studio. Aunque nos avisa de que hagamos un npm install para instalar las dependencias, en nuestro caso no es necesario porque ya las hemos instalado antes.

Ahora mismo podríamos ejecutar ya nuestra aplicación con nodemon app.js y acceder a ella en la dirección http://localhost:3000.

Como ya he dicho en otras ocasiones, creo que es importante entender lo que uno está haciendo, así que vamos a ver qué cosas nos ha generado express. Empecemos analizando el fichero app.js.

var express = require('express')
  , routes = require('./routes')

var app = module.exports = express.createServer();

En esta parte, se están definiendo los módulos que necesitamos, en este caso express y routes. El caso de routes es un poco especial, porque lo que estamos referenciando es una carpeta. Cuando referenciamos una carpeta, se busca el fichero index.js y se carga. Si no se encuentra, se genera un error. Una vez que tenemos cargados los módulos, creamos un servidor de express.

A continuación viene la parte de configuración del servidor:

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

Este fragmento de código se encarga de establecer la configuración de nuestra aplicación. A la hora de configurar una aplicación express podemos jugar con dos tipos de cosas:

• Settings, que son parámetros de configuración y se establecen con el método app.set(settingName, value). En este caso estamos indicando que las vistas se almacenan en la carpeta ./views y que el formato es jade.
• Middlewares, que son “módulos” que podemos añadir a nuestra aplicación para dotarla de más funcionalidad. Para añadirlos se usa el método app.use(middleware). En este caso están añadidos:
  • bodyParser: facilita el acceso al cuerpo de las peticiones (requests), tanto si son posts de formularios, como si son json. Con este middleware, podemos escribir cosas como request.body.personName.
  • methodOverride: permite utilizar <input type="hidden"> para modificar el método HTTP de la petición. De momento esto no lo vamos a utilizar mucho.
  • router: se encarga de gestionar las rutas. Remotamente parecido al routing de ASP.NET.
  • static: este middleware permite servir contenido estático, por ejemplo, hojas de estilo, imágenes, scripts de cliente, etc. En este caso le estamos diciendo que todo lo que esté en la carpeta ./public se sirva como contenido estático.

Por último, se está definiendo configuración personalizada para dos entornos, developmenty production. Para activar un entorno u otro se puede usar la variable de entorno $NODE_ENV, por ejemplo $ NODE_ENV=production node app.js.

Las últimas líneas del fichero están dedicadas a la creación de rutas y al arranque del servidor:

app.get('/', routes.index);
app.listen(3000);

Este es un punto importante porque vemos cómo se configura lo que sería el equivalente a los controllers de ASPNET MVC. Lo que hacemos es asignar a cada ruta una función que se encargará de gestionarla. En este caso, con app.get('/', routes.index) estamos configurando que, cuando se acceda a la raíz de la aplicación, se ejecute el método index definido en el objeto routes, que, si recordáis, habíamos importado al principio del archivo.

Próximamente…

Con esto hemos analizado la estructura de la aplicación. En el próximo post de esta serie veremos cómo se crean las vistas utilizando jade y cómo se añade la lógica para generar esas vistas (lo que serían los action methods en una aplicación ASPNET MVC).

Siguiente capítulo: crear vistas con Jade.

Compartir: