A Grab Bag of Backbone Tips

Backbone.js is a great MV* library created by Jeremy Ashkenas. It is small and powerful, yet unopinionated. That means that it will let you walk straight into a pit. It so happens that I'm speaking to you now from the bottom of such a chasm. Do not fall into the same pit. As a guide to your travel, here are a few Backbone tips that might help you avoid a few problems.

Tips for Backbone

The list of tips for using Backbone is assuredly long and storied. Here is but a brief offering.

Make Views Reusable

Pass in the el attribute to your views. Or create the container dynamically (via tagName attribute) and display using $.html() outside the view. Essentially, don't hardcode the el attr in the view.

Ensure DOM Element Exists

In short, pass el references as css selector strings (eg, '.viewLocation') so Backbone will lazy evaluation them. This is especially important in a changing DOM.

Clean Up Your Events

Create a .close() function on Backbone.View.prototype. Implement an onClose() function in each view you create that unbinds events on the view and child models and collections. Derick Bailey addresses zombie events very well.

Inheritance

Create class trees just as you would doing regular OOP. Keep the code DRY. Backbone.*.extend() makes it easy. _.extend() or the like can also be used for extending non-Backbone objects.

Develop Without a Real Backend

Because Backbone models allow specifying their own fetch() location (via url attr), you can specify you own stores, even local .json files as backends. This can speed up development.

Bind in Initialize

Extending page state in single-page apps will allow event binding to stick around longer. Usually, you'll want to bind once per object. Do that in initialize().

Nest Your Views

Backbone.Views can be nested within Backbone.Views. Do it. It will help organize your code. It will make things like event scoping easier.

Communicate Between Objects

Interesting things will start to happen when objects start talking to each other. You can pass references to provide a line of communication. Or you can talk over the global Backbone.Events bus.

Model Newness

Backbone.Model has the concept if isNew(). It's not magic. If the model has an id attribute, it's not new, meaning it's already persisted in your data store. This affects HTTP commands in save(): POST for new, PUT for not new.

Remember Who You Are

This is an issue you'll deal with in all JavaScript. Since Backbone is event heavy, you'll see it a lot. Within event callbacks, this will refer to window. To maintain the context of your Backbone object, pass context in your event .on() calls. _.bindAll() is also handy where the API doesn't support context passing directly.

Organize Your Files

You're using Backbone because you're creating a thicker client, and it's getting crowded there. For the same reasons, use an AMD loader, like RequireJs, and encapsulate your files.

Minimize DOM Operations

Modifying the DOM is expensive. Use document.createDocumentFragment() or use jQuery (eg, $('