aLight: benchmark

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://angularlight.org/bin/alight_0.49b.min.js"></script>
<script src="http://yourjavascript.com/49224354211/basis-ui.js"></script>
<div id="menu">
    <div data-bind="visible: !processing()">
        <span>Row count:</span>
        <input type="text" data-bind="value: rowCount" />
        <button data-bind="click: jqBench">Start jquery bench</button>
        <button data-bind="click: ngBench">Start angular bench</button>
        <button data-bind="click: koBench">Start knockout bench</button>
        <button data-bind="click: alBench">Start aLight bench</button>
        <button data-bind="click: alBench2">Start aLight bench (inline)</button>
        <button data-bind="click: basisBench">Start basis.js bench</button>
    </div>
    <table class="results" border="1">
        <tr>
            <th></th>
            <th>filling</th>
            <th>updating</th>
        </tr>
        <tr>
            <th>jquery</th>
            <td><span data-bind="text: results.jqFill"></span> ms</td>
            <td><span data-bind="text: results.jqUpdate"></span> ms</td>
        </tr>
        <tr>
            <th>angular</th>
            <td><span data-bind="text: results.ngFill"></span> ms</td>
            <td><span data-bind="text: results.ngUpdate"></span> ms</td>
        </tr>
        <tr>
            <th>knockout</th>
            <td><span data-bind="text: results.koFill"></span> ms</td>
            <td><span data-bind="text: results.koUpdate"></span> ms</td>
        </tr>
        <tr>
            <th>aLight</th>
            <td><span data-bind="text: results.alFill"></span> ms</td>
            <td><span data-bind="text: results.alUpdate"></span> ms</td>
        </tr>
        <tr>
            <th>aLight (inline)</th>
            <td><span data-bind="text: results.alFill2"></span> ms</td>
   ...

JavaScript

'use strict';

////////////////////

basis.require('basis.ui');
var basisList = new basis.ui.Node({
    container: document.getElementById('al-list').parentNode,
    template: '<ul/>',
    childClass: {
        template: '<li>basis.ui: {val}</li>',
        binding: {
            val: 'val'
        }
    }
});

function basisFill(n, callback){
    basisList.setChildNodes(basis.array.create(n, function(idx){
        return {
            val: idx + 1
        };
    }));
    
    setTimeout(callback, 0);
}

function basisUpdate(n, callback){
    basisList.childNodes.forEach(function(node){
        node.val += ' ' + node.val;
        node.updateBind('val');
    });
    
    setTimeout(callback, 0);
}

function basisClear(callback){
    basisList.clear();
    
    setTimeout(callback, 0);
}

////////////////////

function jqFill(n) {
    var i, li,
    ul = $("#jq-list");
    for (i = 0; i < n; i += 1) {
        li = '<li>jq: <span data-id="' + i + '">' + i + '</span></li>';
        ul.append(li);
    }
}

function jqUpdate(n) {
    var i, el,
    ul = $("#jq-list");
    for (i = 0; i < n; i += 1) {
        el = ul.find('span[data-id="' + i + '"]');
        el.html(el.html() + ' ' + i);
    }
}

function KoApp() {
    var self = this;
    self.items = ko.observableArray([]);
    self.fill = function (n, callback) {
        var i,
        items = self.items();
        for (i = 0; i < n; i += 1) {
            items.push({
                val: ko.observable(i)
            });
        }
        self.items.valueHasMutated();
        setTimeout(function () {
            callback();
        }, 0);
    };
    self.update = function (n, callback) {
        var i;
        ko.utils.arrayForEach(self.items(), function (item) {
            item.val(item.val() + ' ' + item.val());
        });
        setTimeout(function () {
            callback();
        }, 0);
    };
    self.clear = function (callback) {
        self.items([]);
        setTimeout(function () {
           ...