vjeux

var PanelList = React.createClass({

  // lots of stuff that front-end engineer is working on

  render: function() {
    
    // ...
    
    return (
      <div>

vjeux

# Basic
 
Initial rendering takes ~25ms
Delete first takes ~30ms
Delete last takes ~15ms
 
Add `background: red` to the second element and delete the first, you'll
see that the second element is still red. What happened is that everything
moved around. The reason is that React doesn’t do the matching properly.
 

vjeux

# Basic

Initial rendering takes ~25ms
Delete first takes ~30ms
Delete last takes ~15ms

Add `background: red` to the second element and delete the first, you'll see that the second element is still red. What happened is that everything moved around. The reason is that React doesn’t do the matching properly.

http://jsfiddle.net/vjeux/tXfDU/

vjeux

Number
Math
unescape
Object
Array
escape
Float32Array
Date
location
Int8Array

vjeux

Number
Math
unescape
Object
Array
escape
Float32Array
Date
location
Int8Array

vjeux

VanillaJS/TodoMVC/Adding200Items/Sync : 5002.175000030547 ms
VanillaJS/TodoMVC/Adding200Items/Async : 64.64699999196455 ms
VanillaJS/TodoMVC/CompletingAllItems/Sync : 286.41600004630163 ms
VanillaJS/TodoMVC/CompletingAllItems/Async : 43.01500000292435 ms
VanillaJS/TodoMVC/DeletingAllItems/Sync : 154.2450000415556 ms
VanillaJS/TodoMVC/DeletingAllItems/Async : 16.42500003799796 ms
VanillaJS/TodoMVC : 5566.9230001512915 ms
EmberJS/TodoMVC/Adding200Items/Sync : 3007.562000013422 ms
EmberJS/TodoMVC/Adding200Items/Async : 14.114000019617379 ms
EmberJS/TodoMVC/CompletingAllItems/Sync : 1544.2519999924116 ms

vjeux

Chrome 30 - Macbook Pro

BackboneJS : 1757 ms
React : 2554 ms
AngularJS-perf : 3400 ms
AngularJS : 3922 ms
VanillaJS : 5578 ms
EmberJS : 6865 ms
jQuery : 14426 ms

vjeux

Parse.initialize(
  "4wSiyq4hMhOd3BrGxxrNs9cliTLQWr6YnrJeJfuL",
  "ku1kcuy0opmH4R8zWTlWwMYEtibAqdv3AOrdm0Eu"
);

vjeux

/** @jsx React.DOM */

var Hello = React.createClass({
    mixins: [LinkedStateMixin],
    getInitialState: function() {
        return {name: 'phunt'};
    },
    render: function() {
        return (
          <div>

vjeux

/*! URI.js v1.11.2 http://medialize.github.com/URI.js/ */
/* build contains: IPv6.js, punycode.js, SecondLevelDomains.js, URI.js */
(function(f,l){"object"===typeof exports?module.exports=l():"function"===typeof define&&define.amd?define(l):f.IPv6=l(f)})(this,function(f){var l=f&&f.IPv6;return{best:function(g){g=g.toLowerCase().split(":");var k=g.length,d=8;""===g[0]&&""===g[1]&&""===g[2]?(g.shift(),g.shift()):""===g[0]&&""===g[1]?g.shift():""===g[k-1]&&""===g[k-2]&&g.pop();k=g.length;-1!==g[k-1].indexOf(".")&&(d=7);var m;for(m=0;m<k&&""!==g[m];m++);if(m<d)for(g.splice(m,1,"0000");g.length<d;)g.splice(m,0,"0000");for(m=0;m<d;m++){for(var k=
g[m].split(""),f=0;3>f;f++)if("0"===k[0]&&1<k.length)k.splice(0,1);else break;g[m]=k.join("")}var k=-1,l=f=0,u=-1,A=!1;for(m=0;m<d;m++)A?"0"===g[m]?l+=1:(A=!1,l>f&&(k=u,f=l)):"0"==g[m]&&(A=!0,u=m,l=1);l>f&&(k=u,f=l);1<f&&g.splice(k,f,"");k=g.length;d="";""===g[0]&&(beststr=":");for(m=0;m<k;m++){d+=g[m];if(m===k-1)break;d+=":"}""===g[k-1]&&(d+=":");return d},noConflict:func