Added by: Sam Deering
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
index.html were not complete,
since before combining all templates into the final view each of the fragment is wrapped into a
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
div elements are being nested in the
ul container, 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.
The original app contains several bugs and missing features that I fixed/added:
divs inside of
Visit the webserver at:
test-js/SpecRunner.html in 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
Module stats last updated: 2017-05-29 16:00:05