Creating -- A Short Story.

Hey! It's me!

Creating -- A Short Story.

Posted on October 25th 2010

LocalTodos is simple todo app. It’s built on Backbone.js and was meant to test my own implementation of Backbone.js for MooTools as well as my Backbone.localStorage adapter.

For Fun & Profit

Initially, the reason why I got to build yet another todo app was to test my implementation of backbone-mootools and backbone.localStorage. I needed those two javascript libraries to port Ostrich to a much more coherent and organized codebase. The simplest possible project to test those could only be a todo list, the “hello world” of modern programming languages!

It took quite a bit of fiddling around to get acquainted with Backbone.js, there weren’t any example app out there, only bits and pieces in the documentation. In a desperate move, I went to the #documentcloud channel on freenode, hoping to talk to some of the developers of Backbone.js. I was in luck as I spoke with its creator, Jeremy Ashkenas, and he gladly answered my questions about both Backbone.js and Javascript in general. He looked forward using a nice simple app as the first example of Backbone.js usage, porting it back to jQuery, annotating it and releasing it in the main repository.

Jeremy guided me through the jQuery bits in Backbone.js so I could replace them with MooTools equivalents. Jeremy is both a genius and a friendly helper. I couldn’t have been luckier in my endavour.

Profit? Yes. Jeremy said I should add my credits to the app. Even though he had refactored pretty much the whole code, he still felt this was my app. After Jeremy posted it on HackerNews, it got quite a bit of attention and quickly rose to the frontpage. I wrote a short bit about how it had been made and my experience using Backbone.js in the comments. Anyhow, my name is plastered all over this example app and I’ve been contacted by several people concerning business opportunities. Thanks for everything Jeremy.

Backbone.js for MooTools

Open sourced on github, it’s a few tens of lines of code change adapting Backbone.js for MooTools. Lucky for me (again), jQuery was only present in small amounts in Backbone.js, it wasn’t all that much trouble replace it. The tricky bit was with jQuery.delegate. MooTools doesn’t have that functionality, it only does in MooTools.More which I had to include (parts of it) to make this work. Requirements are like so: MooTools, MooTools.More (Element.Delegate).


As I’m building new features into Ostrich, I wanted to cache the user’s tweets in order to have the client behave very much just like a normal Twitter client. Like so: the last tweets you viewed are stored and displayed upon reopening the browser, new tweets are loaded upwards of your old tweets and you may scroll to mark them as read. That’s my own requirement for how I like a Twitter app’s UX to work.

Backbone.js was suggesting in its documentation to override the Backbone.Sync function to plug in your own storage (localStorage, websockets, etc.). However, it had not been done before. It was surprisingly easy. Backbone.js doesn’t get in the way, it’s so elegantly coded, perfectly documented and its creator is really friendly.

I’ve also open sourced it on github for all to fork and use freely. Again, huge credits to Jeremy for refactoring the whole code (luckily, it’s not a huge codebase) to make it more coherent. I can’t take full credits for this adapter, even though it worked fine with my initial implementation, Jeremy’s refactor is much better.

It isn’t only an adapter for localStorage, it’s also a wrapper around localStorage to make it behave like a key/value store with collections. Here’s how you’d use it:

window.SomeCollection = Backbone.Collection.Extend({

  localStorage: new Store("SomeCollection"), // Unique name within your app.

  // ... everything else is normal.


Simple huh?

My first true open source contribution

… and it was great. The people were nice, I got a bunch of offers for interesting opportunities and it felt good to give back. If you haven’t yet released anything open source: do it now.