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.