polymer vs react update (v3)

Revision 3 of this benchmark created on


Preparation HTML

<script>
if( true || !('registerElement' in document &&
      'import'          in document.createElement('link') &&
      'content'         in document.createElement('template'))){
        document.write('<script src="http://rawgit.com/webcomponents/webcomponentsjs/0.5.5/webcomponents-lite.js"><\/script>');
}
  </script>
  <script src="https://rawgit.com/peterwmwong/polymer/0.8-preview-pwwx/dist/polymer-csp.js"></script>
  <script src="http://dragon.ak.fbcdn.net/hphotos-ak-xfa1/t39.3284-6/11057105_812918198743996_1292411012_n.js"></script>
  
  
  <dom-module id='my-polymer-el'>
    <template>Polymer <span>{{text}}</span></template>
  </dom-module>
  <script>
    Polymer({
      is:'my-polymer-el',
      properties:{
        text:String
      }
    });
  </script>

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

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

<script>

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

React.render(
  React.createElement(MyReactEl, {text:'init'}),
  reactContainer
);
</script>

Test runner

Ready to run.

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

Revisions

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