JS MVC Frameworks

JavaScript performance comparison

Revision 9 of this test case created

Preparation code

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

<script src="http://sb.taurus.uberspace.de/jslib/jquery-1.7.1.min.js"></script>
<script src="http://sb.taurus.uberspace.de/jslib/underscore-1.3.1.min.js"></script>
<script src="http://sb.taurus.uberspace.de/jslib/handlebars.1.0.beta.5.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.min.js"></script>
<script src="http://sb.taurus.uberspace.de/jslib/spine-1.0.6,min.js"></script>
<script src="http://sb.taurus.uberspace.de/jslib/backbone-0.9.2.min.js"></script>

<script>

  var sharedData = {
        header: "Header",
        header2: "Header2",
        header3: "Header3",
        header4: "Header4",
        header5: "Header5",
        list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
      },
      container = $("#container");

  function emberJS() {
    Ember.TEMPLATES.templateEmber = Ember.Handlebars.compile("<div><h1 class='header'>{{App.instance.header}}</h1><h2 class='header2'>{{App.instance.header2}}</h2><h3 class='header3'>{{App.instance.header3}}</h3><h4 class='header4'>{{App.instance.header4}}</h4><h5 class='header5'>{{App.instance.header5}}</h5><h6 class='header6'>{{App.instance.header6}}</h6><ul class='list'>{{#each App.instance.list}}<li class='item'>{{this}}</li>{{/each}}</ul></div>");

    App = Ember.Application.create();

        App.model = Ember.Object.extend();
        App.instance = App.model.create(sharedData);
        App.view = Ember.View.create({
          templateName: "templateEmber"
        });

    $(function() {
      App.view.appendTo(container);
      App.instance.set("header6", "ember");
    });

  };

  function spineJS() {
    templateSpine = Handlebars.compile("<div><h1 class='header'>{{header}}</h1><h2 class='header2'>{{header2}}</h2><h3 class='header3'>{{header3}}</h3><h4 class='header4'>{{header4}}</h4><h5 class='header5'>{{header5}}</h5><h6 class='header6'>{{header6}}</h6><ul class='list'>{{#each list}}<li class='item'>{{this}}</li>{{/each}}</ul></div>");

    var Model = Spine.Model.sub(),
        ModelInstance = new Model(sharedData),
        Controller = Spine.Controller.sub({
          el: container,
          init: function(){
            this.model.bind("change", this.proxy(this.render));
          },
          render: function(){
            this.html(templateSpine(this.model));
          }
        });

    $(function() {
      ControllerInstance = new Controller({model: ModelInstance});
      ControllerInstance.render();
      ModelInstance.updateAttribute("header6", "spine");
    });

  };

  function backboneJS() {
    templateBackbone = Handlebars.compile("<div><h1 class='header'>{{header}}</h1><h2 class='header2'>{{header2}}</h2><h3 class='header3'>{{header3}}</h3><h4 class='header4'>{{header4}}</h4><h5 class='header5'>{{header5}}</h5><h6 class='header6'>{{header6}}</h6><ul class='list'>{{#each list}}<li class='item'>{{this}}</li>{{/each}}</ul></div>");

    var model = Backbone.Model.extend(),
        instance = new model(sharedData),
        view = Backbone.View.extend({
          el: container,
          template: templateBackbone,
          initialize: function() {
            this.model.bind('change', this.render, this);
          },
          render: function() {
            this.$el.html(this.template(this.model.toJSON()));
          }
        });

    $(function() {
      var app = new view({model: instance});
      app.render();

      instance.set("header6", "backbone");
    });
  }
</script>
<script>
Benchmark.prototype.teardown = function() {
    $("#container").empty();
};
</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 JS
emberJS();
pending…
spine JS
spineJS();
pending…
backbone JS
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