AngularJS vs KnockoutJS vs ModelViewJS (v59)

Revision 59 of this benchmark created by Nikos M. on

Description

Testing performance of subscribers/watchers and updating the ui (Angular.js, knockoutjs, ModelView.js 0.42.2 variation)

Preparation HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.14/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://foo123.github.io/libs/modelview-0.42.2.min.js"></script>

<script>
    /* Angular */
    var Ctrl = function($scope){
        $scope.data = "";
        $scope.numberofChanges1 = 0;
        $scope.$watch('data', function(a,b,c){
            $scope.numberofChanges1++;
        });
    } 

    angular.element(document).ready(function(){
        var ang_scope = $('#angList').scope();

        ANGclear = function() {
            ang_scope.data = "OMGOMGOMG";
        };
        ANGpush = function() {
            ang_scope.data += "OMGOMGOMG";
            ang_scope.$apply();
        };
    }); 

    /* Knockout */
    var KOData = ko.observable(""), KOUpdates1 = ko.observable(0),
        KOviewmodel = {data: KOData, updates1: KOUpdates1};
    var KOclear = function(){ KOData(""); };
    var KOpush = function(){ var old = KOData(); KOData(old + "OMGOMGOMG"); };
    
    KOData.subscribe(function(){
        KOUpdates1(KOUpdates1() + 1);
    });
    ko.applyBindings(KOviewmodel, document.getElementById('koapp'));
    

    /* ModelView */
    var MVModel = new ModelView.Model('model', {data: "", updates1: 0}).setters({data: function(k, v){
this.$data.data = v;
this.$data.updates1++;
this.notify('updates1');
return true;
}}),
        MVApp = new ModelView.View('view', MVModel).autobind(false).livebind('$(__KEY__)').bind(['change'], document.getElementById('mvapp'));
    var MVclear = function(){ MVModel.set('data', "", true); };  
    var MVpush = function(){ MVModel.set('data', MVModel.$data.data+"OMGOMGOMG", true); };
    MVApp.sync( );
</script>


<!-- Angular -->
<div style="width: 200px; height: 300px; overflow: hidden" ng-app>
  Angular:
  <span  ng-controller="Ctrl" id="angList">
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
<span>{{numberofChanges1}}</span>
    AngularTestArea Data: {{data}} 
  </span>
</div>

<!-- Knockout -->
<div style="width: 200px; height: 300px; overflow: hidden" id="koapp">
  Knockout: 
  <span>
    KnockoutTestArea Subscriber Updates: <span data-bind="text: data"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
  </span>
</div>

<!-- ModelView -->
<div style="width: 200px; height: 300px; overflow: hidden" id="mvapp">
  ModelView: 
  <span>
    ModelViewTestArea Subscriber Updates: $(data)
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
<span>$(updates1)</span>
  </span>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
Angular 10
ANGclear();
for (var i = 0; i < 10; i++) {
  ANGpush();
}
ready
Knockout 10
KOclear();
for (var i = 0; i < 10; i++) {
  KOpush();
}
ready
ModelView 10
MVclear();
for (var i = 0; i < 10; i++) {
  MVpush();
}
ready
Angular 100
ANGclear();
for (var i = 0; i < 100; i++) {
  ANGpush();
}
ready
Knockout 100
KOclear();
for (var i = 0; i < 100; i++) {
  KOpush();
}
ready
ModelView 100
MVclear();
for (var i = 0; i < 100; i++) {
  MVpush();
}
ready
Angular 1000
ANGclear();
for (var i = 0; i < 1000; i++) {
  ANGpush();
}
ready
Knockout 1000
KOclear();
for (var i = 0; i < 1000; i++) {
  KOpush();
}
ready
ModelView 1000
MVclear();
for (var i = 0; i < 1000; i++) {
  MVpush();
}
ready

Revisions

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