JSFiddle - React, Tailwind, and code Playground

by azer

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>

<script src="https://raw.github.com/azer/ada/master/ada.min.js"></script>
<script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>


<p>
    This is the <a href="http://github.com/azer/ada">ada</a> fork of <a href="http://jsfiddle.net/krisselden/bYPPT/">Backbone and Ember benchmark</a>.
</p>

<p>
    This script uses the latest Ada, Backbone.js and Ember.js to animate <b>250 circles</b> (or more -- change "N" in the JavaScript), so that you can see the responsiveness after you click the button, and visualize the speed difference.
</p>

<button onclick="runAda()">Animate with Ada</button>
<button onclick="runBackbone()">Animate with Backbone</button>
<button onclick="runEmber()">Animate with Ember</button>


<div class="inits">
    <h4>Initialization</h4>
    <div class="init" id="ada-init"><strong>Ada:</strong><span>?ms</span></div>
    <div class="init" id="backbone-init"><strong>Backbone:</strong><span>?ms</span></div>
    <div class="init" id="ember-init"><strong>Ember:</strong><span>?ms</span></div>
</div>
    
<div id="grid"></div>

<script type="x-template" id="underscore-template">
  <div class="box" id="box-<%= number %>" style="top: <%= top %>px; left: <%= left %>px; background: rgb(0,0,<%= color %>);">
    <%= content %>       
  </div>
</script>
        
<script type="text/x-handlebars" id="handlebars-template" data-template-name="box">
    <div class="box" {{bindAttr id="model.number" style="model.style"}}>
      {{ model.content }}       
    </div>
</script>
        
<script type="text/x-template" id="mustache-template" data-template-name="box">
   <div class="box" id="box-{{number}} %>" style="top: {{top}}px; left: {{left}}px; background: rgb(0,0,{{color}});">
      {{content}}       
    </div>
</script>

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;
}   


.inits { text-align:center; background:#f2f2f2; padding:5px; }
.inits h4 { font-weight:bold; color:darkred; }
.init { display:inline;  margin-right: 20px;  }
.init strong { font-weight:bold }
.init span { padding-left: 3px }

JavaScript

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

var N = 250;

// The Ak47 implementation
(function(){

    function Box(options){
        var count = 0;
        
        var model = ada({
            number: options.number,
            top: 0,
            left: 0,
            color: 0,
            content: 0
        });
        
        model.tick = function(){
            count++;
            
            model.top(Math.sin(count / 10) * 10);
            model.left(Math.cos(count / 10) * 10);
            model.color((count) % 255);
            model.content(count % 100);       
        }
                
        return model;
    }
                
    function BoxView(model){
        var view = {
          'el': $("<div class='box-view'>"),
          'template': Hogan.compile($('#mustache-template').html())
        };

        ada(model.top, model.left, model.color, model.content, function(top, left, color, content){
            view.el.html(view.template.render({ top:top, left:left, color:color, content:content }));              
        });
      
        return view;
    }
    
    var boxes;

    var adaInit = function() {
        boxes = _.map(_.range(N), function(i) {
            var box = Box(i);
            var view = BoxView(box);
            view.el.appendTo('#grid');
     
            return box;
        });
    };

    var adaAnimate = function() {
        for (var i = 0, l = boxes.length; i < l; i++) {
          boxes[i].tick();   
        }

        window.timeout = _.defer(adaAnimate);
    };
    
    window.runAda = function() {
      reset();
      init('ada', adaInit);
      adaAnimate();    
    };
    
}());

// The Backbone implementation:
(function(){
    
var Box = Backbone.Model.extend({

    defaults: {
        top: 0,
        left: 0,
        color: 0,
        content: 0
    },
    
    initialize: function() {
        this.count = 0;
    },

    tick: function() {
        var count = this.count += 1;
        this.set({
           ...