Backbone Events vs. Ember Bindings: A Benchmark

Animating 100 (or N) circles with your standard Backbone events and Ember bindings.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-app="animateApp">
    <div id="grid" ng-controller="MainCtrl">
        <p>Performed {{loopCount}} iterations in {{totalTime}}ms (average {{(totalTime / loopCount) | number: 2}}ms per loop).</p>
        <div class="box-view" ng-repeat="item in items track by $index">
            <div class="box" id="box-{{$index}}" ng-style="{
        top: item.top + 'px',
        left: item.left + 'px',
        background: 'rgb(0,0,' + item.color + ')'
        }">{{item.content}}</div>
        </div>
    </div>
</div>

CSS

p {
    font: 12px/16px Arial;
    margin: 10px 10px 15px;
}
button {
    font: bold 14px/14px Arial;
    margin-left: 10px;
}
#grid {
    margin: 10px;
}
.box-view {
    width: 20px;
    height: 20px;
    float: left;
    position: relative;
    margin: 8px;
}
.box {
    border-radius: 100px;
    width: 20px;
    height: 10px;
    padding: 5px 0;
    color: #fff;
    font: 10px/10px Arial;
    text-align: center;
    position: absolute;
}

JavaScript

// Change N to change the number of drawn circles.

var N = 100;

var app = angular.module('animateApp', []);

app.controller('MainCtrl', function ($scope, $timeout, $window) {
    var Math = $window.Math,
        i,
        count = 0;

    $scope.items = [];
    for (i = 0; i < N; i++) {
        $scope.items.push({});
    }

    $scope.totalTime = 0;

    var animate = function () {
        angular.forEach($scope.items, function (item) {
            var start = new Date();
            item.top = Math.sin(count / 10) * 10;
            item.left = Math.cos(count / 10) * 10;
            item.color = (count) % 255;
            item.content = count % 100;
        });
        
        $timeout(animate);
    };

    animate();
});