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

Revision 24 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="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react-with-addons.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
jQuery
jqTest('#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
Native
nativeTest('test');
ready

Revisions

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