Qué son los motores de plantillas y cómo nos pueden facilitar la vida a los programadores en Javascript. Ejemplos de librerías que implementan las plantillas.
Si pensabas que las plantillas eran algo ligado al back-end es que todavía tienes bastante que explorar en cuanto a desarrollo del lado del cliente. En este artículo pretendemos explicar qué son las plantillas Javascript, de modo que podamos entender su utilidad y cómo pueden llegar a ser esenciales para una programación front-end sencilla y mantenible.
Creo que lo mejor para entender la necesidad de usar plantillas en Javascript es haberse visto en el quebradero de cabeza en que nos encontramos cuando queremos generar dinámicamente elementos en el DOM de la página web. Así que comenzaremos explicando sus ventajas con un ejemplo en el que podemos habernos encontrado.
Por qué plantillas en Javascript
Si usas jQuery, sabrás que puedes insertar código HTML en la página con los métodos append(), appendTo(), prepend(), etc. Insertar algo sencillo como un enlace o una imagen no te dará mucho trabajo, pero si se trata de estructuras complejas de código HTML, habrás encontrado que no es tan práctico. Si has pasado por ahí, habrás padecido un mogollón de llamadas a esos métodos, invocadas en cadena, que resultan difíciles de programar y todavía más complejas de entender a simple vista y de mantener con el tiempo.
¿No sería mejor mantener esas estructuras en HTML plano y simplemente llamar a una función que nos cargue los datos enviados dentro del código HTML? Pues eso es básicamente lo que conseguimos con las plantillas.
No hay mucho secreto. Nuestra plantilla tendría un aspecto como este código HTML:
<div class="estructura">
<h1>{{titulo}}</h1>
<div class="cuerpo">
{{cuerpo}}
</div>
</div>Como ves, hay bloques de contenido que se pueden rellenar con datos variables, son los {{titulo}} y {{body}}. Pues nada más tendríamos que invocar a esa plantilla enviando los datos que queremos cargar en el HTML y nos devolverá el código HTML resultante, ya con los datos dentro de las etiquetas, en una cadena que podríamos insertar en el DOM de una manera sencillísima con nuestra librería Javascript preferida, ya sea jQuery o con cualquier otra.
Por supuesto, si mañana queremos modificar la plantilla, agregando etiquetas, cambiando la estructura o jerarquía, simplemente tendríamos que modificar la plantilla, tal como si fuera un HTML normal y el Javascript permanecería intacto. Vamos, ¡una maravilla!
Nos queda en el aire ver cómo sería el sistema para ejecutar la plantilla, pero realmente esa implementación depende del sistema de plantillas que estés utilizando, aunque generalmente será algo tan sencillo como ejecutar un método o una función.
$("<div></div>")
.addClass("estructura")
.append("<h1>" + titulo + "</h1>")
.append($("<div></div>")
.html(cuerpo)
.addClass("cuerpo"))
.appendTo("body");Como se puede ver, construir estructuras DOM desde jQuery no es muy práctico, y aunque se pueda hacer perfectamente, no resulta cómodo.
Cómo funcionan los motores de plantillas
El paradigma de desarrollo del lado del cliente está cambiando y estas librerías son una muestra de ello. Cada vez más en el front-end consumimos más lo que se llaman "rest-api", que te ofrecen datos que vienen del back-end en formato de texto, generalmente en notación JSON. Pues estas librerías de plantillas lo que te ofrecen es pasar rápidamente de esos JSON a pedazos de código HTML que puedes insertar cómodamente en el DOM de la página.
En general, todos los sistemas funcionan de la misma manera. En tu aplicación tendrás un HTML pequeño y por medio de llamadas a AJAX invocas al back-end, te traes un objeto en JSON, lo "des-serializas" y lo transformas en un objeto Javascript, lo manipulas en el cliente y por último lo conviertes en HTML por medio de una plantilla.
Los sistemas de plantillas son además compañeros inseparables de algunas librerías avanzadas Javascript que nos traen paradigmas de desarrollo diferentes, como los MVVM, que sería algo parecido al MVC pero para desarrollo en el cliente. En los últimos meses se ha hablado mucho de AngularJS, que ya viene con su propio sistema de plantillas. Pero otras, como por ejemplo Backbone no implementan su propio sistema de templating, de modo que cualquiera de las siguientes librerías Javascript te vendrá ideal.
Relación de los principales sistemas de plantillas en Javascript
Existen diversos sistemas de plantillas en Javascript que puedes usar a tu voluntad. A continuación tenemos una lista de las principales librerías Javascript que tendremos a nuestra disposición si queremos implementar la herramienta de plantillas y comenzar a disfrutar de las utilidades que nos facilitan.
Handlebars:
Un motor de plantillas para Javascript que implementa la sintaxis Mustache Templates y que provee de funcionalidades adicionales para su compilación y procesamiento.
Underscore.js:
Una librería Javascript que provee un gran abanico de funcionalidades diversas y útiles para cualquier proyecto. Entre otras cosas podrás generar y usar plantillas Javascript.
Pure:
Sistema de plantillas ultra-rápida para generar HTML a partir de objetos JSON.
jsrender:
La siguiente generación de plantillas jQuery, optimizadas para un alto rendimiento.
github.com/BorisMoore/jsrender
En general, podríamos nombrar algunas otras librerías, pero estas son las que actualmente mejor pinta tienen. En la actualidad todo depende de tus preferencias, ya que en Javascript existen decenas de librerías para resolver las mismas cosas. Todo será ver la que al final acaba teniendo mayor penetración.
En el próximo artículo explicaremos uno de estos motores de plantillas Javascript, Handlebars, ofreciendo ejemplos sobre sus capacidades y la manera de implementarlas.
Eduard Tomàs
Apasionado de la informática, los videojuegos, rol y... la cerveza. Key Consulta...