A better Todo List with Backbone

JavaScript, which has absolutely nothing to do with the Java language, has become a remarkable platform for elegantly solving programming problems and delivering effective solutions.

Has JavaScript got problems? Sure, like every other language ever invented it solves problems and brings new problems with it, but it seems the JavaScript world has considerably more juice than other programming platforms. Combine JavaScript with HTML5 and the juiciness quotient goes up by an order of magnitude!

ROUNDUP: 17 JavaScript tools for the HTML5 generation

I keep coming across tools and programming examples that use JavaScript and quite a few of them are incredibly useful. For example, the Backbone library which aims to clean up JavaScript coding by the use of "models." The models contain "the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. ... In a finished Backbone app, you don't have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually -- when the model changes, the views simply update themselves."

To get a better appreciation of what can be done with Backbone, check out the Backbone examples page which highlights some amazing projects that use Backbone and many of which work at enterprise scale.

One of the examples that caught my attention is the first one listed, the Todo List application. I've been using a free online service called Tada List since it was launched in 2005. Published by 37Signals to address the lack of browser-based "to-do" lists at the time, the company has recently decided to retire the project as such services are no longer hard to find. The problem with this, from my point of view, is that Tada List was really simple and did the job pretty much as I wanted it to. I use a Tada list as a place to keep notes about products and services I need to follow up on and all of the bells and whistles of something like Basecamp lists are overkill for my purposes.

The Backbone-based Todo List by Jé²´me Gravel-Niquet provides an almost identical service but uses Backbone for the fancy footwork and HTML5 localstorage to keep the list data locally. Also called "DOM Storage," localstorage is a method for browser-based code to persistently store data locally as named key/value pairs and is now a standard browser feature. Implemented in all of the major browsers (including IE 8+, Firefox 3.5+, Safari 4.0+ and Chrome 4.0+), localstorage allows data to persist across sessions and, unless a browser app sends the data to a server, it is private and completely local.

This new Todo List capitalizes on this feature and, while you can load the Web page, CSS and JavaScript libraries from anywhere, the actual list data is kept on your computer.

If you want to make your own version examine the source for the app, then save the source, the CSS file and the libraries to wherever you please and modify the source so all of those components can be loaded correctly. With very little effort you can change the entire look and feel of the list and Backbone, which takes a little learning, actually makes the code orders of magnitude easier to understand and maintain.

If you have discovered any other useful tools like this, let me know.

Gibbs is has a lot of to-do's in Ventura, Calif. Send him a new list at gearhead@gibbs.com and follow him on Twitter (@quistuipater) and on Facebook (quistuipater).

Read more about software in Network World's Software section.

• Bookmark this page
• Share this article
  •  
  • facebook
  • slashdot
  • digg
  • Reddit
  • stumbleupon
  • linkedin
  • twitter
• Got more on this story? Email TechWorld
• Follow TechWorld on twitter

• Share
  Share this article1

  •  google+
  • facebookfacebook
  • slashdotslashdot
  • diggdigg
  • RedditReddit
  • stumbleuponstumbleupon
  • linkedinlinkedin
  • twittertwitter
• print
• email
• Bookmark