Menu

Handlebars.js ties Ghost, Ember and Assemble together

I code almost exclusively in Javascript and watch closely the development within the Javascript open-source eco-system. It seems like around 5 million technologies exist and multiplying every day and in particular there are over 30 templating engines. It’s important to not waste your time with the bad ones and have to relearn more when moving from project to project. I wondered for a bit what is best, by now it seems Handlebars is the clear winner. Here is why:

Handlebars defines itself like logic-less template on steroids. As such it extends the popular and quite clean Mustache and gives a lot more power when creating UI. Because of that it is more complicated and that may deter some from learning it in depth, but it’s worth it. It is important to understand that Handlebars helpers can be created, shared and reused by anyone and the more of them there are, the more powerful the templating engine is for you to use. This is why it’s very important that the following key technologies have chosen exactly Handlebars.

Ghost
Earlier this year Ghost was announced to much excitement – it looks as the best contender for a modern blogging platform to succeed the aging WordPress. I immediately jumped into learning Ghost and the first thing that stands out is that it uses the Handlebars templates. This means that as numerous templates like in WordPress are created for Ghost, they will all be made with Handlebars. There are so many reasons I love this, but primarily instead of WordPress’ old spaghetti style we can now make blog themes using more of an MVC approach with Handlebars. This virtually guarantees that Ghost themes will be superior to WordPress ones and that Handlebars will be very widely used.

Assemble
Built on top of Grunt, Assemble is a tool to automate mass production of static sites from a common template while allowing some limited level of dynamic data and customization. To give you an example, I’m currently involved in a project to rein in a runaway mass of over 100 static sites a company owns that have become impossible to maintain. We have consolidated them down to 1 project, 2 Grunt tasks, 2 templates and different folders with content in json format, images and css. When we make a change to a template and run a Grunt command, all 100+ sites get rebuilt and optimized for deployment automatically. All this gets rendered through handlebars templates and you are able to use any Handlebars helper. In fact the Assemble team maintains this repo of 100 Handlebars helpers, which is an open source gold mine.

EmberEmber is one of the most robust client-side MVC frameworks which aims to make Web apps be alike native apps in architecture and performance and is very closely tied to Handlebars. Similarly to Angular’s directives, Ember allows the creation of reusable components which are dynamically rendered. They are completely standalone from the rest of the app and can therefore be shared between apps and stored in public repositories for everyone to use. They are made using Handlebars and some additional Javascript.

Mustache and Hogan and Angular
Handlebars extends Mustache and therefore if you know Handlebars you can always work on Mustache templates and projects comfortably . Hogan is Mustache for Node.js server-sides. Angular is currently very popular and its templating is also based on the Mustache syntax and logic. This means that by learning Handlebars you have all the existing Handlebars and Mustache and Hogan server-sides and even Angular’s templates somewhat (without the directives) covered.

In conclusion, learning Handlebars gives you the most out of any templating engine and is only yet to become much more broadly spread with the advent of Ghost, Ember and Assemble. Within the Javascript and broader web technology jungle, it is much more practical and realistic to use Handlebars across your whole integrated software solution than anything else.