Express (Parte VI) — Motor de plantillas con pug y EJS

Temario

• Motor de plantillas
• Motor de plantillas Pug
• Motor de plantillas EJS

0. Introducción

Esta es la sexta y última (por ahora) entrega de Express, si llegaste directamente a esta story, te sugiero leer stories anteriores:

• Express (Parte I) — Conceptos básicos y un hello world [ref]
• Express (Parte II) — Peticiones HTTP (GET, PUT, POST, DELETE) [ref]
• Express (Parte III) — Método app.use (sintaxis, errores, carga de archivos estáticos) [ref]
• Express (Parte IV) — Objeto de solicitud (Request Object) — req.* [ref]
• Express (Parte V) — Objeto de respuesta (Response Object) — res.* [ref]

i. Motor de plantillas

Motor de plantillas: Son herramientas que nos ayudan a dividir el código HTML en partes mas pequeñas, donde podemos reutilizar en otros archivos HTML y además tienen la capacidad de utilizar variables, con la finalidad de simplificar el código.

Ventajas de usar motor de plantillas:

• Mejora la productividad del desarrollador, el mantenimiento y legibilidad del código.
• Rendimiento más rápido y mejora de procesamiento del lado del cliente.
• Plantilla única para múltiples páginas.

Express permite usar un motor de plantillas[ref], permitiéndonos usar archivos de plantillas estáticas en la aplicación, donde, en tiempo de ejecución, el motor de plantillas va a reemplazar las variables en un archivo de plantilla con valores reales, transformándolo en un archivo HTML.

Express soporta bastantes motores de plantillas[ref], entre los mas populares son pug[ref][ref], haml[ref][ref], EJS[ref][ref].

Express toma las plantillas por default de la carpeta views, en caso de querer cambiar la ruta de la carpeta usaremos app.set , con la propiedad "views"

Y para indicarle que motor de plantillas, será con la propiedad "view engine"

Para devolver retornar la plantilla renderizada, será con el método app.render, donde acepta el nombre del archivo a renderizar

Nota: NO es necesario indicar la extensión del archivo.

ii. Motor de plantillas Pug

Pug es un motor de plantillas para Node.js, donde se compila en HTML y tiene una sintaxis bastante simplificada, que nos da la ventaja de ser más productivos y desarrollar un código más legible.

— Ejemplo: Hello world!

Vamos a crear una nueva aplicación, entonces, dentro de nuestra carpeta express:

• Vamos a crear una carpeta nueva llamada pug-layout
• En consola, dentro de la carpeta pug-layout escribimos npm init (no olvides que es app.js)
• Instalamos express (npm i --save express)
• Creamos el archivo app.js y pegamos el siguiente código de inicio:

• El siguiente paso es instalar el motor de plantillas pug, en consola escribimos:

• Ahora, dentro de la aplicación creamos la carpeta views
• Dentro de la carpeta debemos crear el archivo hello.pug y pegamos el siguiente código:

El código de arriba es una plantilla simple que utiliza el motor de pug antes de ser compilado a HTML, si quieres saber su sintaxis a fondo, te recomiendo revisar la documentación oficial[ref].

Importante: La extensión del archivo es muy IMPORTANTE para que el motor de plantillas identifique los archivos. También debemos tener mucho cuidado con los espacios tabulares, ya que si los acomodamos mal, nuestra plantilla puede ser un desastre.

Ahora en el archivo app.js, vamos indicarle a express que vamos a utilizar pug

Creamos un middleware para regresar la plantilla:

Donde:

• (A) — Utilizamos el método render para renderizar la plantilla, hello es el nombre de nuestro archivo views/hello.pug

No olvides que: res.render[ref] Es la que se encarga de renderizar una vista, usando el motor de plantillas configurado.

Guardamos todos los cambios y levantamos el servidor (node app.js), si hemos hecho todo bien, debemos de ver lo siguiente:

Hemos creado nuestro primer renderizado con el motor de plantillas pug utilizando express.

— Ejemplo: Pasando datos dinámicos a la plantilla

