ExpressJS es un Framework de NodeJS para armar APIs y Páginas Web. En el artículo pasado aprendimos a armar APIs. Hoy partiremos desde ese proyecto y asignaremos una vista para poder crear una web.
Un Motor de Vistas, que bien suena…
Nos encanta utilizar los términos técnicos todo lo que podamos en todos los lugares posibles. Es raro hablar coloquialmente en sistemas salvo que necesitemos explicar algo a través de analogías.
Entonces cuando hablamos de crear sitios web con Express, no decimos algo como “establecemos una ruta a una pagina que viene a ser la vista”; sino que hablamos de “usar un motor / engine de visualización para a través de otro engine de ruteo hacer una redirección que renderiza una vista”.
Y no nos estamos complicando la vida gratuitamente, solo es que necesitamos estos términos. Vamos a dar un ejemplo: Si solo usamos un sistema de ruteo que lleve a una vista estatica, sería un html como este:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body></body>
</html>
Pero si utilizamos un motor de vistas, crearemos un archivo como este:
doctype html
html(lang='en')
head
meta(charset='UTF-8')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
meta(http-equiv='X-UA-Compatible', content='ie=edge')
title Document
body
Como ven es mucho mas acotado, nos ahorra lineas de código y no nos tenemos que preocupar de usar cerrar las etiquetas. Cuando se muestra este sitio web en el navegador, su código regresa a como es el snippet anterior, porque nuestro navegador aunque usemos un engine, sigue interpretando HTML, CSS y Javascript.
Entiendo, pero que motor uso y como lo integro?
Vamos a usar el motor que recomienda oficialmente Express, llamado Pug. Se instala como cualquier paquete npm:
$ npm install pug --save
Luego en nuestro index.js, el cual programamos en nuestro artículo anterior, vamos a agregar la siguiente linea:
app.set('view engine', 'pug');
Luego crearemos una carpeta views en nuestro proyecto, y dentro un archivo index.pug. Es muy importante que sea extension “pug” y no “html”. Dentro del archivo vamos a escribir lo siguiente:
html
head
title= title
body
h1= message
Cuando tenemos un elemento que tiene igualdad con otro, estamos indicandole que va a tener un valor variable. Esto es una parte fundamental del manejo del motor de vistas. Implica que podemos pasar datos desde nuestra ruta hacia la vista. Vamos a crear una ruta home en index.js:
app.get('/home', function (req, res) {
res.render('index', { title: 'Hey', message: 'Hello there!'});
});
Ahora render posee dos parámetros, siendo el primero index, nuestra vista que esta en views/index.pug y el segundo un objeto que contiene dos atributos: title y message. Si convertimos esto en la salida de nuestro HTML en el navegador, va a decir algo como:
<!DOCTYPE html>
<html>
<head>
<title>Hey</title>
</head>
<body>
<h1>Hello there!</h1>
</body>
</html>
Como ven, utilizar un engine de vistas nos facilita muchisimo el manejo de html y el pasaje de datos.
Si queremos ver esto funcionando, debemos levantar nuestro servidor:
$ node index.js
Y luego en nuestro navegador escribir http://localhost:3000/home.
Todas mis vistas fueron creadas en HTML previamente, como las convierto sin dolor?
Si empezamos a armar vistas de cero y nos adaptamos al manejo de Pug, vamos a crear páginas en poco tiempo. Pero si queremos migrar nuestro maquetado HTML, hacerlo manualmente puede ser una tarea tediosa. Por eso encontré una herramienta que puede ser muy útil, se llama HTML2Jade. Es un conversor de HTML a Pug y es muy sencillo de usar: basta con poner nuestro código html de un lado y recibir el pug por el otro:
Espero que hayan disfrutado de este artículo tanto como yo lo hice escribiéndolo 🙂
Top comments (0)