Backbone Resources - Become a Badass Chiropractor.

In the process of trying to get the dev team here at Homes Media Solutions up to speed on Backbone, I've been collecting links to a diverse range of articles, resources, etc. on the subject. Following is a curated list of what I believe are the best resources for learning Backbone and being badass at it (in no specific order).

  1. Backbone Fundamentals Open source e-book, started, curated, edited by Addi Osmani.  Still being written, but in time sure to become the defacto free reference to Backbone development.  There are lots of other good resources at the bottom of this page.
  2. Event Aggregator using Backbone An elegant solution to a common application problem.
  3. Data-binding with Backbone Derek  Bailey (see #2) is awesome.
  4. Understanding MVC And MVP (For JavaScript And Backbone Developers) Addi Osmani's post on the history of the aforementioned patterns, and how they relate to the Backbone world.
  5. Recipes With Backbone ($24) Okay, this one isn't free, but it goes through some useful Backbone patterns for dealing with common application architecture concerns.
  6. Peepcode Backbone Screencasts ($12) If you are a total Backbone beginner, these screencasts are worth every one of those twelve dollars.  Peepcode has a few Backbone related screencasts on their site, so don't just settle for the basics (which is linked here)

And here is a bonus link because it's worth looking at and following the links that branch off of it:

Javascript Patterns Collection  by Shi Chuan - a list of patterns and anti-patterns to make your javascript awesome.

Introducing Backbone.Store ... JSON storage for Backbone.

Right now, you can't do much better for quickly developing javascript applications and modules than the triumvirate of  Backbone, jQuery, and Require.  Each of these libraries fit together so well (IMO), and have increased my personal productivity immensely - improving quality, performance, readability, and consistency. There was already a great library for Backbone to utilize HTML5 localStorage functionality; however, there were a few drawbacks to the library that caused me to look in another direction, and ultimately led me to creating

My two greatest needs were:

  1. The ability to utilize the storage mechanism as a cache.
  2. A greater range of compatibility outside of localStorage support.

To meet these needs, I turned to Lawnchair, a JSON storage library with a wide range of adapters for different storage types, mixed in a little bit of the aforementioned backbone.localstorage plugin, and came out with the beginnings of a (hopefully) useful storage middleware.

While the overall project is in very early stages, its not too soon to look at, play with, and provide feedback on.

Download / clone from Github.


  1. Can be used with or without a backend server
  2. Configurable cache time to live
  3. Configure when to use server vs cached model - great for list  vs. detail of a record
  4. Does not require localStorage support, though a Lawnchair adapter may be needed to get the support you want.

Planned enhancements:

  1. Batch model upload to server (online/offline or time delayed)
  2. Parameter based caching (for caching paging / search results / etc)
  3. Remove Require (AMD) dependency
  4. ??? (accepting ideas)

Also included in the project is a basic 'Todo' style application including a CodeIgniter (php) based RESTful web server and structure, and a Backbone/Require/jQuery front-end consisting of a list/detail view with complete CRUD control and proper routing using both direct (bookmarkable) URL access and pushState routing.

Again, this project is nowhere near complete, so I'm sure there are some bugs... Still on the todo list is to add test cases using Sinon and Jasmine, and there is a known issue with the list -> detail -> list navigation.



jQuery DynoMenu - a plugin with a purpose

I've just added the first of hopefully many jQuery plugins and bits of useful javascript to Github.  Called DynoMenu, it is a plugin with a very specific and singular purpose.. yet it may have value to others who find themselves with a similar need. DynoMenu was conceived to solve a problem on HomesConnect.  Since HomesConnect is a CMS that allows users to add new pages and new menu items to their navigation, and since the navigation is horizontal across the top of the page, the need arose to be able to maintain the layout of the templates while removing the burden of keep the navigation usable from the agent.

The solution was this plugin, which will first try to shrink the navigation font to a determined size, and if failing will systematically remove navigation items until it achieves the best fit. These items are placed in a 'more' link which becomes the last main navigation item, and can be accessed from there.  Since the agent can determine the order of their navigation via a drag and drop interface on the backend, it is easy for them to decide which items will fall under the 'more' link by pushing them to the end of the navigation.

In any case this may not have much use outside of CMS systems where you cannot control the total number of nav items, but who knows.. maybe there is a use case I'm not considering.

Download it from Github here. See a demo.