CanJS EJS Live Binding Performance

Info

Comparison between CanJS, Backbone, Ember, YUI and Ember.

Test renders 100 circles and updates the content and style of each.

Based on demo here: http://jsfiddle.net/JMWf4/4/

Preparation code

<script src="http://donejs.com/examples/todo/zepto/zepto.0.8-focusblur.js">
</script>
<script src="http://donejs.com/can/dist/edge/can.zepto.js">
</script>
<script type="text/ejs" id="ejs-template">
  <% list(boxes, function( box ) { %>
    <div class="box-view">
      <div class="box" id="box-<%= box.count  %>" style="<%= box.style() %>">
        <%= box.content() %>
      </div>
    </div>
  <% }) %>
<div id="grid"></div>
<script>
  Benchmark.prototype.setup = function() {
    window.N = 100;
    window.reset = function() {
        $('#grid').empty();
        clearTimeout(timeout);    
    };
    (function() {
      var can = {
                Box = function() {
                    return {
                      count: 0,
                      top: function() {
                        return (Math.sin(this.count / 10) * 10) + 'px'
                      },
                      left: function() {
                        return (Math.cos(this.count / 10) * 10) + 'px'
                      },
                      color: function() {
                        return 'rgb(0,0,' + (this.count) % 255 + ')'
                      },
                      content: function() {
                        return this.attr('count') % 100
                      },
                      tick: function() {
                        this.attr('count', (this.attr('count') + 1));
                      },
                      style: function() {
                        this.attr('count');
                        return 'top: ' + this.top() + '; left: ' + this.left() + '; background: ' + this.color() + ';';
                      }
                    }
                  },
                        canInit = function() {
                                boxes = new can.Observe.List();
                                for (var i = 0; i < N; i++) {
                                        boxes.push(new Box());
                                }
                                $('#grid').append(can.view('ejs-template', {
                                        boxes: boxes
                                }));
                        },
                        canAnimate = function() {
                                for (var i = 0; i < N; i++) {
                                        boxes[i].tick();
                                }
                                deferred.resolve();
                        }
                };
    })();
  };

  Benchmark.prototype.teardown = function() {
    window.reset()
  };
</script>

Preparation code output