El uso de plantillas se ha vuelto una necesidad en el mundo de las aplicaciones web, esto debido a que nos ayuda a hacer la separación de la lógica de programación de lo que es la presentación de la misma. Toda esta separación y el auge de la acogida de este estilo de desarrollo han llevado a que aparezcan una gran cantidad de frameworks en el mercado que nos ayudan a llevar la responsabilidad de administrar las plantillas.
En el caso de Express, este viene de forma nativa con un motor de plantillas llamado Jade, sin embargo muchos desarrolladores ya vienen con un trasfondo en otros y no sería justo que tengan que ajustarse de nuevo a un nuevo motor, esto no es malo pero no es del gusto de todos.
Es por ello que Express nos permite configurar el framework para que podamos trabajar con diferentes motores de plantillas, como es el caso de Handlebars que es una extensión de Mustache.js y es un motor de plantillas muy popular ya que es basado en JavaScript y podemos utilizarlo tanto en lado servidor como en el cliente.
En el inicio del tutorial mencionamos que Jade era el motor por defecto, entonces ¿Por qué buscamos otro motor? La respuesta es muy sencilla, la forma en la que trabaja Jade es tratando de disminuir la cantidad de HTML que escribimos, esto puede llevar un poco a confusiones, ya que tenemos que aprender prácticamente una forma nueva de lenguaje para nuestro Front-End.
En la siguiente imagen veremos un código de plantilla de Jade para que podamos observar un ejemplo de su sintaxis:
Podemos notar que la diferencia con código HTML estándar es abismal, y aunque el código es menos la cantidad de pensamiento que nos conlleva es un poco mayor.
Handlebars es una historia diferente a Jade, su forma de trabajo es similar a otros motores como Jinja2 o Swig, ya que nos permite escribir etiquetas HTML y luego dentro con código del motor propio podemos definir que imprime del contexto y la forma en que lo hace.
Por ejemplo si sabemos que vamos a imprimir algo que un usuario escribió, podemos escapar los caracteres especiales de forma automática y así evitar la inyección de código, pero si sabemos que es un código propio entonces ahí podemos expresarle a Handlebars que no haga escape del texto.
Para instalar Handlebars en el lado del servidor es muy fácil, simplemente debemos utilizar npm en nuestra consola y así obtendremos los paquetes necesarios, veamos que tenemos que escribir:
Luego en nuestro archivo donde iniciamos nuestra aplicación Express debemos decirle que utilice este como el motor de platillas, para ello simplemente nos basta con escribir el siguiente código:
Nuestra vista genera como resultado datos que debemos mostrar al usuario, dichos datos los pasamos a través del contexto a nuestra plantilla y aquí es donde los imprimimos. Para imprimir esto simplemente debemos encerrar la variable o el elemento en llaves dobles como lo siguiente:
Ahora si queremos imprimir un texto sin escapar debemos utilizar triples llaves, esto le indica a Handlebars que no debe escapar nada, veamos el ejemplo:
Los comentarios en la plantilla son vitales, ya que nos permiten identificar las secciones, añadir información importante, y documentar nuestra aplicación. Si colocamos un comentario directamente en HTML de la forma: <!-- Aquí nuestro comentario --> este termina siendo visible para quien inspeccione el código de nuestra página, por lo que nos limita en lo que podemos dejar documentado.
Pero si utilizamos comentarios en Handlebars, siempre los podremos ver en el código fuente, pero el motor al generar lo que ve el usuario lo omite, y entonces al inspeccionar el código de la web o la aplicación no veremos nada. Para escribir un comentario en Handlebars debemos hacer lo siguiente:
Algo que no debemos olvidar es que no tenemos que limitarnos a lo que está en el mainstream, hay muchas opciones que tal vez resulten mejores para el estilo de desarrollo de cada quien, es por ello que resulta vital investigar y no tener temor de probar cosas nuevas.
Con esto hemos finalizado este tutorial, hemos tenido una pequeña introducción pero bastante enriquecedora a lo que significa el uso de plantillas, y de cómo incorporar un nuevo motor a Express.
Si bien Handlebars es mucho más extenso, pero con estos conceptos claves y nuestra aplicación Express podremos lograr cosas muy interesantes en poco tiempo.
En el caso de Express, este viene de forma nativa con un motor de plantillas llamado Jade, sin embargo muchos desarrolladores ya vienen con un trasfondo en otros y no sería justo que tengan que ajustarse de nuevo a un nuevo motor, esto no es malo pero no es del gusto de todos.
Es por ello que Express nos permite configurar el framework para que podamos trabajar con diferentes motores de plantillas, como es el caso de Handlebars que es una extensión de Mustache.js y es un motor de plantillas muy popular ya que es basado en JavaScript y podemos utilizarlo tanto en lado servidor como en el cliente.
Requisitos
Para cumplir con algunos de los ejemplos acá demostrados necesitamos tener instalado y acceso a Node.js, y haber instalado previamente Express. Un editor de texto y una aplicación Express son deseables de forma que puedan incorporar los conceptos explicados en el tutorial.
Desventajas de no usar un un motor de plantillas
La no utilización de un motor de plantillas conlleva una serie de desventajas que pueden afectar la velocidad de nuestro desarrollo de aplicaciones, vamos a listar dichas desventajas de forma que cuando pensemos que no necesitemos el motor de plantillas veamos lo contrario.
El riesgo de hacer HTML mal formado es mucho mayor, por lo que obtener certificaciones para nuestro código se puede hacer difícil.
El código resultante puede resultar difícil de documentar y de compartir con otros desarrolladores.
Si utilizamos código para generar HTML siempre será incomodo trabajar con caracteres especiales.
Hay tendencia a no separar la lógica de aplicación de la presentación.
Como vemos existen muchas desventajas que aunque no son graves y no llevan a nuestra aplicación a no funcionar si reduce la posibilidad de ser más productivos.
El riesgo de hacer HTML mal formado es mucho mayor, por lo que obtener certificaciones para nuestro código se puede hacer difícil.
El código resultante puede resultar difícil de documentar y de compartir con otros desarrolladores.
Si utilizamos código para generar HTML siempre será incomodo trabajar con caracteres especiales.
Hay tendencia a no separar la lógica de aplicación de la presentación.
Como vemos existen muchas desventajas que aunque no son graves y no llevan a nuestra aplicación a no funcionar si reduce la posibilidad de ser más productivos.
Ventajas de utilizar un motor de plantillas
Ahora veamos que ganaremos al implementar soluciones como Handlebars en nuestras aplicaciones con Express:
El código resultante es más organizado, y tenemos garantía que no habrá HTML mal formado.
Podemos separar nuestro equipo en dos, al trabajar interfaces de usuario sin necesidad de desarrollar en Back-End.
Los motores de plantilla nos permiten reutilizar secciones de código ayudando así a mantener nuestro proyecto optimizado.
Existen muchas utilidades que nos ayudan a dotar de mejor interacción la parte visual de nuestras aplicaciones.
Cómo vemos lo que nos ofrecen los motores de plantilla es poder separar, optimizar y organizar nuestro código, esto trae como consecuencia directa la mejora en la efectividad, eficiencia y productividad general en nuestro equipo de desarrollo.
El código resultante es más organizado, y tenemos garantía que no habrá HTML mal formado.
Podemos separar nuestro equipo en dos, al trabajar interfaces de usuario sin necesidad de desarrollar en Back-End.
Los motores de plantilla nos permiten reutilizar secciones de código ayudando así a mantener nuestro proyecto optimizado.
Existen muchas utilidades que nos ayudan a dotar de mejor interacción la parte visual de nuestras aplicaciones.
Cómo vemos lo que nos ofrecen los motores de plantilla es poder separar, optimizar y organizar nuestro código, esto trae como consecuencia directa la mejora en la efectividad, eficiencia y productividad general en nuestro equipo de desarrollo.
Jade
En el inicio del tutorial mencionamos que Jade era el motor por defecto, entonces ¿Por qué buscamos otro motor? La respuesta es muy sencilla, la forma en la que trabaja Jade es tratando de disminuir la cantidad de HTML que escribimos, esto puede llevar un poco a confusiones, ya que tenemos que aprender prácticamente una forma nueva de lenguaje para nuestro Front-End.
En la siguiente imagen veremos un código de plantilla de Jade para que podamos observar un ejemplo de su sintaxis:
Podemos notar que la diferencia con código HTML estándar es abismal, y aunque el código es menos la cantidad de pensamiento que nos conlleva es un poco mayor.
Handlebars
Handlebars es una historia diferente a Jade, su forma de trabajo es similar a otros motores como Jinja2 o Swig, ya que nos permite escribir etiquetas HTML y luego dentro con código del motor propio podemos definir que imprime del contexto y la forma en que lo hace.
Por ejemplo si sabemos que vamos a imprimir algo que un usuario escribió, podemos escapar los caracteres especiales de forma automática y así evitar la inyección de código, pero si sabemos que es un código propio entonces ahí podemos expresarle a Handlebars que no haga escape del texto.
Servidor o Cliente
Otro aspecto de Handlebars es que puede funcionar en dos formas, desde el lado del servidor o desde el lado cliente. Esta versatilidad hace que podamos decidir mejor como queremos realizar nuestras aplicaciones, ya que si es una SPA o Aplicación de una sola página, tal vez el enfoque del lado cliente sea más sencillo y útil, pero si queremos un web site tal vez generar todo en el servidor sea más útil.
Instalar Handlebars en lado Servidor
Para instalar Handlebars en el lado del servidor es muy fácil, simplemente debemos utilizar npm en nuestra consola y así obtendremos los paquetes necesarios, veamos que tenemos que escribir:
npm install --save express-handlebarsCon ello npm va a descargar todos los componentes necesarios para que podamos incorporar este motor en nuestro proyecto al final debemos obtener un resultado similar al siguiente en nuestra consola:
Luego en nuestro archivo donde iniciamos nuestra aplicación Express debemos decirle que utilice este como el motor de platillas, para ello simplemente nos basta con escribir el siguiente código:
var handlebars = require('express-handlebars') .create({ defaultLayout: 'main' });app.engine('handlebars', handlebars.engine);app.set('view engine', 'handlebars');Lo que nos quedaría en nuestro archivo sería lo siguiente:
Sintaxis básica de Handlebars
Handlebars tiene una sintaxis propia muy limpia que nos permite incorporar un poco de lógica de vistas dentro de la plantilla, podemos incorporar comentarios, iterar sobre listas y bloques, escapar o no secciones de texto. Es por ello que es importante conocer las más básicas de forma que podamos expresar nuestras ideas de forma más cómoda y así sacar el máximo provecho, veamos a continuación lo más básico del motor.
Imprimir elementos del contexto
Nuestra vista genera como resultado datos que debemos mostrar al usuario, dichos datos los pasamos a través del contexto a nuestra plantilla y aquí es donde los imprimimos. Para imprimir esto simplemente debemos encerrar la variable o el elemento en llaves dobles como lo siguiente:
{{nombre}}Eso nos lleva a ver el contenido de “nombre” que hayamos definido en nuestra vista, estas dobles llaves llevan el escape de caracteres de forma automática, de tal manera que no resulte la impresión de código no permitido por omisión del desarrollador.Ahora si queremos imprimir un texto sin escapar debemos utilizar triples llaves, esto le indica a Handlebars que no debe escapar nada, veamos el ejemplo:
{{{nombres}}}Esto si nos permite imprimir código HTML, caracteres especiales e incluso JavaScript sin intervención de nuestro motor.Comentarios
Los comentarios en la plantilla son vitales, ya que nos permiten identificar las secciones, añadir información importante, y documentar nuestra aplicación. Si colocamos un comentario directamente en HTML de la forma: <!-- Aquí nuestro comentario --> este termina siendo visible para quien inspeccione el código de nuestra página, por lo que nos limita en lo que podemos dejar documentado.
Pero si utilizamos comentarios en Handlebars, siempre los podremos ver en el código fuente, pero el motor al generar lo que ve el usuario lo omite, y entonces al inspeccionar el código de la web o la aplicación no veremos nada. Para escribir un comentario en Handlebars debemos hacer lo siguiente:
{{! nuestro comentario }}Esto hace que el contenido del comentario nunca se genere en el resultado que va a la vista de nuestros usuarios, haciendo lo que escribamos sea un secreto para quienes son ajenos a nuestro equipo de desarrollo.Algo que no debemos olvidar es que no tenemos que limitarnos a lo que está en el mainstream, hay muchas opciones que tal vez resulten mejores para el estilo de desarrollo de cada quien, es por ello que resulta vital investigar y no tener temor de probar cosas nuevas.
Con esto hemos finalizado este tutorial, hemos tenido una pequeña introducción pero bastante enriquecedora a lo que significa el uso de plantillas, y de cómo incorporar un nuevo motor a Express.
Si bien Handlebars es mucho más extenso, pero con estos conceptos claves y nuestra aplicación Express podremos lograr cosas muy interesantes en poco tiempo.
