feat(benchmarks): add polymer js 0.8-preview benchmark
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
Tobias Bosch
parent
21a293b017
commit
a963ae48e5
|
|
@ -3,6 +3,7 @@
|
|||
packages/
|
||||
.buildlog
|
||||
node_modules
|
||||
bower_components
|
||||
.pub
|
||||
.DS_STORE
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"name": "angular2",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"polymer": "dart-lang/polymer_js#0.8.0-preview"
|
||||
}
|
||||
}
|
||||
|
|
@ -215,7 +215,12 @@ var CONFIG = {
|
|||
[
|
||||
{ src: 'node_modules/angular/angular.js', mimeType: 'text/javascript', copy: true },
|
||||
{ src: 'tools/build/snippets/url_params_to_form.js', mimeType: 'text/javascript', copy: true }
|
||||
].concat(_HTML_DEFAULT_SCRIPTS_JS)
|
||||
].concat(_HTML_DEFAULT_SCRIPTS_JS),
|
||||
'benchmarks_external/**/*polymer*/**':
|
||||
[
|
||||
{ src: 'bower_components/polymer/lib/polymer.html', copyOnly: true },
|
||||
{ src: 'tools/build/snippets/url_params_to_form.js', mimeType: 'text/javascript', copy: true }
|
||||
]
|
||||
},
|
||||
dart: {
|
||||
'**': _HTML_DEFAULT_SCRIPTS_DART,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
var perfUtil = require('angular2/src/test_lib/perf_util');
|
||||
|
||||
describe('polymer tree benchmark', function () {
|
||||
|
||||
var URL = 'benchmarks_external/src/tree/polymer/index.html';
|
||||
|
||||
afterEach(perfUtil.verifyNoBrowserErrors);
|
||||
|
||||
it('should log the stats', function(done) {
|
||||
perfUtil.runClickBenchmark({
|
||||
url: URL,
|
||||
buttons: ['#destroyDom', '#createDom'],
|
||||
id: 'polymer.tree',
|
||||
params: [{
|
||||
name: 'depth', value: 9, scale: 'log2'
|
||||
}]
|
||||
}).then(done, done.fail);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -8,6 +8,9 @@
|
|||
<li>
|
||||
<a href="tree/tree_benchmark.html">Tree benchmark</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="tree/polymer/index.html">Polymer Tree benchmark</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="largetable/largetable_benchmark.html">Largetable benchmark</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -20,7 +20,8 @@
|
|||
"url": "https://github.com/angular/angular.git"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"postinstall": "./node_modules/.bin/bower install"
|
||||
},
|
||||
"dependencies": {
|
||||
"es6-module-loader": "^0.9.2",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@ config.baseUrl = 'http://localhost:8002/';
|
|||
config.exclude.push(
|
||||
'dist/js/cjs/examples/e2e_test/sourcemap/sourcemap_spec.js',
|
||||
// TODO: remove this line when largetable dart has been added
|
||||
'dist/js/cjs/benchmarks_external/e2e_test/largetable_perf.js'
|
||||
'dist/js/cjs/benchmarks_external/e2e_test/largetable_perf.js',
|
||||
'dist/js/cjs/benchmarks_external/e2e_test/polymer_tree_perf.js'
|
||||
);
|
||||
|
||||
data.createBenchpressRunner({ lang: 'dart' });
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ module.exports = function(gulp, plugins, config) {
|
|||
var scripts = util.filterByFile(config.scriptsPerFolder, fileName).map(function(script) {
|
||||
var scriptTag;
|
||||
var scriptSrc = script.src;
|
||||
if (script.copy) {
|
||||
if (script.copy || script.copyOnly) {
|
||||
scriptSrc = path.basename(script.src);
|
||||
self.push(new VinylFile({
|
||||
cwd: file.cwd,
|
||||
|
|
@ -26,6 +26,9 @@ module.exports = function(gulp, plugins, config) {
|
|||
contents: fs.readFileSync(script.src)
|
||||
}));
|
||||
};
|
||||
if (script.copyOnly) {
|
||||
return '';
|
||||
}
|
||||
if (scriptSrc) {
|
||||
scriptTag = '<script src="'+scriptSrc+'" type="'+script.mimeType+'"></script>';
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Reference in New Issue