Peepcode's Backbone.js Music Player Reimplemented in AngularJS
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:
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.
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.
The original app contains several bugs and missing features that I fixed/added:
divs inside of
Visit the webserver at:
test-js/SpecRunner.htmlin your browser (using the file:// protocol)
All my code as well as AngularJS are licensed under the MIT license. The license of the original code from PeepCode is unknown, but I got their OK to fork and publish it: http://goo.gl/UB36U