

Todos: a Backbone.js example Single-Page-App (with LocalStorage) - jashkenas
http://documentcloud.github.com/backbone/examples/todos/index.html

======
jeromegn
A little backstory...

With the help of jashkenas, I created this app to test my implementation of
Backbone.js for MooTools (<http://github.com/jeromegn/backbone-mootools>) and
my localStorage adapter (<http://github.com/jeromegn/Backbone.localStorage>
for those interested). It just so happened that jashkenas had been aching for
a decent example app, so he reported it to jQuery and included it in the
repository.

My own version of this demo is available here (with an extra sorting feature,
and built on MooTools) <http://localtodos.com/> (source:
<http://github.com/jeromegn/localtodos>)

Hope you like it.

~~~
mrchess
Can you describe your experience with backbone? Now that you have built an app
with it, do you recommend it? Or perhaps wait till it matures a little?

~~~
jeromegn
Since I'm no programming nor javascript wizard, I needed some help from
Jeremy. I know my way around MVC since I've been doing some Ruby on Rails in
my time.

My experience with more advanced Javascript is with MooTools, so I found it
familiar to build Class-like objects. I rather enjoyed the experience and I'll
be using it to replace the codebase for my more complex project.

The documentation is exhaustive and with that example app, annotated et al.,
it's even better. I also am very confident in Jeremy's skills as the project
maintainer, he helped me a lot and has proven he creates great Javascript
libraries.

The API seems stable enough. From Backbone 0.1.2 to 0.2, there weren't that
many differences in the API, mostly nice additions.

------
luigi
That annotated source is a thing of beauty.

~~~
nixme
jashkenas has single-handedly redefined literate programming for me. I've
always considered it somewhat useful, but never very practical until seeing
his annotated sources.

More examples:

Underscore: [http://jashkenas.github.com/coffee-
script/documentation/docs...](http://jashkenas.github.com/coffee-
script/documentation/docs/underscore.html)

Backbone: <http://documentcloud.github.com/backbone/docs/backbone.html>

CoffeeScript: [http://jashkenas.github.com/coffee-
script/documentation/docs...](http://jashkenas.github.com/coffee-
script/documentation/docs/grammar.html)

I believe they're all generated with Docco:
<http://jashkenas.github.com/docco/>

~~~
catshirt
same! there is also a docco fork on node called dox.
<http://github.com/visionmedia/dox>

ever since seeing Dox I have made a much larger effort to essentially create a
reference for everything I write (in a perfect world this would be a given).

------
samratjp
This is really nice and lightweight. Kind of a Backbone.js => Sinatra, as
SproutCore => Rails. I mean, checkout SproutCore's Todos tutorial
(<http://wiki.sproutcore.com/Todos%C2%A0Intro>)

------
jhuckestein
More than anything else, javascript programmers need a way to structure large
codebases. Very few frameworks (including backbone.js) help with that and the
build process of complex RIAs.

That said, I do like the simplicity of backbone.js.

~~~
jashkenas
In my opinion, the build process of a JavaScript application should be a
separate thing from the libraries you choose to make it with.

That said, we (DocumentCloud) have also open-sourced Jammit -- the library we
use to build JS, CSS, and JS templates into asset packages for production:

<http://documentcloud.github.com/jammit/>

Here's a screenshot of what it looks like to have a bunch of Backbone Models
and Views that will get Jammit'd into a single file at deploy time:

<http://cl.ly/803f3e67692572d76abb>

------
eloop
Thanks for the great example. I'm already using Backbone.js in a project, it's
a beautiful piece of code (along with underscore.js). One small thing,
wouldn't it be better to create a new application specific namespace instead
of adding so many globals ?

~~~
jashkenas
Yes -- a single hidden namespace would be cleaner, but then you miss out on
all the fun of playing around with this stuff in the console! Here's some one-
liners to try with a full Todo list:

    
    
        Todos.pluck("content");
    
        Todos.first().toggle();
    
        Todos.last().clear();

------
k7d
Funny, I created something very similar couple days ago based on rocket.js:
<http://github.com/k7d/rocket_todo>

(only it uses web SQL DB instead of local storage)

