Handlebars VS Polymer/mdv (v20)

Revision 20 of this benchmark created by Kaleb on

Description

Polymer project has setup a project arround a polyfill waiting for a native implementation of MDV... This project is really young, but deserve to be tested.

Preparation HTML

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>

<!-- For Polymer/MDV -->
<script src="//rawgithub.com/Polymer/observe-js/master/src/observe.js"></script>
<script src="//rawgithub.com/Polymer/TemplateBinding/master/src/TemplateBinding.js"></script>

<template bind="{{ data }}" id="test">
  <ul>
    <template repeat="{{ salutations }}">
      <li class="{{classType}}">{{ what }}: <input type="text" value="{{ who }}"></li>
    </template>
  </ul>
</template>

<script>
console.log(-1);
var mdvTemplate = document.getElementById('test');
mdvTemplate.model = {};

var templateHb = "<ul>{{#salutations}}<li class=\"{{classType}}\">{{what}}: <input type=\"text\" value=\"{{who}}\"></li>{{/salutations}}</ul>";

var compiledHandlebars = Handlebars.compile(templateHb);
console.log(0);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Polymer
// async test
console.log(deferred);
debugger;
mdvTemplate.model.data = {
  salutations: [
    { what: 'Hello', who: 'World', classType: 'foo' },
    { what: 'GoodBye', who: 'DOM APIs', classType: 'foo' },
    { what: 'Hello', who: 'Declarative', classType: 'foo' },
    { what: 'GoodBye', who: 'Imperative', get classType() {
        console.log('get');
        deferred.resolve();
        return 'foo';
    }}
  ]
};
 
ready
Handlebars.js (uncompiled)
console.log(2);
var compiledTemplate = Handlebars.compile(templateHb);
compiledTemplate({
  salutations: [
    { what: 'Hello', who: 'World', classType: 'foo' },
    { what: 'GoodBye', who: 'DOM APIs', classType: 'foo' },
    { what: 'Hello', who: 'Declarative', classType: 'foo' },
    { what: 'GoodBye', who: 'Imperative', classType: 'foo' }
  ]
});
ready
Handlebars.js (compiled)
console.log(3);
compiledHandlebars({
  salutations: [
    { what: 'Hello', who: 'World', classType: 'foo' },
    { what: 'GoodBye', who: 'DOM APIs', classType: 'foo' },
    { what: 'Hello', who: 'Declarative', classType: 'foo' },
    { what: 'GoodBye', who: 'Imperative', classType: 'foo' }
  ]
});
ready

Revisions

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