Backbone Tunes: A backbone.js demo
Angular Tunes: An AngularJS demo
- Displays a list of available albums and their tracks
- Allows queueing albums for playback
- Plays the queue, one track at a time
And then it happened... I realized that while the screencast was very well done, and the app was quite nice, the code could use several improvements. The biggest one being - this app could be much simpler if it was written in AngularJS. So I sat down and rewrote most of the code in 2-3 hours.
I expected the rewrite to be simpler, but I didn't expect to delete about 2/3 of the codebase (see diff).
I didn't spend too much time thinking about how the backbone code could be improved, so if you can write the app with backbone in a significantly better way, I'd be very happy to look over your fork!
Anyway, as I was rewriting the app I came to these conclusions about the Backbone app and Backbone itself:
There is just way too much wiring going on.
I think that this is an artifact of backbone being agnostic of templating and very heavily focused on the model. This means that the burden of keeping the view updated with using the right templates updated in the right places at the right time is up to the developer.
If you look at the diff, you'll notice that I deleted all of the views and replaced them with nothing. This stuff is not necessary in Angular. Angular looks at the template and figures out how the view should be updated with what kind of dom manipulation, when, and with what data.
Templates in the original backbone app were split into several tiny fragments. Because of this a web designer would have a hard time figuring out how the templates end up being composed in the final view. To make matters even worse, the template fragments in
Now you might think that this is not a big deal for some reason, but this kind of fragmentation results in creating a messy DOM tree with some non-obvious errors. For example in the original backbone app,
divelements are being nested in the
ulcontainer, instead of proper use of
lis. This kind of stuff is hard to spot with fragmented templates, unless you inspect the DOM in the browser.
Models are unnecessary complicated.
Dependencies, dependencies, dependencies.
Even a trivial app like this one, requires including underscore and jquery libraries to get stuff done. jQuery (minified) alone is much bigger (31KB) than backbone and the app code combined. AngularJS is just 25KB (min+gzip) and doesn't require jQuery or underscore.
If you feel that any of these points are wrong, feel free to fork the code, improve the backbone version and prove your argument with a diff.
Features and Fixes
The original app contains several bugs and missing features that I fixed/added:
- next/previous buttons don't throw exceptions when pressed while playlist is empty
- pressing play when playlist is empty doesn't do anything
- when playlist is emptied, play button doesn't start to play the last played song
- when one song finishes playing, the next one in the playlist starts
- the DOM contains fewer elements and I fixed issues like nesting
divs inside of
- conditional css and Modernizr were removed since they are not being utilized by the app
Visit the webserver at:
test-js/SpecRunner.html in your browser (using the file:// protocol)