JSFiddle - React, Tailwind, and code Playground

by imbolc

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>
<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>
    </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>
    </table>
</div>
<ul id="jq-list"></ul>
<ul id="ko-list" data-bind="foreach: items">
    <li>ko: <span data-bind="text: val"></span></li>
</ul>
<ul id="ng-list" ng-app="list" ng-controller="ListCtrl">
    <li ng-repeat="item in items">ng: <span ng-bind="item"></span></li>
</ul>

JavaScript

'use strict';

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 () {
            callback();
        }, 0);
    };
}
var koApp = new KoApp();

var ngApp = angular.module('list', []);
ngApp.controller('ListCtrl', ['$scope', function ($scope) {
    $scope.items = [];
    $scope.fill = function (n) {
        var i;
        for (i = 0; i < n; i += 1) {
            $scope.items.push(i);
        }
    };
    $scope.update = function (n) {
        var i,
        items = $scope.items;
        for (i = 0; i < n; i += 1) {
            items[i] += ' ' + items[i];
        }
    };
}]);
ngApp.fill = function (n, callback) {
    var scope = angular.element($('#ng-list')).scope();
    scope.$apply(function () {
        scope.fill(n);
    });
    setTimeout(function () {
        callback();
    }, 0);
};
ngApp.update = function (n, callback) {
    var scope =...