This post is part of my weekly tech learning series, where I take one hour each week to try out a piece of technology that I'd like to learn.
For this week's tech learning session I decided to tackle backbone.js. Of all of the technology I've been wanting to learn, backbone.js has been the one I've been the most interested in.
Unfortunately, the session was worthless.
App Idea
Before I get into what happened, I wanted to write about the new app idea I'm going to try building. In previous weeks I've done a todo list but todo lists are overplayed.
While running I had the idea of building apps that would record my running, like a running journal. For those who don't know, many runners keep track of each run in a journal so they can see progress and spot any problems in training.
This maps over easily to programming. You have an object (a Run) with data attributes about the run. The runs are collected into a Running Journal which is just a time based collection (Array). Then there are calculations that can be done on individual or groups of objects: average pace, total distance in a month, speed trends, etc.
Pretty simple to model and much more interesting than yet another todo list.
Problems
I read the short introduction to backbone.js but it wasn't that useful, just an executive summary of the project. I clicked through to the examples and found that Jérôme Gravel-Niquet created a Todo List application that came with the annotated source. I figured this would be great since I could read about how the application was put together while seeing the actual code.
Then things went downhill from there.
Don't get me wrong, the todo application is very well documented and even uses localStorage which is what I was planning to use for my Running application. It's just that the documentation was in the form of describing each part of the code and not in a tutorial style (e.g. step 1, step 2).
After reading the docs and code for the todo application twice, I started to mimic the parts I wanted for my app. Even skipping over a lot of the stuff on the first pass it still took quite a bit of time.
And nothing worked.
Back to the Official docs
I figured there was something I was missing so I want back to the official docs to see if there was a simple tutorial.
There wasn't. The official backbone.js docs is 69 pages of API. Great for experienced developers but really shitty for beginners.
Off to Google
So by now my hour was running out and I had 90 lines of backbone.js code that wasn't working. I did find a few backbone.js tutorials and started going through two of them to compare to my app, trying to find the problem.
Still not finding anything I used a super simple application Thomas Davis had which was just a view that bound a prompt to click events, like this...
(function ($) { window.AppView = Backbone.View.extend({ el: $("body"), events: { "click body": "showPrompt", },
showPrompt: function() {
console.log("Hello");
}
});
var appview = new AppView; })(jQuery);
...and it still didn't work. I noticed that the first Todo application was using var AppView for the scope while Thomas used window so I started iterating on that to see if maybe there was a scope problem.
But then I ran out of time.
Net result
103 lines of backbone.js code that "should" work but doesn't.
Frustration at how I couldn't get such a popular library to work, even in the simplest case.
Annoyance once again at how hard it is to be a beginner and not know where the resources are to learn.
Finally, a very clear message that I've gotten spoiled by TDD and the fast feedback cycles it enables.
A closing note, I will be trying backbone.js again. I've seen enough about it to know that it has the potential to be a great tool, but it's just going to take longer than the hour I gave it before it's useful. I'm 90% sure that my code wasn't working because of a stupid error that I could spot and debug with some practice.
But not for now.