TheLazy.Dev
Portfolio GitHub

Blog

javascript |tutorial |webdev |spanish

Como crear vistas en ExpressJS

maxwellnewage

Maximiliano Burgos

Posted on December 7, 2022

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Luego en nuestro index.js, el cual programamos en nuestro artículo anterior, vamos a agregar la siguiente linea:

app.set('view engine', 'pug');
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!'});
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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:

HTML to JADE/PUG

Espero que hayan disfrutado de este artículo tanto como yo lo hice escribiéndolo 🙂

💖 💪 🙅 🚩
maxwellnewage
Maximiliano Burgos

Posted on December 7, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Como crear vistas en ExpressJS
javascript Como crear vistas en ExpressJS

December 7, 2022