Category Archives: Backbone


I love Backbone.js. But it’s not perfect. One of my main problems with it is inline templates. Inline templates are templates that are contained within script tags within an HTML document. Almost every Backbone.js tutorial I’ve seen uses inline templates. But in the real world, this is a horrible way to build your web app.

Yet, it seems no one ever talks about this important piece of building real world web apps. There are some notable exceptions however. Angular.js lets you use external templates. Require.js has a plugin which lets you load templates as external dependencies, and many Backbone.js developers use and recommend this method. But, my opinion is that you shouldn’t be forced to use the entire Require.js library just for one feature.

That’s why I created a small script called TemplateManager. TemplateManager uses jQuery to asynchronously fetch and cache external template files. It also uses Underscore.js to pass the rendered template to a callback. And it uses Promises, actually jQuery’s Deferreds, to handle callbacks.

I like it because you can preload all your templates on initialization and because they are cached you can use them on demand later when you render your views. By preloading them, the requests happen in the background asynchronously so nothing is potentially blocked except whatever is rendered initially. You can also lazy load them and only fetch them when the view is created and rendered.

jQuery and Underscore are required for this, but Backbone is not. This allows you to use it with any application, although it works really well with Backbone since jQuery and Underscore are dependencies. I could have made it a Backbone plugin, but since it’s not a dependency, it can be used anywhere so I didn’t want to force that. I think in the future it would be useful to add support for other templating libraries so Underscore wouldn’t be a dependency in that case.

Check it out in the wizard-mvc project or on GitHub.


I also created a version of this for Marionette.js called Marionette.TemplateManager which is a Marionette plugin. I’ve been trying out Marionette recently, and I thought it would be nice to utilize this here too. One thing about Marionette is that it already has a TemplateCache object that caches inline templates internally. Marionette.TemplateManager takes advantage of this by using the TemplateCache instead of its own internal cache. It doesn’t return the compiled template with the promise however since Marionette also handles that internally. With Marionette, you can also change the default templating library so you don’t have to use Underscore templates.

Check it out in the wizard-mvc project or on GitHub.

Underscore 1.5 Released

Underscore 1.5 was just released two days ago. The last significant update prior to that was 1.4.4 released on January 30th, 2013. The biggest feature was the unzip method which has now been pulled out of Underscore in the 1.5.1 release today. Underscore is a utility-belt library for JavaScript and also a dependency of Backbone.js.

It seems humorous to pull the biggest feature in a 1.x release 2 days after releasing it. Perhaps creator Jeremy Ashkenas thought so, calling the commit, “remove silly duplicate unzip function. Favor in the docs.” You can read the discussion and the reason for this change here on GitHub.

Now that the unzip method has been pulled there aren’t many significant changes which makes the 1.x release number seem kind of silly. Maybe the source map, plus the number of changes warrant it. Anyway, here’s the changelog which you can also see in the docs.

  • Added a new unzip function, as the inverse of
  • The throttle function now takes an options argument, allowing you to disable execution of the throttled function on either the leading or trailing edge.
  • A source map is now supplied for easier debugging of the minified production build of Underscore.
  • The defaults function now only overrides undefined values, not null ones.
  • Removed the ability to call _.bindAll with no method name arguments. It’s pretty much always wiser to white-list the names of the methods you’d like to bind.
  • Removed the ability to call _.after with an invocation count of zero. The minimum number of calls is (naturally) now 1.

Setting up a Backbone.js Webapp with Yeoman, Grunt and Bower – Part 2

This is part 2 on how to set up a Backbone.js webapp with Yeoman, Grunt and Bower. You can find part 1 here. In part 2, I will discuss using generators to set up your Backbone app.

As I mentioned in part 1, there are 2 officially maintained generators for Backbone, Backbone.js generator and Backbone Boilerplate generator. I will quickly walk through what you get when using either one.

To use Backbone.js generator, first you install the package via npm. Then, create a new directory for your app and run the yo command while in the new directory.

