Angular VS Ember (v491)

Revision 491 of this benchmark created on

Description

This is a simple rendering speed test between the most popular libraries/frameworks.

Preparation HTML

<!-- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://builds.emberjs.com/release/ember.min.js"></script>
<!-- Angular -->
<div ng-app="ngApp">
  Angular 1.3:
    <span ng-controller="Ctrl" id="angList"><span ng-repeat="item in data | limitTo: 10 track by $index">{{item}}</span></span>
</div>

<!-- Ember -->

<div id="emapp">
  <script type="text/x-handlebars">
    Ember:
    <span>
      {{#each EMapp.data}}<span>{{this}}</span>{{/each}}
    </span>
  </script>
</div>

<script>
  var ngApp = angular.module('ngApp',[]);
  ngApp.controller('Ctrl', function ($scope) {
    $scope.data = []; 
  });

  $(document).ready(function() {
    angular.element(document).ready(function() {
      var ang_scope=$('#angList').scope();
      window.ANGclear = function(){
        ang_scope.data = [];
      };
      window.ANGpush = function(data){
        ang_scope.data.push(data);
        ang_scope.$digest();
      };
    });

    EMapp = Ember.Application.create({
      rootElement: '#emapp'
    });
    EMapp.data = Ember.A();
    window.EMclear = function () {
      EMapp.data.clear();
    };
    window.EMpush = function (data) {
      EMapp.data.pushObject(data);
    };
});
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Angular
ANGclear();

for (var i = 0; i < 100; i++)
  ANGpush("nitem" + Date.now());
ready
Ember
EMclear();
for (var i = 0; i < 100; i++)
  EMpush("eitem" + Date.now());
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.