jQuery vs Mithril vs React vs MagJS vs Ractive vs Native JS test (v23)

Revision 23 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/edge/ractive.js"></script>
  <script src="https://rawgit.com/magnumjs/mag.js/master/dist/mag.0.20.2.min.js"></script>
  <script src="https://cdn.rawgit.com/MaxArt2501/object-observe/master/dist/object-observe.min.js"></script>

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

<!-- MagJS -->
  <div id="tester">
    <div>
      <h1></h1>
      <form>
        <input>
      </form>
    </div>
  </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);
        };
    window.MagAppFactory = function() {
      var ma = {
        model: {
          name: mag.prop("mi World"),
          greeting: mag.prop("Hello ")
        },
        controller: function(props) {
          props.model = ma.model;
          props.model.greeting(props.model.greeting() + props.model.name());
        },
        view: function(state, props) {
          var o = props.model,
            id = Math.random();
          state.div = {
            _id: id
          }
    
          state.h1 = o.greeting()
          state.input = {
            _value: o.name()
          }
    
        }
      };
      return ma;
    };

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
MagJS
mag.module('tester', MagAppFactory())
ready

Revisions

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