JSFiddle - React, Tailwind, and code Playground

by garnwraly

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://rawgit.com/yyx990803/vue/aca258e57602ff3466b9d3513c5bb7bf8fb08479/dist/vue.min.js"></script>
<button onclick="reset()">Stop</button>
<button onclick="runVue()">Animate with Vue</button>
<p id="timing">&nbsp;</p>
<p id="timing500">&nbsp;</p>

<div id="grid"></div>

CSS

p {
  font: 12px/16px Arial;
  margin: 10px 10px 15px;    
}

button {
  font: bold 14px/14px Arial;  
  margin-left: 10px;
}

#grid {
  margin: 10px;
}

#timing {
  clear: both;
  padding-top: 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;
}

JavaScript

var N = 100;

// The Vue implementation:
(function(){
    
    var Box = Vue.extend({
        id: 'box',
        template: '<div class="box-view"><div class="box" id="{{number}}" style="{{style}}"> {{content}}</div></div>',
        replace: false,
        data: function () {
            return {
                number: 0,
                count: 0,
                top: 0,
                left: 0,
                bg: 0,
                content: ''
            };
        },
        methods: {
            tick: function () {
                var c = ++this.count
                this.top = Math.sin(c / 10) * 10
                this.left = Math.cos(c / 10) * 10
                this.bg = c % 255
                this.content = c % 100
            }
        },
        computed: {
            style: function () {
                return 'top:' + this.top + 'px;' +
                    'left: ' + this.left + 'px;' +
                    'background-color: rgb(0,0,' + this.bg + ')'
            }
        }
    })

    var boxes = [];
    
    var vueInit = function() {
        boxes.forEach(function (box) {
            box.$destroy();
        });
        boxes = _.map(_.range(N), function(i) {
            var box = new Box({
                el: document.createDocumentFragment(),
                data: {
                    number: i
                }
            })
            box.$appendTo('#grid')
            return box
        });
    };
    
    var vueAnimate = function() {
        _.invoke(boxes, 'tick');
    };

    window.runVue = function() {
      reset();
      vueInit();
      setTimeout(function () {
          startClock();
          benchmarkLoop(vueAnimate);
      }, 300);
    };

})();

window.timeout = null;
window.totalTime = null;
window.loopCount = null;
window.startDate = null;
window.reset = function() {
    $('#grid').empty();
    $('#timing').html('&nbsp;');
    $('#timing500').html('&nbsp;');
    clearTimeout(timeout);
    startDate =...