Usar Handlebars en NodeJS

  • Por
Cómo usar el sistema de templates Handlebars en NodeJS, para generar código HTML en base a plantillas de fácil mantenimiento.

Generar salida en HTML no es que sea lo más normal en las aplicaciones NodeJS, pero siempre hay momentos en los que necesitas producir un pedazo de código en formato HTML y para lo cual es suele ser mucho mejor trabajar mediante un sistema de templates.

Los motivos por los que usar un sistema de plantillas son varios. Lo fundamental es separar el código por responsabilidades, lo que derivará en la producción de un código más mantenible. También es recomendable porque te resultará mucho más fácil escribir el código de la salida de tus aplicaciones. Además, Handlebars no sirve exclusivamente para producir código HTML, por lo que te valdrá para cualquier otra salida de texto en general.

Existen diversos motores de plantillas que podrías usar en Node, pero me gusta Handlebars por su sencillez. No tienes necesidad de usar otro lenguaje, como ocurre con Jade, y eso lo veo una ventaja, sobre todo cuando quieres hacer un código limpio y de calidad, pero no quieres invertir tiempo en aprender nada nuevo.

En el Manual de Handlebars habíamos explicado cómo usar el sistema de templates desde Javascript para navegadores, pero nada te impide usarlo también en NodeJS. Es algo que vamos a tratar en el presente texto.

Instalar Handlebars

Como cualquier otra librería Node, comenzaremos instalando Handlebars mediante el correspondiente comando de npm.

npm install --save handlebars

Una vez instalado en el proyecto, podremos hacer el require para traernos la funcionalidad de la librería.

let handlebars = require('handlebars');

Obtener una plantilla de Handlebars compilada

Handlebars trabaja mediante un sistema de plantillas "compiladas". Es decir, para poder usar una plantilla tenemos que poner en marcha Handlebars y procesar un archivo que tiene el código de nuestra plantilla. Una vez procesado ese archivo podremos procesar el template las veces que haga falta, enviando generalmente juegos de datos diferentes, con los que Handlebars creará la salida.

Generas el template compilado con el método compile() de Handlebars:

//obtengo el código de nuestro template, mediante el sistema de ficheros
var source = fs.readFileSync('ruta-a-tu-template.html, 'utf-8');
//compilo la plantilla mediante handlebars
var miTemplate = handlebars.compile(source);

Enviarle a la plantilla un juego de datos para producir salida

Una vez tienes la plantilla generada, compilada, podrás obtener una cadena con el resultado de procesar esa plantilla mediante el envío de un conjunto de datos. Esta parte la harás igual que has aprendido en el Manual de Handlebars para Javascript de lado del cliente.

var salida = miTemplate({
  dato1: 'valor 1',
  dato2: 'valor2'
});

Ahora en la variable "salida" tendrás la cadena resultante de producir ese template con el juego de datos que se le ha enviado por parámetro.

Con lo que has aprendido ya puedes producir tus cadenas con cualquier contenido definido en una plantilla almacenada en un fichero externo. Por lo que respecta a la sintaxis y posiblidades de Handlebars ya te recomiendo nuestro Manual de Handlebars o la propia documentación oficial.

Un module que encapsula el compilado de templates

Para mejorar la organización del código y mantener la complejidad de la compilación de plantillas (que no es tanta, pero se agradece) en un módulo de tu proyecto, generalmente uso un paso adicional, que a la larga también te quita trabajo cuando tienes que usar varios templates en un proyecto.

Básicamente se trata de crear un módulo que tiene una única función que sirve para obtener un template y compilarlo. Este módulo es el único de mi aplicación que conoce a Handlebars y toda plantilla que necesite usar se la pido a él.

'use strict'


//sistema de archivos
let fs = require('fs');


//handlebars
let handlebars = require('handlebars');


module.exports = {
  getTemplate
}


function getTemplate(archivo) {
  let source = fs.readFileSync(archivo, 'utf-8');
  let template = handlebars.compile(source);
  return template;
}

Como ves, lo único que exporta hacia afuera es el método getTemplate, que recibe el archivo que debe compilar para producir la correspondiente plantilla.

Con este módulo generado, usarlo para producir plantillas en cualquier parte de mi proyecto es tan sencillo como esto:

let handlebars = require('./modules/handlebars/get-template');
let templateJuego = handlebars.getTemplate('./modules/handlebars/templates/mi-plantilla.html')

Quitando el require, que lo debes hacer una única vez, la generación de la plantilla se reduce a una línea de código. No es que fuera muy compleja, esa compilación, pero había que ir al sistema de archivos a traerse el código del template, compilarlo, etc. Ahora queda mucho más conciso y la complejidad encapsulada en un sencillo módulo.

Conclusión

Aprender Handlebars no te llevará más de 10 minutos y usarlo para generar plantillas, con las que producir salida cómodamente y en cualquier formato, te ahorrará mucho tiempo de desarrollo, evitando código difícil de mantener, a medio y largo plazo.

Con este artículo ahora lo tienes mucho más fácil de integrar en NodeJS, por lo que no hay excusas para comenzar a trabajar con este sencillo pero potente sistema de templates.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

JuanMa

23/5/2017
Usar Handlebars en NodeJS
¿por qué utilizáis let en vez de const para los require? Entiendo que tanto fs como handlebars son no van a ser modificados por lo tanto sería más apropiado definir como const en lugar de hacerlo con let. ¿Es esto correcto?

Gracias por el articulo.

Un saludo