Simple Todo App using Backbone

Here's a quick example I threw together of a simple Todo app using Backbone.js. It overrides the Backbone.sync function to persist the tasks to localStorage. I tried to keep it simple.

I'd really like any Backbone gurus to have a look and make suggestions (or make their own fork) for better collection/view handling. Or to just rework it to show "best practices."

Some questions I have are:

• What's the best way to handle views when the associated model has been destroyed?
• Is there a better way to handle collections? (A collection controller perhaps?)
• When a collection is refreshed, is it better to blitz the DOM (as this example does) or loop through the models to see if they already have Views and attach/create as needed?

It seems most of my questions are related to Views, huh?

Well, I'll continue to experiment and if I come to any conclusions I'll be sure and post them. But if you are, or know, anyone well versed in Backbone (can't be too many people, at this point) I'd really like some feedback.

You can see it below, or here.

Enjoy!

Technorati Tags: javascript, backbone.js, jquery

Using Backbone.js in CoffeeScript

If you don't know about CoffeeScript yet, you need to check it out. Now. -- I love it. It feels as fun and clean as writing in Ruby, only it compiles to JavaScript. That's what you would call "all good." If you were one to use such expressions.

Here's some coffee I created so I could use Backbone classes as native CoffeeScript classes:

Apps With Backbone

I've been working with a lot of JavaScript (single page) apps lately. I've found that the primary challenge of JS apps is keeping your data and UI sync'ed up.

There are those who say that attaching the data directly to the DOM is fine... But I'm leery of that. Some browsers (notably IE, of course) tend to leak memory when attaching extraneous data to the DOM. Plus, it just feels wrong. There's a reason "Separation of Concerns" (SoC) is a bit of a mantra.

Ideally you'd want to use something like Cocoa's KVC bindings for your UI. But the two main projects that have that as a goal, SproutCore and Cappuccino, are actually trying to implement the entire Cocoa stack on the web. Cappuccino even goes so far as to create a new language (sort of) to do so. Which is great, I guess, if you want to invest the time to learn their huge frameworks. (Don't get me started on their lack of decent docs.)

A new option appeared yesterday. DocumentCloud released an interesting so-called MVC framework named Backbone.js.

I should mention that it's not actually an MVC framework in the truest sense. It provides Models, Views, and Collections... MVC actually stands for Models, Views, and Controllers. For Controllers, I think Sammy.js is probably the best Controller framework you'll use.

Why is Backbone interesting? Because it's basically a small framework (~2Kb) that provides the core pieces of KVO bindings.

It's also built on top of jQuery and underscore.js. Bonus!

I'm definitely gonna be digging into Backbone and I'll write up my findings and some examples as I go along.

Hark! He Posts.

What's this? Has hell frozen over?

Not exactly. But I am resurrecting my blog. I've included all the old content here to keep some kind of continuity.

I'll be posting my more technical oriented material here. For illustrations, sketchs and other fun stuff, I'll be posting that to zoodotcom.com.

Lately I've been moving more to the JavaScript world, an already familiar place for me. So expect to see some posts about Node.js, Backbone.js, CoffeeScript and other things that catch my fancy.

Cheers!