Tómese 10 minutos para comenzar con los manillares

Hoy en día, el desarrollo de front-end ya no se trata de crear marcado HTML estático y compilar archivos SASS. El auge de las aplicaciones de página única (SPA) significa que podemos hacer gran parte de la lógica de representación en el lado del cliente. El desarrollo web moderno a menudo requiere una entrada de datos dinámica.

Si bien React.js es excelente, a menudo requiere una curva de aprendizaje para los desarrolladores antes de que puedan integrarlo en el equipo. Recientemente, tuve la tarea de crear el front-end de un sitio web de curso. Eso marcó el comienzo de mi exploración en Handlebars.js.

Handlebars es un motor de plantillas simple y popular que es fácil de usar. Se parece mucho al HTML normal, con expresiones de manillar incrustadas en las llaves {{}}.

{{name}}

{{quote}}

Antes de pasar a los detalles de Handlebars, veamos cómo se insertarán los datos en la página a través de Vanilla Javascript. Tomaremos el ejemplo de la creación de una página web que enumera algunas citas. Porque, oye, todo el mundo necesita algo de inspiración.

JavaScript vainilla

Recuperación de datos

La mayoría de las veces, es posible que esté recuperando datos a través de ajax, pero para simplificar, crearemos nuestro propio objeto de datos.

// quotes.js var quotes = [ {name: "Frank Lloyd Wright", quote: "You can use an eraser on the drafting table or a sledge hammer on the construction site."}, {name: "Douglas Adams", quote: "The major difference between a thing that might go wrong and a thing that cannot possibly go wrong is that when a thing that cannot possibly go wrong goes wrong it usually turns out to be impossible to get at or repair."}, {name: "Ettore Sottsass", quote: "I try and be as stupid as possible regarding my profession, which means I try to look at as few design magazines as possible."}, {name: "Shaun White", quote: "I’m a big fan of doing what you are really bad at. A lot."} ]

Crear marcado HTML

// index.html 

Agregar los datos con Javascript

Usaremos un bucle for para recorrer el contenido anterior.

//quotes.jslet quoteMarkup = '';
for (var i = 0; i < quotes.length; i++) { let name = quotes[i].name, quote = quotes[i].quote;
quoteMarkup += ' ' + '
' + name + '
' + '

' + quote + '

' ' '}
document.getElementById('quotes').innerHTML = quoteMarkup;

Con un código como este, es difícil de leer y tedioso de escribir. Y el marcado HTML de esta página ahora reside en index.html y quotes.js.

Entrar en manillares

Empezando

Para empezar, necesitamos incluir el archivo de código fuente de Handlebar. Puede agregar el enlace dentro de la etiqueta principal o antes del final de.

Alternativamente, también puede vincular a Handlebars desde un CDN.

Crea la plantilla

Seguiremos utilizando el objeto de datos de las citas del archivo anterior. Rociaremos un poco de magia de Handlebars en el archivo index.html.

//index.html 
 {{#each this}} 

{{name}}

{{quote}} {{/each}}
  • cada uno : itera a través de los datos
  • este : R eferenciasal contexto actual.
  • text / x-handlebars-template : Para decirle al navegador que no ejecute el script como Javascript normal.

Compilar la plantilla con manillares

Solo se necesitan unas pocas líneas para compilar los datos con Handlebars. Eso es lo que me encanta de él. Incluso si alguien del equipo no ha usado Handlebars antes, el guión y el marcado son muy simples de entender y aprender.

let content = document.getElementById('quotes'), src = document.getElementById('quotes-template').innerHTML, template = Handlebars.compile(src), html = template(quotes);
content.innerHTML = html;
  • contenido : Devuelve el elemento en el que desea insertar la información compilada.
  • src: Retrieves the markup of the template.
  • Handlebars.compile(src): Compiles the template in use. It will return a function that the data can be passed to so it can be be rendered.
  • template(quotes): Compiles the data into the template.
  • content.innerHTML: Renders the above to the DOM

You can view the project here.

Bonus

I used Handlebars for a multiple-templates website. I found myself writing the same ajax and Handlebars code multiple times. So, here are the two functions that I created to make my life easier.

Getting data from ajax with Javascript

function ajaxGet(url, callback) { let xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // console.log(xmlhttp.responseText); try { var data = JSON.parse(xmlhttp.responseText); } catch(err) { console.log(err.message +' Getting: ' + url); return; } callback(data); } };
xmlhttp.open("GET", url, true); xmlhttp.send();}

Function to run Handlebars

function runHandlebars(id, dataSrc, src) { if(document.getElementById(id) != null) { let content = document.getElementById(id); ajaxGet(dataSrc, function(data){ let source = document.getElementById(src).innerHTML, template = Handlebars.compile(source);
content.innerHTML = template(data); }); }}

With these two functions, I could run all my Handlebars code on a single Javascript file. It will look something like this.

runHandlebars('nav-sub-1', '/data/courses.json', 'nav-submenu-template');
runHandlebars('contributors', '/data/contributors.json', 'contributors-template');

Conclusion

My experience with Handlebars has been a positive one. In my project, I use it with gulp and metalsmith. Will I use it for other projects? My take is I prefer something like React or a full fledged static site generator like Jekyll. But in this case, when the team is more comfortable with HTML markup and it is a relatively simple website, Handlebars is a good choice.