npm install -g generator-backbone
yo backbone

This generator uses Bower to install its components including jquery, backbone, modernizr and underscore. Bootstrap for Sass can also be installed when prompted. It also updates your bower.json file for you. The other thing it does is add some boilerplate code to main.js, which is very minimal. It’s very similar to doing it the way that I did in part 1, except it saves you the steps of downloading backbone and underscore, updating bower.json and adding them to your index.html file.

The second example, Backbone Boilerplate generator, goes further than the previous one, using Backbone Boilerplate and require.js for the boilerplate code. To use this, first you install the package via npm. Then, create a new directory for your app and run the yo command while in the new directory.

npm install -g generator-bbb
yo bbb

This installs backbone, jquery and lodash (an underscore alternative) for you, among others, but does not use Bower to manage components. It also installs a lot of boilerplate code which is found in app.js, main.js and router.js. If you like require.js and plan on using it, then great. If not, then you would have to delete those files as well as the boilerplate code which uses it.

Personally, I prefer Backbone.js generator due to the fact that it uses Bower to install components, is much less opinionated on how you set up the app and doesn’t care if you use require.js or not. If you already plan on using Backbone Boilerplate and require.js, then you will probably prefer the Backbone Boilerplate generator.

Setting up a Backbone.js Webapp with Yeoman, Grunt and Bower

A lot of things have changed in the JavaScript developer’s workflow over the past year. There are some new tools out there that make things a lot easier, so I thought I would dust off the old blog and do a write up on one of these tools called Yeoman.

Yeoman is “a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications”. I find that not only is Yeoman awesome for helping you build webapps, it is a great way to build mock applications as well.

Yeoman requires node.js and can be installed via npm. You can find the installation details in the documentation, not to mention the homepage, so I won’t go into that here. Installing Yeoman gives you a set of tools which will give you the ability to scaffold out a new web application, build, preview and test your project, and easily manage dependencies.

To set up a new webapp with Yeoman, I make sure I have the latest version of node.js by going to the homepage and getting the most recent install package. I then make sure all the npm packages I have installed are up to date by running the update command: npm update -g. The -g tells npm to update all the globally installed packages. This is a good time to mention all the tools mentioned in this article are command line. If you are a developer or an aspiring one, I suggest getting as familiar with command line as much as possible, if you aren’t already.

I create a new directory for the app called webapp and cd into the new directory. To scaffold out a new webapp with Yeoman, run the command yo webapp. This actually uses a Yeoman generator called generator-webapp to install the webapp scaffolding in addition to Bower dependencies, npm dependencies and Grunt tasks. If you don’t have the webapp generator installed, you can install it by running npm install -g generator-webapp. Once you answer a few set up questions you are ready to go. Bootstrap from Twitter is a good way to easily scaffold webapps, so I always let Yeoman install that as well.

If I look in the bower_components folder of my new app, I can see that Yeoman installed jQuery, Modernizr and Bootstrap already. I want to use Backbone.js in my new webapp as well. Yeoman makes it easy to manage these dependencies and install new ones via Bower. To install Backbone.js with Bower, simply run the command bower install backbone --save. The --save on the end automatically updates the bower.json file. This file shows you what dependencies have been installed in your app via Bower. You should be aware that Underscore.js is a dependency of Backbone, so we can install that via Bower as well by running bower install underscore --save.

That’s it! Once you have everything in place, you can test your new app with Grunt by running grunt server. Just make sure that you include your new dependencies in your app so that they are available. If you want them to be minified via the build tasks available with Grunt, you need to include them inside the special build comments.

If you want to go further with Backbone.js in Yeoman, there are 2 officially maintained generators for Backbone. One is generator-backbone and the other one is called generator-bbb and uses Backbone Boilerplate.

Here is a recap of all the commands I used above to set up my new webapp.

npm update -g
cd webapp
npm install -g generator-webapp
yo webapp
grunt server
bower install backbone --save
bower install underscore --save