JSFiddle - React, Tailwind, and code Playground

by krisselden

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars">
  {{#view Em.Button target="App.data" action="update"}}Update with Ember.js{{/view}}
  {{#view Em.Button target="App.data" action="fastUpdate"}}Update with plain jQuery{{/view}}
</script>
  <hr/>
<script type="text/x-handlebars">
  <table>        
    <thead>
    <th>ID</th>
    <th>Date</th>
    <th>Tag</th>
    <th>Speed</th>
    <th>Length</th>
    </thead>
    <tbody>
    {{#each App.data}}
       <tr>
        <td>{{unbound id}}</td>
        <td>{{unbound dateIn}}</td>
        <td>{{unbound tag}}</td>
        <td>{{unbound speed}}</td>
        <td>{{unbound length}}</td>
      </tr>
    {{/each}}
    </tbody>
  </table>
</script>

<table id="fast-data">
  <thead>
    <th>ID</th>
    <th>Date</th>
    <th>Tag</th>
    <th>Speed</th>
    <th>Length</th>
  </thead>
  <tbody>
  </tbody>
</table>

CSS

html, body, td, th { font-size:4px; }
th { font-weight:bold; }
table { width:250px; float:left; }
#fast-data { border-left:2px solid #ff0000; }

JavaScript

App = Em.Application.create();

App.data = Em.ArrayController.create({
    content: [],

    update: function() {
      console.profile();
      var start = new Date();
      this.set("content", this.newContent());
      console.log('update: '+((new Date()) - start));
      console.profileEnd();
    },
    
    fastUpdate: function() {
      var start = new Date();
      var $tbody = $("#fast-data > tbody"),
        newContent = this.newContent();
        
      $tbody.empty();
      $tbody.detach();
        
      var buffer = [];

      for (var i = 0; i < newContent.length; i++) {
        buffer.push("<tr>");
        buffer.push("<td>" + newContent[i].id     + "</td>");
        buffer.push("<td>" + newContent[i].dateIn + "</td>");
        buffer.push("<td>" + newContent[i].tag    + "</td>");
        buffer.push("<td>" + newContent[i].speed  + "</td>");
        buffer.push("<td>" + newContent[i].length + "</td>");
        buffer.push('</tr>');
      }
      $tbody.html(buffer.join(''));
      $tbody.appendTo('#fast-data');
      console.log('fastUpdate: '+((new Date()) - start));
    },
    
    newContent: function() {
      var newContent = [], i;
        
      for (i = 0; i < 100; i++) {
        newContent[newContent.length] = {
          id: Math.round(Math.random() * 1000),
          dateIn: new Date(),
          tag: "TAG-0" + i,
          speed: Math.random() * 100,
          length: Math.random() * 1000
        };
      }
    
      return newContent;
    }
  });