cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(benchmarks): add polymer js 0.8-preview benchmark

Browse Source 
Limitations because of preview status (see #960):

- does not yet use ShadowDOM
- does not use a builtin conditional like `if`
- uses a temporary bower repository

Closes #943
This commit is contained in:
Jacob MacDonald
2015-02-25 07:45:51 -08:00
committed by Tobias Bosch
parent 21a293b017
commit a963ae48e5
12 changed files with 168 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
modules/benchmarks_external/src/tree/polymer/binary_tree.html Normal file
View File

@ -0,0 +1,43 @@
<link rel="import" href="polymer.html">
<dom-module id="binary-tree">
<template>
<span>
<span>{{data.value}}</span>
<!-- TODO(tbosch): use the builtin conditional template when it is available in Polymer 0.8 -->
<span id="leftTree"></span>
<span id="rightTree"></span>
</span>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'binary-tree',
properties: {
data: Object
},
leftTree: null,
rightTree: null,
dataChanged: function() {
var data = this.data || {};
this._updateTree(data.left, 'leftTree');
this._updateTree(data.right, 'rightTree');
},
_updateTree: function(data, treeName) {
if (data) {
if (!this[treeName]) {
this[treeName] = document.createElement('binary-tree');
}
this[treeName].data = data;
this.$[treeName].appendChild(this[treeName]);
} else {
if (this[treeName]) this[treeName].remove();
this[treeName] = null;
}
},
bind: {
data: 'dataChanged'
}
});
})();
</script>

28
modules/benchmarks_external/src/tree/polymer/index.html Normal file
View File

@ -0,0 +1,28 @@
<!doctype html>
<html>
<head>
<link rel="import" href="root_tree.html">
</head>
<body>
<h2>TODO</h2>
<ul>
<li>TODO: Does not use shadow DOM</li>
<li>TODO: Does not yet use builtin `if` construct as it uses a preview version of Polymer</li>
</ul
<h2>Params</h2>
<form>
Depth:
<input type="number" name="depth" placeholder="depth" value="9">
<br>
<button>Apply</button>
</form>
<h2>Polymer JS 0.8-preview tree benchmark</h2>
<root-tree></root-tree>
$SCRIPTS$
</body>
</html>

49
modules/benchmarks_external/src/tree/polymer/root_tree.html Normal file
View File

@ -0,0 +1,49 @@
<link rel="import" href="polymer.html">
<link rel="import" href="binary_tree.html">
<dom-module id="root-tree">
<template>
<div>
<button on-click="create" id="createDom">createDom</button>
<button on-click="destroy" id="destroyDom">destroyDom</button>
</div>
<div>
<binary-tree data="[[data]]"></binary-tree>
</div>
</template>
</dom-module>
<script type="application/javascript">
(function() {
var count = 0;
var depthInput = document.querySelector('input[name=depth]');
var match = /depth=(\w+)/.exec(decodeURIComponent(location.search));
if (match) {
depthInput.value = match[1];
}
var maxDepth = depthInput.valueAsNumber;
Polymer({
is: 'root-tree',
properties: {
data: Object
},
create: function() {
var values = count++ % 2 == 0 ?
['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] :
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-'];
this.data = this.buildTree(maxDepth, values, 0);
},
destroy: function() {
this.data = null;
},
buildTree: function(maxDepth, values, curDepth) {
if (maxDepth == curDepth) return {value: '', left: null, right: null};
return {
value: values[curDepth],
left: this.buildTree(maxDepth, values, curDepth+1),
right: this.buildTree(maxDepth, values, curDepth+1)
};
}
});
})();
</script>