Como crear vistas en ExpressJS

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 🙂

Seguinos en Facebook para conocer más acerca de Wolf Academy y conocer todos nuestros cursos online!

¡Deja un comentario!

Artículos relacionados

Cómo Migrar WordPress y Woocommerce con Azure

Las migraciones en WordPress siempre fueron un tema difícil de tratar. Las guías se centran en los backups locales pero no tanto en las restauraciones del lado del servidor. Los plugins en general tampoco ayudan demasiado: Apenas instalamos alguno, el backup es gratuito, pero la migración requiere un servicio premium. Por eso decidí armar esta guía, para resolver el dilema de una sola vez. Aclaro que si bien vamos a trabajar con Azure del lado del servidor, se puede hacer con cualquier otro VPS o Hosting siempre y cunado este nos permita una instalación previa de WordPress.

Mi experiencia con WordPress

Mi 2020 arrancó de una manera muy intensa. Debido a que me eligieron para preparar un programa académico de esta tecnología, reforcé mis conocimientos actuales y me introduje de lleno en nuevos e interesantes conceptos que trae esta plataforma de blogging y un poco más.

La Senda del Desarrollador Full Stack

Uno de los tópicos que más me consultan como profesor es “¿por dónde debería empezar?”. Hay muchas tecnologías y una demanda laboral muy alta que incrementó potencialmente estos últimos años. Por eso decidí crear esta guía que va a aplanar el camino a todo el que se inicie como desarrollador en este mismo instante. También reforzará a los experimentados.

Como popular una tabla en base a un servicio con Jquery

La idea es crear una tabla donde tengamos la lista de personajes de StarWars (obtenido con SWAPI) y podamos eliminar uno a uno. Lo primero que vamos a hacer es crear nuestro html e incluirle Bootstrap (Framework de maquetado) y Jquery

Como llamar a una API desde Jquery

Como llamar a una API desde Jquery

Jquery es una librería que nos ayuda a simplificar muchas funcionalidades que existen en Vanilla Javascript pero que son mas complicadas de implementar en esta última.