Todos: a Backbone.js example Single-Page-App (with LocalStorage) | Hacker News Reader

Todos: a Backbone.js example Single-Page-App (with LocalStorage)

documentcloud.github.com

169 pointsjashkenas28 comments

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.

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?

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.

I've already used it for my admin app as well, and in the process submitted some patches to backbone as well. It's quite nice how unobtrusive it is. I wrote a small jquery plugin that converts a form & table into fully functional crud with client & server side validation.

It looks very nice. One small UI request, you should only be able to edit one existing item at a time, so if you are currently editing one item and you double click another item, the first should be committed.

Ah, that's a good one. I'll add that.

also, while editing, if I double clicked to edit and clicked out for some reason, the changes are not committed yet.

I think the more intuitive way of doing it is adding some sort of a commit-on-click-out feature ..

Good call -- I've updated the example to close and save the todo when you blur the input field. Thanks.

Updated localtodos.com to reflect the changes + some additional styling.

I've updated the app to work that way -- nice idea. Here's the relevant change, for the curious:

http://documentcloud.github.com/backbone/docs/todos.html#sec...

That annotated source is a thing of beauty.

Here's the source: http://documentcloud.github.com/backbone/examples/todos/todo...

Edit, no, it's here: http://documentcloud.github.com/backbone/docs/todos.html

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...

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

CoffeeScript: http://jashkenas.github.com/coffee-script/documentation/docs...

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

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).

It's made with Docco http://jashkenas.github.com/docco/

There's also Pocco (Python), Rocco (Ruby), and shocco (*sh) http://tomayko.com/linkings/67644cabf40a7aa32c2a99fda9a42e20

I'm hopeful that some ambition person out there will do a phpocco in the near future.

I'm not sure about that. 'phpocco' just doesn't have the same ring.

But I jest. It would be most welcome.

There should be instead a occo that could have plugins written for all sort of languages that feels like it. That makes it much more reusable.

Though the name is unfortunate, I have to vote for cocco.

http://github.com/oneblackbear/phrocco

FYI, "Pocco" is now "Pycco". Armin Ronacher of Pocoo asked me to change the name because Pocco was a little too close to Pocoo and I gladly obliged seeing as Pycco (and Docco, too) use Pocoo's excellent Pygments syntax highlighting library and I have tons of respect for him and his work.

Anyways, here is Pycco's new homepage: http://fitzgen.github.com/pycco/

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)

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.

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

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 ?

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();

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)

Reply on news.ycombinator.com