Backbone vs. Simple JavaScript Inheritance

For our recently launched flashcards tool, we built it in Backbone. Demo: <a href="http://quizlet.com/23770911/flashcards" rel="nofollow">http://quizlet.com/23770911/flashcards</a><p>Our experience was that backbone was very helpful in laying out code and providing clean event triggering, but that a lot of it was simply too slow to use. We started out with a View per card, but that was impossibly slow with 100+ cards (and we need to support ~1000+). We ended up with just one view for the Card section, and a view each for the sidebar and options sections. That made it much faster, but also took away many of the benefits of backbone.<p>We also ran into significant speed problems with model gets and sets. Initializing the data for 200 cards (~10 attributes per card) took hundreds of milliseconds on Chrome and other browsers. We ended up using plain javascript objects for the hottest parts of that code.<p>Overall to us, backbone was probably worth it, but also cost us many long days of performance debugging, and we're still not 100% happy with it. For our next project we may try something else.

I don't understand the relevance of this. Perhaps I'm being thick, but comparing a simple lightweight demo of sample inheritance and the initiation of a comprehensive framework object seems to have no valuable point other than showing that frameworks are generally slower than things much simpler than they are, which everyone should be aware of. Even then, 94k ops a second for Backbone isn't to shabby considering how many instances anyone sane will be maintaining on a page at once.

Backbone's 'extend' is portable to non-Backbone classes[1]. It would be more interesting to see the performance profile comparison of Backbone and Resig implementations of extend when used to inherit from the same class (either an empty class, or a Backbone class).<p>[1] <a href="https://github.com/documentcloud/backbone/blob/master/backbone.js#L1530-L1561" rel="nofollow">https://github.com/documentcloud/backbone/blob/master/backbo...</a>

I don't understand how the code snippets are at all equivalent. It looks like <i>ResigsClass</i> doesn't extend anything except <i>Class</i> itself whereas <i>myModel</i> extends <i>Backbone.Model</i> which presumably starts off more complicated.

I perfectly understand the need to poo-poo a Javascript framework/library in this day and age of fierce client-side competition, the submitter must have an agenda and that's perfectly OK, but come on people, let's try a little harder now, the comparing of apples and lawn chairs is getting ridiculous.

Web developer spend too much time worrying about JavaScript performance I think. When one method can iterate around 100000 element in a second and the other 120000 elements, I would choose one that I am more comfortable with not the faster.

Why not just use normal JavaScript inheritance?<p><a href="http://jsperf.com/backbone-vs-john-resig-class/10" rel="nofollow">http://jsperf.com/backbone-vs-john-resig-class/10</a>

As a curiosity I added one to compare against spine as well.<p><a href="http://jsperf.com/backbone-vs-john-resig-class/9" rel="nofollow">http://jsperf.com/backbone-vs-john-resig-class/9</a><p>However, since most of the time I'm using spine via coffeescript the inheritance is going to be done slightly different.