polymer vs react update (v12)

Revision 12 of this benchmark created on

Preparation HTML

<script>
if( !('registerElement' in document &&
      'import'          in document.createElement('link') &&
      'content'         in document.createElement('template'))){
        document.write('<script src="https://rawgit.com/webcomponents/webcomponentsjs/0.7.0/webcomponents-lite.js"><\/script>');
}
  </script>
  <link href="//cdn.rawgit.com/Polymer/polymer/v1.0.2/polymer.html" rel="import">
  <script src="https://fb.me/react-0.13.3.min.js"></script>
  
  
  <dom-module id='my-polymer-el'>
    <template>Polymer <span>[[text]]</span></template>
  </dom-module>
  <script>
    Polymer({
      is:'my-polymer-el',
      properties:{
        text:{type:String}
      }
    });
  </script>

  <my-polymer-el id='myPolymerEl'></my-polymer-el>

  <div id='reactContainer'></div>

<script>
myPolymerEl.text = 'init';

var MyReactEl = React.createClass({
  render:function(){
    return React.createElement('span', null, 'ReactJS '+this.props.text);
  }
});

React.render(
  React.createElement(MyReactEl, {text:'init'}),
  reactContainer
);
var items = [];
for(var i=0; i<100; i++){
  items.push(i);
}

for(var i=0; i<items.length; i++){
  myPolymerEl.text = 'test'+items[i];
}

for(var i=0; i<items.length; i++){
  React.render(
    React.createElement(MyReactEl, {key:items[i],text:'test'+items[i]}),
    reactContainer
  );
}
items.sort(function() {
  return .5 - Math.random();
});
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Polymer
for(var i=0; i<items.length; i++){
  myPolymerEl.text = 'test'+i;
}
ready
React
for(var i=0; i<items.length; i++){
  React.render(
    React.createElement(MyReactEl, {key:items[i],text:'test'+i}),
    reactContainer
  );
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.