Ember vs Backbone Large Data

JavaScript performance comparison

Revision 5 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>


    function emberJS() {

    var dataList = [];
    for (var i = 0; i < 100; i++) {
        dataList[dataList.length] = Ember.Object.create({content: i});
    };

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

            App.collection.pushObjects(dataList);

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

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

    };

    function backboneJS() {


    var dataList = [];
    for (var i = 0; i < 100; i++) {
        dataList[dataList.length] = new Backbone.Model({number: i});
    };
        templateBackbone = Handlebars.compile("");

        var collection = new Backbone.Collection();

            collection.add(dataList);

        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