I have to fully credit Tal Bereznitskey for his awesome blog post on precompiling Handlebars templates. With a few minor tweaks, it saved me a great deal of time trying to figure out how to precompile a dozen or so templates in a Backbone application I’ve been working on.

If you’re new to Handlebars, you may want to start with this Handlebars tutorial I wrote.

Why Precompile?

If you think of an individual tweet as a Handlebars template, you can understand why it would be expensive to compile a template each time a tweet is rendered. Precompiling templates saves time on the client side by reducing your application’s runtime.

If you’ve looked into precompiling Handlebars templates, you’ve undoubtedly come across the Handlebars precompiler. You don’t actually need to use the precompiler to precompile your templates, so don’t feel confused if you don’t fully understand the documentation and don’t see it referenced here.

Move Templates to a Templates Folder

In a typical Handlebars application, you may include your templates in <script> tags in your HTML files. If you want to precompile your templates, create a templates directory in your application wherever you would normally house your JavaScript files. Inside, create a single file for each template with a .handlebars extension.

So, if you previously included the following in your HTML file:

<script id="image-template" type="text/x-handlebars-template">
  <div class="input-container csv">
    <p>Image</p>
      <input class="content csv-image imgUrl" placeholder="Image URL"/></br>
      <input class="content csv-target csvTargetUrl" placeholder="TargetURL"/></br>
      <input class="content csv-link csvLinkName" placeholder="Clickthrough Link Name"/>
      <button class="remove-image button"><span>X</span></button>
  </div>
</script>

You would now create a file called image-template.handlebars inside your templates  directory. The code would include the template only, without the need for the <script> tags:

<div class="input-container csv">
    <p>Image</p>
    <input class="content csv-image imgUrl" placeholder="Image URL"/></br>
    <input class="content csv-target csvTargetUrl" placeholder="TargetURL"/></br>
    <input class="content csv-link csvLinkName" placeholder="Clickthrough Link Name"/>
    <button class="remove-image button"><span>X</span></button>
</div>

Do this for each of your templates.

Create a getTemplate Function

Create a separate templates.js file inside your JavaScript directory.

// precompiles handlebars templates
Handlebars.getTemplate = function(name) {
	console.log("templates function working");
	if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
		console.log("template undefined");
		$.ajax({
			url : 'js/templates/' + name + '.handlebars',
			success : function(data) {
				console.log("success compiling template");
				if (Handlebars.templates === undefined) {
					Handlebars.templates = {};
				}
			Handlebars.templates[name] = Handlebars.compile(data);
			},
		async : false
		});
	}
	return Handlebars.templates[name];
};

I’ve added a few console.log statements which will demonstrate whether this function is working properly.

Make sure to include templates.js in your HTML file after Handlebars:

<script src="js/templates.js"></script>

Swap Handlebars.compile for Handlebars.getTemplate

In your application, where you would normally compile the Handlebars template:

var template = Handlebars.compile($("#image-template").html());

You would now call the getTemplate function and pass in the template you’d like to access:

var template = Handlebars.getTemplate("image-template");

Watch Your Console

If you watch your console as you test your application, you’ll see that the first time you call the getTemplate function, your getTemplate function runs, determines that the template is undefined, and compiles the template. On subsequent calls passing in the same template, the function determines that the template is already compiled and does not compile again:

• Author
• Recent Posts

Connect

Koren Leslie Cohen

Product manager at Facebook. Former senior product manager at Dollar Shave Club in Los Angeles and software engineer at J.Crew / Madewell in New York City. Recovering trial lawyer.

Connect

Latest posts by Koren Leslie Cohen (see all)

• How to Transition into Product Management - December 26, 2017
• What I’ve Learned in My First Few Months as a Product Manager - October 14, 2015
• Front End Engineer Interview Questions - July 20, 2015

Related Posts

JavaScript Variables: Declaration, Initialization, Hoisting & Closures

Front End Engineer Interview Questions