What is Handlebar.js? (hand-dull-barz)

Handlebar.js is an extension of the popular JavaScript library called Mustache.js, coming into the foray around 2009 it was heavily inspired by ctemplate and et.

Think of this as just a language within a language

Coming from learning React, and some Ruby on Rails it’s very similar to the MVC model expressed in a rails app — except that this is all the VIEW of the MVC pattern!

Web Template (system)?

To give more context let’s explain what a Web Template is, and what a Web Template System is.

Web Template is akin to its real life counterpart, except it’s a digital version. It allows a business, company to quickly implement websites. Personally I like to think of sites like Wordpress, and Squarespace. Since they do use a form of web templateing.

Web Template System is the overarching process which encompasses the use of templates, we can quickly re-use, reshape websites! It’s kind of like a plug-n-play system, or even better its like clicking together some legos.

Again using my experience from knowing React, it’s a similar concept minus the Virtual DOM component, and state.

https://www.youtube.com/watch?v=3HMtarQAt3A&t=1119s Great video refresher for understanding what React is with a few examples of how it works!

Handlebars.js

So what exactly is Handlebar.js? Well as defined earlier it’s just an extension of Mustache.js that adds some more functionality and features.

“Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.

Handlebars is largely compatible with Mustache templates. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates. Complete details can be found here.” — Handlebars.js

It’s called Mustache.js & Handlebars.js to the similiarity of the {{ brace and a real life mustache!

{ === “mustache”

In order to really wrap my head around how Mustache.js works, I created a super simple webpage, which just loads static data that I created.

First things first, we have get Handlebars.js onto our machine, visit the Handlebars.js website and click the INSTALLATION button.

I use NPM to manage downloading libraries, so I just ran npm install handlebars

Once that process finishes, make sure to link the Handlebars, in this example I linked via a hosted CDN

Index.html file, you can see the script tags I have defined!

I used JQuery in this example, since it’s something I want to get better at, but vanilla JS would suffice — but we can now go ahead and build out our template! In our Index.html file we have to define a script to which we will call a function upon, and also a div or container that acts as the filling for our template.

An example of that script, we give it an id to reference later, make sure you give it this type otherwise it will not function correctly!

As you can see with the above screenshot, we define our script which we then further define what is going to show, I already know the keys I am accessing; name, occupation & location however in order to reference them in Handlebars.js we wrap them in {{ }} braces, and use the key to reference the value. Lastly we have a container setup with a class to reference later!

You can see here that we use JQuery to find out script, we then compile that to send back to the container we setup prior

Running through the above code, when our DOM is ready, we initiate a function that:

  1. Locates the about section script in which we define what our HTML will look like for our template
  2. Compile that script using the Handlebars.compile method
  3. We’re defining an object with keys that we reference in our HTML script tag from the Index.html page
  4. Compile that script, passing in our object
  5. Find our container with a class of about-template and add the compiled Handlebars.js as the HTML of that class

Before

After

Now we can see how we’ve linked the two, and can kind of see the power of such a system! Be on the lookout for a new blog in which I turn the dials up on complexity and really make something cool!

Sources

  1. https://www.youtube.com/watch?v=uFytR93-PDc
  2. https://handlebarsjs.com/
  3. https://en.wikipedia.org/wiki/Mustache_(template_system)
  4. https://en.wikipedia.org/wiki/Web_template_system

eater of oxygen