backbone.js Tag

200px-Skull_and_crossbones Backbone.js deserves a lot of credit for bringing MVC to mainstream client-side Javascript development. That said, many beginners ask what the 'right way' of doing something with Backbone is. The bad news is that there's not necessarily a 'right way' - it all depends on the problem you are trying to solve. The good news is that there are definitely some 'wrong ways' that you should avoid on your way to finding the right solution for your particular problem. In this post I'll cover some of these anti-patterns, as well as some general advice for the new starter. I've ordered the anti-patterns roughly by significance from the major to the more trivial. Don't be too upset if you've done something on this list - I've made most of these mistakes myself ;)
Having spent the last 18 months or so working with Backbone.js, I've formed the following opinion: Backbone is not enough for building large single-page applications (SPAs). Sure, you and your team may be able to get your app across the line, but you'll probably end up with a lot of code and may even reinvent a couple of wheels unless you're extremely diligent about refactoring, code reviews, documentation, testing and keeping up with an ever-evolving suite of best-practices.
Clock parts Unit-testing Backbone Views is hard. You need to cover enough for the test to be meaningful (for example DOM updates and server calls), without getting too tangled up in gory details. In this post I'll talk about how we use QUnit and Sinon.JS to unit-test our Backbone views. There's already material out there on using these frameworks together, so I'm not going to get into setting things up. However, having done it for a year now I feel I've learnt enough additional tips, tricks and traps to warrant sharing them with the world. This post will cover the three things you have to think about when testing Backbone Views, then talk about three strategies for simplifying your tests. I'll also share some more general thoughts on Backbone's suitableness for building large apps.
The-Usual-Suspects-1995-Movie-Image-1 One problem with single-page apps is that application state can stick around for longer than it would in a more traditional request-response web app. Because your users aren't refreshing the page very often, you can have JavaScript objects sitting around in the browser for hours, or even days and weeks. At Shine, we've been working on a large Backbone.js application recently and found that identity issues relating to long-lived objects caused a number of subtle and not-so-subtle bugs. For us the solution was to introduce an identity map. In this blog entry I'll talk about what an identity map is, why you'd want to consider using one, and will introduce you to an implementation that we've put on Github.
In Part 1 of this blog series, we saw how UI state could be maintained efficiently in a Backbone app by introducing view-management infrastructure and retaining references to views. In Part 2, I'm going to talk about how this strategy can be extended to views of collections. I'll also discuss some alternate approaches to the problem of efficient stateful views, and why I chose the approach of retaining references to views. Finally, for bonus points I'll discuss how to manage portions of your UI that transition their state via animations.
One of the good things about single-page apps is that it's possible for them to remember UI state within a page. If an area of the page is hidden from the user, and then redisplayed later, you're able to display that area in the same state that it was left. This is in contrast to traditional request/response apps, which are mostly stateless, and where maintaining the state of finely-detailed UIs across requests quickly becomes impractical. However, done carelessly, retaining view state in a single-page app can result in drastic memory leaks over time as the user navigates through the UI. I'm going to describe a strategy that we've used to efficiently maintain stateful Backbone.js views in a large-scale app. In this post - the first of two parts - I'm going to give an overview of the problem, introduce some memory-management infrastructure, and then propose a solution for simple views. In Part 2, I discuss how to handle collections and animated elements. Note that these posts assume experience with Backbone.
In a prior post, I explained how Backbone.js can be used to implement cascading select boxes. However, this was pretty much just a read-only affair, and these were relatively simple HTML elements. How does Backbone fare creating, updating and deleting data via a much more complex UI component? I recently had the chance to build a shared calendar tool with Backbone and FullCalendar, a jQuery plugin for a full-sized calendar with drag-and-drop capabilities. I was quickly able to get them playing nicely with each other, and in this entry I'll cover step-by-step what it took to get there.
What happens when you don't use BackboneUp until recent years, client-side Javascript development has resembled the wild-west from a software design perspective. Libraries like jQuery have certainly helped, but with the rise of Single-Page Applications, jQuery alone doesn't provide enough of an overall framework for large-scale client-side development. Fortunately, there's been a recent proliferation of Javascript MVC frameworks, both large and small. Backbone.js is one of these. It's lightweight, works with jQuery (although it doesn't need it) and seems to have some momentum behind it at the moment. Backbone.js isn't particularly large or opinionated in the manner of say, Rails. For an expert, that might be a good thing. But for a beginner, it's not so good. The API documentation is complete, yet joining the dots can be a little intimidating at times to a newby. Simple tutorials abound that describe how to hook up a single view to a single model, but it's unclear what approach to use for more complex UIs. What should be in a model and what should be in a view? How should models and views interact with each other? I have recently had the opportunity to work on a non-trivial Backbone.js application. In this entry I'll try to present an example that is slightly bigger than your average single model and view. Furthermore, I'll present it in a manner that is iterative, rather than just dropping the whole thing on you in one hit. You'll see that Backbone.js provides a good basis for building apps in an MVC style, although you will be faced with the same design decisions you'd have to make with any other MVC framework. Note that this isn't an introduction to Backbone.js, and assumes a little background knowledge of how the framework works.