Ember vs Backbone Large Data

JavaScript performance comparison

Revision 3 of this test case created

Preparation code

<div id="container"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.9/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-pre.2/ember-1.0.0-pre.2.min.js"></script>

<script>

    var dataList = [];
    for (var i = 0; i < 10; i++) {
        dataList[dataList.length] = i;
    };

    function emberJS() {
        App = Ember.Namespace.create();

        App.Model = Ember.Object.extend();

        App.collection = Ember.ArrayController.create({content: []});

        dataList.forEach(function(item) {
            App.collection.pushObject(App.Model.create({number: item}));
        });

        App.view = Ember.View.create({
            template: Ember.Handlebars.compile("")
        });

        $(function() {
            App.view.appendTo('#container');
        });

    };

    function backboneJS() {
        templateBackbone = Handlebars.compile("");

        var collection = new Backbone.Collection();

        dataList.forEach(function(item) {
            collection.add(new Backbone.Model({number: item}));
        });

        var View = Backbone.View.extend({
            el: '#container',
            render: function() {
                var contents = templateBackbone({list: this.collection.toJSON()});
                this.$el.html(contents);
            }
        });

        $(function() {
            var app = new View({collection: collection});
            app.render();
        });
    }
</script>
<script>
Benchmark.prototype.teardown = function() {
    $('content').html('');
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Ember
emberJS();
pending…
Backbone
backboneJS();
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment