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
.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.
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
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.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 will refer to
window. To maintain the context of your Backbone object, pass context in your event
_.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,
$('<div /')) as a disconnected fragment. Do all possible operations there, and touch the real DOM once.
Each of these tips are topics in their own right. This list is merely a mention of issues that have each affected me for hours in the past. Which of them do you think deserves to be addressed further? Those would be good topics for future posts.
The ideas given in these tips are very subjective. In some ways, they are prescriptions for a library which otherwise gives few. As such, use them if you will. Discard them just as well.
For some code snippets, see my slides on the same Backbone tips.
Doubtless you have your own tips as well. What are the issues that you’ve had with Backbone? What are the tips you would offer to overcome them?