LearnCreate JavaScript Apps with Backbone.js

Treehouse
writes on January 12, 2011

Share with your friends










Submit

Building JavaScript applications for the browser can become really complicated. Until recently we had two main options: create your application structure from scratch, or use a JavaScript application framework like Cappucinno or SproutCore.

Building a large JavaScript application without a framework can lead to unorganized, difficult to maintain code. Libraries like jQuery and Prototype offer us great tools to normalize DOM APIs and browser quirks, but don’t offer much direction as to how to organize our application logic and data.

On the other side of the spectrum, Frameworks like SproutCore and Cappucinno offer extremely robust application tools like controllers, models, key value observing and more. However these frameworks also include a large UI library, and a very steep learning curve.

So what is there in the middle, for us writing medium to large size JavaScript applications? The SproutCore: Amber project promises to extract some of the most useful components of SproutCore to create a “light” version that can be used anywhere.

37Signals has taken the route of creating their own framework, and there is a possibility it may be released as an open source project, much like Ruby on Rails. My favorite framework that I have had the chance to use recently is Backbone.js.

Backbone.js

Backbone.js is a very lightweight toolkit that provides things like models, controllers, and views. The models allow you to keep track of the data in your application, as well as organize your app’s business logic.

The models can also very easily interact with a RESTful API provided by your web application, making much easier to synchronize data between your frontend and backend applications.

The views offer the ability to easily update your page elements when the data in the model is updated. The controllers offer utilities for managing changes in your application state by utilizing the fragment, the part of the URL after the #.

Backbone.js provides the tools, but does not impose too much structure on your application. I have found this to be a very good balance. I am able to integrate it fairly easily into my existing applications, with great benefits.

The downside the this is that it does take a little bit of reading and experimenting to see exactly all of the pieces of Backbone.js fit together. I suggest taking a look at not only the documentation, but also the Todo List application, and its annotated source.

Backbone.js is intentionally very small (3.9kb packed and gzipped) and it’s only hard dependency is underscore.js, which provides a library of useful general purpose JavaScript functions. Backbone.js can also use jQuery or zepto.js for helping with view functionality.

What are your favorite tools for organizing JavaScript applications?

12 Responses to “Create JavaScript Apps with Backbone.js”

  1. Diegocastorina on April 20, 2011 at 8:05 pm said:

    Hi Jim, very nice review.
    I also prefer Backbone to Sproutcore or other more invasive options.
    Here are also some entries I have written about the topic

    http://a-developer-life.blogspot.com/2011/04/backbone-part-1-intro-and-model.html
    http://a-developer-life.blogspot.com/2011/04/backbone-part-2-view-and-controller.html

  2. It works great!!
    Application-development becames more easy with Backbone.js – easy enough, that I, as a newbie, really could create an app 😉
    Thanks for pointing this information out!
    Now, that I’m a pro in cr8ingapps (lol), there’s a page I’d like to share: http://creatingapps.telekomaustria.com/ – check it out if you like to.

  3. Playing with backbone now. Although it looks really sweet, I can’t help but notice that sproutcore’s todo’s demo, which reproduces like the exact same thing, does so in roughly 60% of the code. http://guides.sproutcore.com/html_based.html

    Using SC’s relatively new template stuff for creating the views. Going to push through with backbone and see what the advantages might be.

  4. jQuery is so fucking easy…
    there is another reason to use this framework?

  5. Mootools, of course.

  6. thank for presenting, so did you create any JS app? or going to create what?

  7. Checking this out when I’ve got the time. I always try to come up with something myself, but in the end it almost never works out great.

  8. Anonymous on January 13, 2011 at 8:21 am said:

    I’m using Backbone.js right now, along with coffee script for one of my customer’s development. Backbone.js is really pleasant to work with. By far the best JS organised framework available out there. And coupling it with coffee script makes it even better!

  9. Backbone.js for scripting, with Coffeescript as the primary language. Cucumber and Celerity for Testing. I’ve been using Futures.js recently for event management marshalling. Zepto looks like fun. Everything in Git, of course. Fabric for deployment.

  10. Anonymous on January 12, 2011 at 11:03 pm said:

    Looks good, I might try it out. For larger projects I’d probably try http://javascriptmvc.com/ first, but backbone looks like a quicker startup.

Leave a Reply

Want to learn more about Javascript?

Learn how to use JavaScript to add interactivity to websites.

Learn more