jQuery vs Mithril vs React vs Ractive vs Native JS test (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="https://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mithril/0.1.19/mithril.min.js"></script>
<script src="http://fb.me/react-with-addons-0.8.0.min.js"></script>
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>

<div id="test"></div>

Setup

window.jqTest = function(selector){
        var $o = $(selector), id = Math.random(); 
        $o.append("<div id='"+id+"'><h1 id='helloHeader'></h1><form><input type='text' id='name' name='name' value='jq World'/></form></div> ");
        $o.find('#helloHeader').html("Hello " + $o.find("input[name=name]").val());
  
      };
  
      //  Create React class once only
      var H1React = React.createClass({displayName: 'HeaderComponent',
        render: function() {
          return React.DOM.h1(null, this.props.greeting);
        }
      });
      window.HelloReact = React.createClass({
          getInitialState: function() {
            return {greeting: ''};
          },
          setGreeting: function(name) {
            this.setState({greeting: "Hello " + name});
          },
          componentDidMount: function() {
            this.setGreeting(this.props.greet);
          },
          render: function() {
            var id = Math.random(); 
            return React.DOM.div({id:id}, 
              H1React({ greeting: this.state.greeting}), 
              React.DOM.form({}, 
                React.DOM.input({id:"name", name:"name", value: this.props.greet})
              ));
          }
      });
  
      //  Create Ractive once only as well
      window.RactiveComponent = Ractive.extend({
        template: "<div id='{{id}}'><h1 id='helloHeader'>{{greeting}}</h1> <form> <input type='text' id='name' name='name' value='{{name}}'/> </form></div>",
        data: {
          name: "ra World"
        },
        computed: {
          greeting: {
            get: function () {
              return "Hello " + this.get('name');
            }
          },
          id: {
            get: function(){
              return Math.random(); 
            }
          }
        }
      });
  
      Ractive.components.ractivecomponent = RactiveComponent;
  
      //  Create a mithril app
      //  
  
      window.MithrilAppFactory = function(){
        var ma = {
          model: {
            name: m.prop("mi World"),
            greeting: m.prop("Hello ")
          },
          controller: function() {
            this.model = ma.model;
            this.model.greeting(this.model.greeting() + this.model.name());
          },
          view: function(data) {
            var o = data.model, id = Math.random();
            return [
              m("div", {id:id}, [
                m("h1",o.greeting()),
                m("form", [
                  m("input",{value: o.name()})
                ])
              ])
            ];
          }
        };
        return ma;
      };
  
      window.nativeTest = function(id){
        var rid = Math.random(),
          target = document.getElementById(id),
          d1 = document.createElement("DIV"),
          h1  = document.createElement("H1"),
          form = document.createElement("FORM"),
          input = document.createElement("INPUT");
  
          d1.setAttribute('id', rid);
  
          input.setAttribute("name", "name");
          input.setAttribute("value", "na World");
          input.setAttribute("type", "text");
  
          h1.innerHTML = "Hello ";
  
          d1.appendChild(h1);
          d1.appendChild(form);
          d1.appendChild(input);
  
          h1.innerHTML = h1.innerHTML + input.getAttribute('value');
  
         target.innerHTML = "";
         target.appendChild(d1);
      };

Teardown



            $("#test").empty()

Test runner

Ready to run.

Testing in
TestOps/sec
Native
nativeTest('test');
ready
React
React.renderComponent(HelloReact({greet: 're World'}), document.getElementById('test'));
ready
Ractive
new Ractive({
  el: document.getElementById('test'),
  template: "<ractivecomponent/>"
});
ready
Mithril
m.module(document.getElementById("test"), MithrilAppFactory());
ready
jQuery
jqTest('#test');
ready

Revisions

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