Ahora le toca el turno a las vistas o templates, aunque realmente este tema es muy amplio porque express admite multitud de engines de templates distintos. En la documentación oficial tenéis todos los que soporta y como se usan, veremos ejemplos con ejs porque es muy típico pero realmente podéis usar el que queráis.
Comentaros que a mi personalmente no me gusta mucho renderizar cosas en servidor para servirlas al cliente ya que aumentas la carga de trabajo del servidor, prefiero usar Node+Express como API Rest y para las vistas usar directamente AngularJS, ReactJS o similar pero al final depende un poco del proyecto o aplicación que estemos realizando, si es una página simple, casi como las que hemos visto de ejemplo, usamos los templates y ale a correr.
Bueno después de quejarme un poco vamos a continuar....como he comentado trabajaremos un poco con ejs y para ello lo primero que tenemos que hacer es instalar el engine.
npm install ejs --save
Recordad usamos --save para que al instalar el módulo lo indique también en el package.json y poder llevar control de versiones (y ya de paso si movemos la app que lo instale directamente)
Antes de continuar, os cuento, nosotros vamos a modificar nuestro proyecto de express actual para cambiar el engine pero si de primeras ya sabéis que váis a usar un engine en concreto, si recordáis se lo podíamos indicar a express_generator para que configure él directamente, si probáis el comando:
express -h
veréis las opciones que tenemos
Aún así no penséis que cambiar de uno a otro es muy difícil solo tenemos que saber que caracteriza a cada uno, o más bien como se compone cada uno. En el caso de ejs es que realmente tu realizas la composición sobre código HTML, supongo que es una de las claves de su aceptación, básicamente es lo mismo que ya se estaba haciendo desde hace años pero con vitaminas.
El primer cambio que haremos una vez instalado es cambiar el engine en el app.js, para ello vamos a cambiar la línea
app.set('view engine', 'jade');
por esta otra (solo cambiando jade....superdifícil)
app.set('view engine', 'ejs');
Ya tenemos el primer paso, lo siguiente que haremos será cambiar la vista index por ejemplo(solo cambiaremos una para que veáis de que va). Priemo eliminamos el index.jade de la carpeta views y creamos otro que sea index.ejs. Una vez creado vamos a empezar por un código simple de HTML(mu feo lo sé es para probar solo)
<!DOCTYPE html>
<html>
<head>
<h1>NinjaTitle</h1>
</head>
</html>
Esto nos muestra ya lo siguiente
Ya funciona. Ahora vamos a prepararlo para que use la variable title que le pasabamos desde el middleware.
<!DOCTYPE html>
<html>
<head>
<h1>NinjaTitle</h1>
</head>
<body>
<p>Bienvenidos a vuestro template ejs <%= title %></p>
</body>
</html>
Si os fijáis la variable esta puesta directamente entre <%= %>, fácil ¿verdad?. Ahora vamos a probarlo, recordar que teníamos configurado el middleware para que usara los datos recibidos de la query string, por lo que la URL debería ser algo similar a
http://localhost:3000/?title=Ninjas
Y nos debería mostrar algo similar a
Voilá supersencillo. Ahora veamos alguna cosa más que podemos hacer con ejs.
En el ejemplo hemos usado <%= %> para trabajar con variables, pero claro si queremos poner código HTML como variable, ¿funcionaría? Veamos que pasa.
Cambiamos la variable title que le mandamos a la vista, en nuestro index.js cambias res.render por
res.render('index', { title: '<h2>' + newTitle + '</h2>' });
Y ahora veamos el resultado
Ups!!! nos aparace todo literal, eso es porque con <%= %> básicamente conseguimos que nos transforme todo a literal(en este caso un string), pero ejs está preparado para esto, solo tenemos que cambiar los tags en nuestro index.ejs, básicamente cambiamos el igual por un guión y listo
<!DOCTYPE html>
<html>
<head>
<h1>NinjaTitle</h1>
</head>
<body>
<p>Bienvenidos a vuestro template ejs <%- title %></p>
</body>
</html>
Ahora ya tendríamos algo similar a esto
Acabamos de ver como podemos pasarle estructuras de HTML directamente a la vista, pero todavía podemos hacer más cosas interesantes. Una de las ventajas de ejs es que podemos usar código javaScript directamente en la vista, vamos a ver algunos ejemplos
Empecemos por ver como podríamos hacer un condicional, cambiémos nuestro index.ejs por esto
<!DOCTYPE html>
<html>
<head>
<h1>NinjaTitle</h1>
</head>
<body>
<p>Bienvenidos a vuestro template ejs <%- title %></p>
<% if (title === 'Ninjas'){ %>
<p>Somos Ninjas</p>
<%}else{%>
<p>Te has equivocadooooo</p>
<%}%>
</body>
</html>
Y que no se nos olvide cambiar en nuestro index.js la línea de render por
res.render('index', { title: newTitle});
Solo es quitarle los tags HTML.
Ahora vamos a probarlo, pongamos por ejemplo esto en la url
http://localhost:3000/?title=Superman
Vemos como al no cumplir la condición sale la segunda opción, ahora probemos con nuestro title=Ninjas
Por último vamos a probar a trabajar con un array de elementos. Creemos lo primero nuestro objeto array en index.js, cambiando el ya conocido res.render por
res.render('index', {
title: newTitle,
superHeros: [{name: 'Dr. Manhattan'},{name: 'Superman'},{name: 'El Comendiante'}]
});
Ya tenemos nuestro array de elementos, ahora hagamos que la vista trabaje con ellos, en index.ejs añadimos lo siguiente
<!DOCTYPE html>
<html>
<head>
<h1>NinjaTitle</h1>
</head>
<body>
<p>Bienvenidos a vuestro template ejs <%- title %></p>
<% if (title === 'Ninjas'){ %>
<p>Somos Ninjas</p>
<% superHeros.forEach(function(hero){ %>
<p><%= hero.name %></p>
<%})%>
<%}else{%>
<p>Te has equivocadooooo</p>
<%}%>
</body>
</html>
Si os fijáis hemos recorrido directamente el objeto superHeros y hemos mostrado la propiedad name de cada uno. Veamos lo que pasa cuando usamos title=Ninjas
Voilá, como véis es relativamente sencillo utilizar templates ejs, esto ha sido solo una pequeña muestra de como podemos ir trabajando con ellos pero las posibilidades son infinitas (y también recordar que tenemos multitud de engines distintos).
Hasta aquí lo que quería comentar sobre los templates, en los siguientes post veremos como gestionar autenticación en nuestra API, uso de Promesas....y varias cosas más, nos veeemossss
Un abrazooorrr