Skip to content

Commit a963ae4

Browse files
jakemac53tbosch
jakemac53
authored and
tbosch
committed
feat(benchmarks): add polymer js 0.8-preview benchmark
Limitations because of preview status (see angular#960): - does not yet use ShadowDOM - does not use a builtin conditional like `if` - uses a temporary bower repository Closes angular#943
1 parent 21a293b commit a963ae4

File tree

12 files changed

+168
-4
lines changed

12 files changed

+168
-4
lines changed

‎.bowerrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"directory": "bower_components/"
3+
}

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
packages/
44
.buildlog
55
node_modules
6+
bower_components
67
.pub
78
.DS_STORE
89

‎bower.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"name": "angular2",
3+
"version": "0.0.0",
4+
"dependencies": {
5+
"polymer": "dart-lang/polymer_js#0.8.0-preview"
6+
}
7+
}

‎gulpfile.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,12 @@ var CONFIG = {
215215
[
216216
{ src: 'node_modules/angular/angular.js', mimeType: 'text/javascript', copy: true },
217217
{ src: 'tools/build/snippets/url_params_to_form.js', mimeType: 'text/javascript', copy: true }
218-
].concat(_HTML_DEFAULT_SCRIPTS_JS)
218+
].concat(_HTML_DEFAULT_SCRIPTS_JS),
219+
'benchmarks_external/**/*polymer*/**':
220+
[
221+
{ src: 'bower_components/polymer/lib/polymer.html', copyOnly: true },
222+
{ src: 'tools/build/snippets/url_params_to_form.js', mimeType: 'text/javascript', copy: true }
223+
]
219224
},
220225
dart: {
221226
'**': _HTML_DEFAULT_SCRIPTS_DART,

‎modules/benchmarks_external/e2e_test/polymer_tree_perf.es6‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
var perfUtil = require('angular2/src/test_lib/perf_util');
2+
3+
describe('polymer tree benchmark', function () {
4+
5+
var URL = 'benchmarks_external/src/tree/polymer/index.html';
6+
7+
afterEach(perfUtil.verifyNoBrowserErrors);
8+
9+
it('should log the stats', function(done) {
10+
perfUtil.runClickBenchmark({
11+
url: URL,
12+
buttons: ['#destroyDom', '#createDom'],
13+
id: 'polymer.tree',
14+
params: [{
15+
name: 'depth', value: 9, scale: 'log2'
16+
}]
17+
}).then(done, done.fail);
18+
});
19+
20+
});

‎modules/benchmarks_external/src/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
<li>
99
<a href="tree/tree_benchmark.html">Tree benchmark</a>
1010
</li>
11+
<li>
12+
<a href="tree/polymer/index.html">Polymer Tree benchmark</a>
13+
</li>
1114
<li>
1215
<a href="largetable/largetable_benchmark.html">Largetable benchmark</a>
1316
</li>

‎modules/benchmarks_external/src/tree/polymer/binary_tree.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<link rel="import" href="polymer.html">
2+
<dom-module id="binary-tree">
3+
<template>
4+
<span>
5+
<span>{{data.value}}</span>
6+
<!-- TODO(tbosch): use the builtin conditional template when it is available in Polymer 0.8 -->
7+
<span id="leftTree"></span>
8+
<span id="rightTree"></span>
9+
</span>
10+
</template>
11+
</dom-module>
12+
<script>
13+
(function() {
14+
Polymer({
15+
is: 'binary-tree',
16+
properties: {
17+
data: Object
18+
},
19+
leftTree: null,
20+
rightTree: null,
21+
dataChanged: function() {
22+
var data = this.data || {};
23+
this._updateTree(data.left, 'leftTree');
24+
this._updateTree(data.right, 'rightTree');
25+
},
26+
_updateTree: function(data, treeName) {
27+
if (data) {
28+
if (!this[treeName]) {
29+
this[treeName] = document.createElement('binary-tree');
30+
}
31+
this[treeName].data = data;
32+
this.$[treeName].appendChild(this[treeName]);
33+
} else {
34+
if (this[treeName]) this[treeName].remove();
35+
this[treeName] = null;
36+
}
37+
},
38+
bind: {
39+
data: 'dataChanged'
40+
}
41+
});
42+
})();
43+
</script>

‎modules/benchmarks_external/src/tree/polymer/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<link rel="import" href="root_tree.html">
5+
</head>
6+
<body>
7+
8+
<h2>TODO</h2>
9+
<ul>
10+
<li>TODO: Does not use shadow DOM</li>
11+
<li>TODO: Does not yet use builtin `if` construct as it uses a preview version of Polymer</li>
12+
</ul
13+
14+
<h2>Params</h2>
15+
<form>
16+
Depth:
17+
<input type="number" name="depth" placeholder="depth" value="9">
18+
<br>
19+
<button>Apply</button>
20+
</form>
21+
22+
<h2>Polymer JS 0.8-preview tree benchmark</h2>
23+
<root-tree></root-tree>
24+
25+
$SCRIPTS$
26+
27+
</body>
28+
</html>

‎modules/benchmarks_external/src/tree/polymer/root_tree.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<link rel="import" href="polymer.html">
2+
<link rel="import" href="binary_tree.html">
3+
4+
<dom-module id="root-tree">
5+
<template>
6+
<div>
7+
<button on-click="create" id="createDom">createDom</button>
8+
<button on-click="destroy" id="destroyDom">destroyDom</button>
9+
</div>
10+
<div>
11+
<binary-tree data="[[data]]"></binary-tree>
12+
</div>
13+
</template>
14+
</dom-module>
15+
<script type="application/javascript">
16+
(function() {
17+
var count = 0;
18+
var depthInput = document.querySelector('input[name=depth]');
19+
var match = /depth=(\w+)/.exec(decodeURIComponent(location.search));
20+
if (match) {
21+
depthInput.value = match[1];
22+
}
23+
var maxDepth = depthInput.valueAsNumber;
24+
Polymer({
25+
is: 'root-tree',
26+
properties: {
27+
data: Object
28+
},
29+
create: function() {
30+
var values = count++ % 2 == 0 ?
31+
['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*'] :
32+
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', '-'];
33+
34+
this.data = this.buildTree(maxDepth, values, 0);
35+
},
36+
destroy: function() {
37+
this.data = null;
38+
},
39+
buildTree: function(maxDepth, values, curDepth) {
40+
if (maxDepth == curDepth) return {value: '', left: null, right: null};
41+
return {
42+
value: values[curDepth],
43+
left: this.buildTree(maxDepth, values, curDepth+1),
44+
right: this.buildTree(maxDepth, values, curDepth+1)
45+
};
46+
}
47+
});
48+
})();
49+
</script>

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"url": "https://github.com/angular/angular.git"
2121
},
2222
"scripts": {
23-
"test": "echo \"Error: no test specified\" && exit 1"
23+
"test": "echo \"Error: no test specified\" && exit 1",
24+
"postinstall": "./node_modules/.bin/bower install"
2425
},
2526
"dependencies": {
2627
"es6-module-loader": "^0.9.2",

0 commit comments

Comments
 (0)