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://sb.taurus.uberspace.de/jslib/ember-0.9.5.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.

emberJS();

spineJS();

backboneJS();

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:

• Revision 1: published by Tobias Otte on 23rd March 2012
• Revision 2: published by Tobias Otte on 26th March 2012
• Revision 3: published by Tobias Otte on 26th March 2012
• Revision 4: published by Tobias Otte on 2nd April 2012
• Revision 5: published by Tobias Otte on 23rd April 2012
• Revision 6: published by Tobias Otte on 24th April 2012
• Revision 7: published by Tobias Otte on 25th April 2012
• Revision 8: published by Tobias Otte on 27th April 2012
• Revision 9: published on 7th June 2012
• Revision 10: published on 16th January 2013

0 comments