JS React vs Opal React

Benchmark created on


Preparation HTML

<script src="//mario.net.au/f/opal-react-test.js"></script>
<script src="//cdn.opalrb.org/opal/current/opal-parser.js"></script>

<div id='test'></div>

Test runner

Ready to run.

Testing in
TestOps/sec
JS React
TestDiv = React.createClass({
  render: function() {
    return React.createElement("div", {}, this.state.text)
  },
  getInitialState: function() {
    return { text: 'Hello World!' }
  }
});

React.render(
  React.createElement(TestDiv),
  document.getElementById('test')
);
ready
Ruby Precompiled
/* Generated by Opal 0.6.0 */
(function($opal) {
  var $a, self = $opal.top, $scope = $opal, nil = $opal.nil, $breaker = $opal.breaker, $slice = $opal.slice, $klass = $opal.klass, $hash2 = $opal.hash2, $gvars = $opal.gvars;
  $opal.add_stubs(['$createElement', '$text', '$state', '$this', '$render', '$new', '$[]']);
  ;
  ;
  ;
  (function($base, $super) {
    function $TestDiv(){};
    var self = $TestDiv = $klass($base, $super, 'TestDiv', $TestDiv);

    var def = self._proto, $scope = self._scope;
    def.$render = function() {
      var $a, self = this;
      return (($a = $scope.React) == null ? $opal.cm('React') : $a).$createElement("div", $hash2([], {}), self.$this().$state().$text());
    };

    return (def.$getInitialState = function() {
      var self = this;
      return $hash2(["text"], {"text": "Hello Opal!"});
    }, nil);
  })(self, (($a = $scope.ReactClass) == null ? $opal.cm('ReactClass') : $a));
  return (($a = $scope.React) == null ? $opal.cm('React') : $a).$render((($a = $scope.React) == null ? $opal.cm('React') : $a).$createElement((($a = $scope.TestDiv) == null ? $opal.cm('TestDiv') : $a).$new()), $gvars["document"]['$[]']("test"));
})(Opal);
ready
Ruby Compile
ruby = function () {/*
  class TestDiv < ReactClass
    def render
      React.createElement("div", {}, this.state.text)
    end
    def getInitialState
      { text: 'Hello Opal!' }
    end
  end

  React.render(
    React.createElement(TestDiv.new),
    $document['test']
  )
*/}
Opal.compile(
  ruby.toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1]
);
ready

Revisions

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