Vamos a realizar unos cambios a nuestra plantilla, la idea es cambiarle el título y la descripción, entonces:

En la app.js, vamos a pasar title, description :

Importante: La caché del motor de vista NO almacena el caché del contenido de la salida de la plantilla, por lo que el contenido se representa cada vez que se accede a la solicitud.

Vamos a pasarle un arreglo, donde la idea es saber cuántos son e imprimir la lista, entonces en el archivo hello.pug

Donde:

• En el case, estamos validando el tamaño de la lista, tomando los casos 0, 1 y más [ref]
• Estamos recorriendo cada ítem de la lista con each [ref]

En el archivo app.js, agregamos la lista:

Te recomiendo revisar la documentación oficial para ver más referencias [ref]

iii. Motor de plantillas EJS

EJS es un lenguaje de plantillas simple que le permite generar marcado HTML con JavaScript simple.

— Ejemplo: Hello world!

Vamos a crear una nueva aplicación, entonces, dentro de nuestra carpeta express:

• Vamos a crear una carpeta nueva llamada ejs-layout
• En consola, dentro de la carpeta ejs-layout escribimos npm init (no olvides que es app.js)
• Instalamos express (npm i --save express)
• Creamos el archivo app.js y pegamos el siguiente código de inicio:

• El siguiente paso es instalar el motor de plantillas ejs, en consola escribimos:

• Ahora, dentro de la aplicación creamos la carpeta views
• Dentro de la carpeta debemos crear el archivo hello.ejs y pegamos el siguiente código:

El código de arriba es una plantilla simple que utiliza el motor de ejs antes de ser compilado a HTML, si quieres saber su sintaxis a fondo, te recomiendo revisar la documentación oficial[ref], y para ver la integración con expres[ref].

Importante: La extensión del archivo es muy IMPORTANTE para que el motor de plantillas identifique los archivos. También debemos tener mucho cuidado con los espacios tabulares, ya que si los acomodamos mal, nuestra plantilla puede ser un desastre.

Ahora en el archivo app.js, vamos indicarle a express que vamos a utilizar ejs

Creamos un middleware para regresar la plantilla:

Donde:

• (A) — Utilizamos el método render para renderizar la plantilla, hello es el nombre de nuestro archivo views/hello.ejs

No olvides que: res.render[ref] Es la que se encarga de renderizar una vista, usando el motor de plantillas configurado.

Guardamos todos los cambios y levantamos el servidor (node app.js), si hemos hecho todo bien, debemos de ver lo siguiente:

Hemos creado nuestro segundo renderizado con el motor de plantillas ejs utilizando express.

— Ejemplo: Pasando datos dinámicos a la plantilla

Vamos a realizar unos cambios a nuestra plantilla, la idea es cambiarle el título y la descripción, entonces:

En la app.js, vamos a pasar title, description :

Importante: La caché del motor de vista NO almacena el caché del contenido de la salida de la plantilla, por lo que el contenido se representa cada vez que se accede a la solicitud.

Vamos a pasarle un arreglo, donde la idea es saber cuántos son e imprimir la lista, entonces en el archivo hello.ejs

Donde:

• En el case, estamos validando el tamaño de la lista, tomando los casos 0, 1 y más (podemos observar que se mezcla JS)
• Estamos recorriendo cada ítem de la lista con el método de JS forEach

En el archivo app.js, agregamos la lista:

Te recomiendo revisar la documentación oficial para ver más referencias [ref]

Conclusión

Express es un marco web de enrutamiento y middleware que tiene una funcionalidad mínima propia: una aplicación Express es esencialmente una serie de llamadas a funciones de middleware.

En la siguiente entrega vamos a ver NodeJs + Express + MongoDB (Parte I)

La entrega pasada vimos Express (Parte V) — Objeto de respuesta (Response Object) — rest.*

Bibliografía y links que te puede interesar…

Using template engines with Express

Home · expressjs/express Wiki

Getting Started

Haml

EJS

4.x API

Iconos e imágenes…