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?