—O desarrolloweb.com Manual de Handlebars Manual de Handlebars Miguel Angel Alvarez, Edvard Tomas QOD ecesarrotiowes ielan} desarrolloweb.com/manuales/manual-handlebars.html hnup://desarrolioweb.com/manuales/manual-handlebars.html Pagina 1 de 25—O desarrolloweb.com Manual de Handlebars Manual de Handlebars, un sencillo sistema de plantillas Javascript basado en Mustache Templates. Handlebars sirve para generar HTML a partir de objetos con datos en formato JSON. Handlebars es un popular sistema de plantillas en Javascript que te permite crear y formatear cédigo HTML de una manera muy sencilla. En lugar de hacer operaciones tediosas en librerias como jQuery para tocar el DOM insertando elementos de manera independiente con append o prepend, te permite crear bloques de codigo HTML, escritos directamente con HTML que poblaras con datos que te vengan de un JSON. Es tan sencillo como escribir HTML y tan potente que te permite realizar operaciones de recorrido de estructuras que encontramos en otros sistemas de plantillas que puedas haber usado. Los sistemas de plantillas son muy importantes, porque nos permiten separar el codigo por responsabilidades y crear la salida de las aplicaciones de una manera sencilla, manteniendo el codigo HTML separado del cédigo Javascript. En este manual aprenderds a usar el sistema de plantillas Javascript tanto en el lado del cliente como en el lado del servidor con NodeJS. Se trata de un complemento esencial para el desarrollo frontend y para la separacion del frontend/backend, de modo que podamos hacer nuestros desarrollos dinamicos con uso intensivo de Javascript, generando el HTML en el lado del cliente, con contenido que nos llegara mediante JSON, probablemente de solicitudes Ajax. Puedes usar Handlebars junto con cualquier libreria de manipulacién del DOM como jQuery, o simplemente con Javascript plano. También puedes usarla en el lado del servidor, con NodeJS en el caso que tengas que generar salida formateada desde ese lenguaje. Encuentras este manual online en: hnup://desarrolioweb.com/manuales/manual-handlebars.html Pagina 2 de 25—O desarrolloweb.com Manual de Handlebars Las siguientes personas han participado como autores escribiendo articulos de este manual. Eduard Tomas Apasionado de la informatica, los videojuegos, rol y... la cerveza. Key Consultant en Pasiona y MVP en #aspnet Miguel Angel Alvarez Miguel es fundador de DesarrolloWeb.com y la plataforma de formacién online EscuelalT. Comenz6 en el mundo del desarrollo web en el allo 1997, transformando su hobby en su trabajo. hnup://desarrolioweb.com/manuales/manual-handlebars.html Pagina 3 de 25—O desarrolloweb.com Manual de Handlebars Qué son los motores de plantillas y como nos pueden facilitar la vida a los programadores en Javascript. Ejemplos de librerias que implementan las plantillas. Si pensabas que las plantillas eran algo ligado al back-end es que todavia tienes bastante que explorar en cuanto a desarrollo del lado del cliente. En este articulo pretendemos explicar qué son las plantillas Javascript, de modo que podamos entender su utilidad y como pueden llegar aser 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 dindmicamente elementos en el DOM de la pagina web. Asi que comenzaremos explicando sus ventajas con un ejemplo en el que podemos habernos encontrado. Por qué plantillas en Javascript Si usas jQuery, sabras que puedes insertar cédigo HTML en la pagina con los métodos append(), appendTo(), prepend0, etc. Insertar algo sencillo como un enlace o una imagen no te dara mucho trabajo, pero si se trata de estructuras complejas de codigo HTML, habras encontrado que no es tan préctico. Si has pasado por ahi, habras padecido un mogollén de lamadas a esos métodos, invocadas en cadena, que resultan dificiles de programar y todavia més complejas de entender a simple vista y de mantener con el tiempo. ENo seria mejor mantener esas estructuras en HTML plano y simplemente llamar a una fncién que nos cargue los datos enviados dentro del cédigo HTML? Pues eso es bisicamente Jo que conseguimos con las plantillas. No hay mucho secreto. Nuestra plantilla tendria un aspecto como este cédigo HTML: iy class"estrvctura’> hnup://desarrolioweb.com/manuales/manual-handlebars.html Pagina 4 de 25QO veererrottowes.com Manual de Handlebars sb tgtituleny rm eveepoh) Nota: Esa plantilla est basada en la sintaxis Mustache Templates, que utiliza la libreria Handlebars JS. Como ves, hay bloques de contenido que se pueden rellenar con datos variables, son los {{titulo}} y {{body}}. Pues nada ms tendriamos que invocar a esa plantilla enviando los datos que queremos cargar en ¢] HTML y nos devolverd el c6digo HTML resultante, ya con los datos dentro de las etiquetas, en una cadena que podriamos insertar en el DOM de una manera sencillisima con nuestra libreria Javascript preferida, ya sea jQuery o con cualquier otra. Por supuesto, si maiiana queremos modificar la plantilla, agregando etiquetas, cambiando la estructura o jerarquia, simplemente tendriamos que modificar la plantilla, tal como si fuera un HTML normal y el Javascript permaneceria intacto. Vamos, iuna maravilla! Nos queda en el aire ver cémo serfa el sistema para ejecutar la plantilla, pero realmente esa implementacién depende del sistema de plantillas que estés utilizando, aunque generalmente serd algo tan sencillo como ejecutar un método o una funcién. Nota: Qué tal, ése entiende bien Ja estructura del HTML de la plantilla a simple vista? Si todavia no te resulta obyio lo til de mantener las plantillas en HTML, echa un vistazo al cédigo Javaseript siguiente. Algo como esto seria lo que tendriamos que eseribir usando ‘jQuery para erear esa estructura HTML como la de la plantilla anterior: K-avnatio') sae 'stctre oper Como se puede ver, construir estructuras DOM desde jQuery no es muy prictico, y aunque se pueda hacer perfectamente, no resulta cémodo, Como funcionan los motores de plantillas El paradigma de desarrollo del lado del cliente esta cambiando y estas librerfas son una muestra de ello. Cada vez més en el front-end consumimos mis 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 librerfas de plantillas lo que te ofrecen es pasar rapidamente de esos JSON a http: //desarrolloweb.com/manuales/manual-handlebars.html Pagina 5 de 25QO veererrottowes.com Manual de Handlebars pedazos de cédigo HTML que puedes insertar comodamente en el DOM de la pagina. En general, todos los sistemas funcionan de la misma manera. En tu aplicacién tendrés un HTML pequeio 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 tiltimo lo conviertes en HTML por medio de una plantilla. Los sistemas de plantillas son ademas compaieros inseparables de algunas librerfas avanzadas Javascript que nos traen paradigmas de desarrollo diferentes, como los MVVM, que seria algo parecido al MVC pero para desarrollo en el cliente. En los tiltimos 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 librerias Javascript te vendrd ideal. ‘Nota: la diferencia de un sistema de plantillas como los que mencionaremos a continuacién y los comentados MVVM, es que las plantillas estas son unidireccionales. A partir de un JSON creas un HTML que puedes insertar en el DOM y ya esta. Sin embargo, Jos MVVM como BackboneJS o knockout JS son bidireccionales y establecen enlaces "vivos’, de modo que cuando modificas unas cosas automaticamente, se modifican otras. Relacion de los principales sistemas de plantillas en Javascript Existen diversos sistemas de plantillas en Javascript que puedes usar a tu voluntad. A continuaci6n tenemos una lista de las principales librerias Javascript que tendremos a nuestra disposicion 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. handlebarsjs.com Underscore. Una librerfa Javascript que prove un gran abanico de funcionalidades diversas y titiles para cualquier proyecto. Entre otras cosas podras generar y usar plantillas Javascript. underscorejs.org Pure: Sistema de plantillas ultra-répida para generar HTML a partir de objetos JSON. beebole.com/pure http: //desarrolloweb.com/manuales/manual-handlebars.html Pagina 6 de 25QO veererrottowes.com Manual de Handlebars jsrender: La siguiente generacién de plantillas jQuery, optimizadas para un alto rendimiento. ithul :om/BorisMoore/jsrender En general, podriamos nombrar algunas otras librerias, pero estas son las que actualmente mejor pinta tienen. En la actualidad todo depende de tus preferencias, ya que en Javascript existen decenas de librerfas para resolver las mismas cosas. Todo sera ver la que al final acaba teniendo mayor penetraci6n. En el proximo articulo explicaremos uno de estos motores de plantillas Javascript, Handlebars, ofreciendo ejemplos sobre sus capacidades y la manera de implementarlas. Este artfeulo es obra de Eduard Tomas Fue publicado por primera vez en 20/05/2013 Disponible online en http: //desarrolloweb com/articulos/sistemas-plantillas- javaseript html http: //desarrolloweb.com/manuales/manual-handlebars.html Pagina 7 de 25QD recrerrottowes com Manual de Handlebars Plantillas Javascript con Handlebars Explicaciones de Handlebars, un sistema de plantillas Javascript que te ahorrara mucho tiempo al generar cédigo HTML a partir de objetos JSON. Eneste articulo te vamos a poner manos a la ob de cédigo Javascript o jQuery, que puede lleg mantenimiento. Si te dedi nosotros leyendo estas lineas. a con HandlebarsJS y ahorrarte muchas lineas r a ser bastante enrevesado y de dificil a la programaci6n front-end, debes invertir una rato con Handleba en la sinta «JS es un sistema de plantillas Javascript y una herramienta esencial. is de "Mustache Templates sta basado alas que han agregado algunas funcionalidades extra. Nota: este articulo esta realizado a raiz del programa #iQuervIO emitido recientemente, en el que Eduard Tomis nos presenté Handlebars y nos mostré varios ejemplos de su uso. No es una transcripcién directa, pero todas las explicaciones estan basadas en las que nos ofrecié Edu. Los ejemplos que vamos a ver son los que el propio ponente nos presenté durante su exposicion. El primer paso para entender qué es Handlebars y por qué nos resultaré de utilidad es entender qué son los sistemas de plantillas de Javascript. Como funciona Handlebars Estas herramientas nos pueden ayudar de manera especial cuando consumimos datos que provienen de algiin sistema en formato JSON. Tdi tendras un HTML de la plantilla, sencillo, simplemente con las etiquetas de la estructura que quieres generar y por medio de Handlebars llamas a la plantilla, envidndole los datos JSON y obtendras directamente el HTML con los datos ya cargados. http://desarrolloweb.com/manvales/manual-handlebars. html Pagina 8 de 25QO veererrottowes.com Manual de Handlebars ‘Ademis, en las plantillas podras tener estructuras sencillas como bloques condicionales, iteradores que recorran colecciones, etc. Veremos que todo ello es sencillo porque Handlebars es una libreria con funciones limitadas, titiles, pero bastante restringidas al propésito tinico de generar HTML a partir de objetos JSON. La operativa normal con Handlebars es la siguiente: Cargar una plantilla, que no es mds que un cédigo HTML mezclado con unos sencillos elementos de control Compilar la plantilla, que nos permite convertirlo en una funcién JS Ejecutar la plantilla para obtener la cadena HTML a partir del JSON Insertar en el DOM el cédigo HTML resultante de ejecutar el template, usando jQuery 0 nuestra libreria preferida Cargar una plantilla en Handlebars: La forma habitual de almacenar un template seré en un bloque de script en el que meteremos un type que no corresponda con ningtin otro conocido. Nos recomiendan usar type="text/X- handlebars-template”, pero en realidad podemos colocar el que queramos. Lo que conseguimos asf es que ese script se incluya en el DOM, pero los navegadores no intentarén parsearlo, ni ejecutarlo ni nada de eso. ‘Nota: Se debe pensar en que, sise intenta ejecutar un template Handlebars con Javaseript se encontrar con un error, ya que el template esta escrito en e6digo HTML. Por ello se coloca un type a la etiqueta Script que el navegador no conozea, de modo que nos aseguremos que no va a intentar ejecutarlo. La otra opcién es usar una llamada a AJAX para traerte los templates, con la tinica limitacin que se debe sincronizar el retorno de la llamada con la compilacién y ejecucién de los templates. En otras palabras, debemos esperar que la llamada a AJAX para traerte el template se ha producido con éxito para poder compilar llas plantillas que vamos a usar en nuestra pagina. Compilar un template: En Handlebars tenemos que hacer un paso previo antes de poder ejecutar un template, que es compilarlo. Es algo muy simple. Llamamos a Handlebars.compile() envidndole como parametro el texto de nuestra plantilla. El resultado de esto es una funcién, que es la que tendremos que invocar para ejecutarla. var tpl = Hon ebors.capile(stewplate); La variable "stemplate" es la cadena con el contenido del template. Finalmente, una vez compilada, en la variable que recibimos como retorno, que hemos llamado tmpl, tendras la funcién de la plantilla. http: //desarrolloweb.com/manuales/manual-handlebars.html Pagina 9 de 25QO veererrottowes.com Manual de Handlebars Ejecutar un template Handlebars: Una vez tenemos la funci6n del template, que es lo que obtenemos como retorno después de su compilacién, podemos invocarla pasando un tinico argumento, que es el objeto JSON que queremos usar para cargar los datos en el template Obtenemos como respuesta de la funcién del template un c6digo HTML listo para ser insertado en el DOM. vor hem = tmelCeb9; Ese HTML es el que podremos usar mas tarde para insertar en la pagina. Nota: Los templates los compilamos una tiniea vez.y los ejeeutamos tantas veces como queramos. El proceso eostoso en tiempo de ejecucién es compilar los templates. Una vez.se hha hecho ejecutar el template para producir el HTML es un proceso répido que podemos, realizar tantas veces como necesitemos sin tener que sufrir por el rendimiento de la aplicacién. Primer ejemplo de uso de Handlebars Podemos ver ahora un primer ejemplo de uso de HandlebarsJS, en el que se crea una plantilla simple, con este aspecto: