Empezando a trabajar con Express.js

JavaScript está tomando la batuta del desarrollo web, su riqueza para realizar rutinas de procesamiento en tiempo real y la versatilidad que lo acompaña lo han hecho uno de los lenguajes con más crecimiento en los últimos 5 años.

 

Desde la liberación de Node.js mucho se ha hablado de crear aplicaciones que utilicen un solo lenguaje, y en la actualidad es posible, utilizando frameworks para Front-End como AngularJS o Backbone.js, utilizando además Bases de Datos como MongoDB o CouchDB y finalmente en el lado de servidor trabajando con el potente Node.js.

 

Pero para trabajar con grandes aplicaciones desde cero con Node.js debemos realizar muchas cosas repetitivas y complejas, es ahí donde entra Express.js, que no es más que un framework MVC que nos ayuda a simplificar la elaboración de nuestra lógica Back-End, y apoyándose en Node.js nos deja como resultado grandes aplicaciones hechas enteramente en JavaScript.

 

 

 

1. Express.js

Este framework ha sido diseñado para tener algunas características que fueron inspiradas por otros frameworks como Rails o Sinatra, esto hace que cuando un desarrollador experimentado pone sus manos sobre él pueda sentirse cómodo manejando conceptos que ya conoce, pero con el poder de Node.js y solo utilizando JavaScript la velocidad de desarrollo se multiplica.

 

Antes de adentrarnos más en el tema veamos primero las características más importantes de Express.js:

 

 

 

 

2. El Scaffolding

Este es un término que podemos haber visto de Rails y otros frameworks, se utiliza mucho en Express.js y no es más que el framework generándonos una estructura y código base, llamado también de boilerplate que nos ayuda a iniciar nuestra aplicación.

 

De esta forma podemos crear el armazón de un proyecto a partir de un comando y olvidarnos así de tener que recordar cada una de las carpetas y archivos básicos necesarios. Obviamente al ser esto algo tan general muchas veces terminamos reescribiendo muchas cosas o creando nuestras propias carpetas pero para tener un punto de partida es perfecto.

 

3. Instalar Express.js

La instalación del framework es bastante sencilla, esto gracias a las gestiones que hace npm, para instalar Express.js únicamente debemos dirigirnos a la consola de comandos donde podamos ejecutar npm y colocar el siguiente comando:

npm install express --save

Esto hará que en nuestro sistema se baje todo el código necesario para poder generar nuestros proyectos y también para utilizar las diferentes herramientas que pone Express.js a nuestra disposición, en consola veremos algo como lo siguiente si la instalación ha salido correctamente.

 

 

Podemos notar que se han instalado varios paquetes asociados y que la versión de Express.js al momento de la elaboración de este tutorial es la 4.11.2, aquí es importante señalar que desde la versión 4 en adelante hubo un gran cambio así que es importante si buscamos información asegurarnos que es para la versión 4 en adelante.

 

 

 

4. El servidor

Lo primero que debemos hacer es crear una carpeta donde irá nuestra aplicación y dentro crear un archivo llamado index.js, este nombre generalmente se coloca como convención sin embargo puede ser cualquier otro nombre, de hecho vamos a cambiar las cosas y colocar de nombre de nuestro archivo holaexpress.js.

 

Una vez que tenemos nuestro archivo vamos a empezar por incluir express utilizando la instrucción require, con ello ya tendremos a nuestra disposición todas las herramientas del framework, luego utilizaremos los métodos set() y use(), donde con el primero estableceremos el puerto por el cual nuestro servidor debe esperar las conexiones, y con el segundo estableceremos que debe ocurrir cuando obtenemos un error 404 o un error 500.

 

Finalmente con el método listen() haremos que nuestra aplicación se levante cuando ejecutemos nuestro archivo. Veamos el código a continuación:

var express = require('express');var app = express();app.set('port', process.env.PORT || 3001);app.use(function(req, res){ res.type('text/plain'); res.status(404); res.send('404 - No Encontrado');});app.use(function(err, req, res, next){ console.error(err.stack); res.type('text/plain'); res.status(500); res.send('500 - Algo anda mal!');});app.listen(app.get('port'), function(){ console.log( 'Express se ha iniciado en http://localhost:' + app.get('port') + '; presione Ctrl-C para cerrar el servidor.' );});

Ahora solo debemos escribir en la consola el siguiente comando:

node holaexpress.js

Con ello nuestro servidor va a levantar. El problema es que no veremos nada, esto se debe a que no hemos establecido las rutas de la aplicación, pero si vemos la siguiente pantalla constatamos que funciona porque ha salido nuestro mensaje que colocamos para el 404.

 

 

 

5. Incluyendo las rutas

Para poder obtener un resultado más allá de la página del 404 que generamos, debemos incluir rutas, que no es más que decirle a nuestra aplicación que cuando un usuario pida una ruta con un método HTTP en específico se le retorne un resultado que definamos, así una ruta get no es igual que una ruta post y por ello ambas a pesar de estar bajo la misma dirección pueden darnos diferentes resultados.

 

Vamos entonces a crear un par de rutas get, este código debemos colocarlo justo antes del código que nos genera el 404, por lo que vamos a modificar nuestro archivo holaexpress.js y ahora debe quedar de la siguiente forma:

var express = require('express');var app = express();app.set('port', process.env.PORT || 3001);app.get('/', function(req, res){ res.type('text/plain'); res.send('Hola! bienvenido a mi primera app');});app.get('/otraruta', function(req, res){ res.type('text/plain'); res.send('Esta es otra ruta de nuestra app');});app.use(function(req, res){ res.type('text/plain'); res.status(404); res.send('404 - No Encontrado');});app.use(function(err, req, res, next){ console.error(err.stack); res.type('text/plain'); res.status(500); res.send('500 - Algo anda mal!');});app.listen(app.get('port'), function(){ console.log( 'Express se ha iniciado en http://localhost:' + app.get('port') + '; presione Ctrl-C para cerrar el servidor.' );});

Como podemos notar el método get recibe la ruta y luego una función anónima, dentro de esta enviamos el tipo de respuesta en este caso text/plain y luego enviamos el contenido, si ejecutamos nuestro ejemplo en el navegador finalmente obtendremos algo como lo siguiente:

 

 

Las rutas post funcionan de una manera similar, solo que luego debemos incorporar un manejo para los parámetros que se puedan incluir pero no debemos preocuparnos mucho por esto en este momento. Pudimos comprobar entonces como hemos afectado el resultado de lo que puede ver el usuario directamente.

 

 

A partir de aquí podemos empezar a experimentar con los tipos de respuestas y el contenido que queremos servir, pero el verdadero poder viene cuando empezamos a implementar un motor de plantillas sin embargo eso ya es un tema un poco más avanzado de este tutorial.

 

Con esto hemos finalizado este tutorial hemos construido una pequeña aplicación para dar nuestros primeros pasos con Express.js, si hemos conocido Node.js vemos inmediatamente que las cosas son un poco más directas y sencillas. Pero el verdadero poder lo veremos cuando empecemos a implementar otras herramientas como las plantillas o los modelos.