Skip to content

Commit 2581c08

Browse files
tboschmprobst
tbosch
authored and
mprobst
committed
feat(benchmarks): add incremental-dom version of deep tree benchmark
1 parent 27d72e8 commit 2581c08

File tree

11 files changed

+107
-7
lines changed

11 files changed

+107
-7
lines changed

‎build.sh‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ ln -s ../../../../node_modules/reflect-metadata/Reflect.js .
4545
ln -s ../../../../node_modules/rxjs .
4646
ln -s ../../../../node_modules/angular/angular.js .
4747
ln -s ../../../../bower_components/polymer .
48+
ln -s ../../../../node_modules/incremental-dom/dist/incremental-dom-cjs.js
4849
cd -
4950

5051
TSCONFIG=./modules/tsconfig.json

‎modules/benchmarks/e2e_test/tree_perf.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,15 @@ describe('tree benchmark perf', () => {
4141
ignoreBrowserSynchronization: true,
4242
}).then(done, done.fail);
4343
});
44+
45+
it('should run for the incremental dom', (done) => {
46+
runTreeBenchmark({
47+
id: 'deepTree.incrementalDom',
48+
url: 'all/benchmarks/src/tree/incremental_dom/index.html',
49+
ignoreBrowserSynchronization: true,
50+
}).then(done, done.fail);
51+
});
52+
4453
it('should run for polymer binary tree', (done) => {
4554
runTreeBenchmark({
4655
id: 'deepTree.polymer',

‎modules/benchmarks/e2e_test/tree_spec.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,14 @@ describe('tree benchmark spec', () => {
3737
ignoreBrowserSynchronization: true,
3838
});
3939
});
40+
41+
it('should work for the incremental dom', () => {
42+
testTreeBenchmark({
43+
url: 'all/benchmarks/src/tree/incremental_dom/index.html',
44+
ignoreBrowserSynchronization: true,
45+
});
46+
});
47+
4048
it('should work for polymer binary tree', () => {
4149
testTreeBenchmark({
4250
url: 'all/benchmarks/src/tree/polymer/index.html',

modules/benchmarks/src/bootstrap_polymer.ts renamed to modules/benchmarks/src/bootstrap_plain.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@
1414
(<any>global).benchmarksBootstrap = benchmarksBootstrap;
1515

1616
function benchmarksBootstrap() {
17-
System.config({defaultJSExtensions: true});
17+
System.config({
18+
defaultJSExtensions: true,
19+
map: {'incremental-dom': '/all/benchmarks/vendor/incremental-dom-cjs.js'}
20+
});
1821

1922
// BOOTSTRAP the app!
2023
System.import('index').then(function(m: any) { m.main(); }, console.error.bind(console));

‎modules/benchmarks/src/tree/baseline/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ export function main() {
1818
bindAction('#destroyDom', destroyDom);
1919
bindAction('#createDom', createDom);
2020

21-
bindAction('#updateDomProfile', profile(createDom, noop, 'baseline-update'));
22-
bindAction('#createDomProfile', profile(createDom, destroyDom, 'baseline-create'));
21+
bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
22+
bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
2323
}
2424

2525
init();

‎modules/benchmarks/src/tree/incremental_dom/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!doctype html>
2+
<html>
3+
<body>
4+
5+
<h2>Params</h2>
6+
<form>
7+
Depth:
8+
<input type="number" name="depth" placeholder="depth" value="9">
9+
<br>
10+
<button>Apply</button>
11+
</form>
12+
13+
<h2>Baseline tree benchmark</h2>
14+
<p>
15+
<button id="destroyDom">destroyDom</button>
16+
<button id="createDom">createDom</button>
17+
<button id="updateDomProfile">profile updateDom</button>
18+
<button id="createDomProfile">profile createDom</button>
19+
</p>
20+
21+
<div>
22+
<tree id="root"></tree>
23+
</div>
24+
25+
<script src="../../bootstrap_plain.js"></script>
26+
</body>
27+
</html>

‎modules/benchmarks/src/tree/incremental_dom/index.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {bindAction, profile} from '../../util';
2+
import {TreeNode, buildTree, emptyTree} from '../util';
3+
import {render} from './tree';
4+
const {patch} = require('incremental-dom');
5+
6+
export function main() {
7+
var app: any;
8+
9+
function destroyDom() { patch(app, () => render(emptyTree)); }
10+
11+
function createDom() { patch(app, () => render(buildTree())); }
12+
13+
function noop() {}
14+
15+
function init() {
16+
app = document.querySelector('tree');
17+
18+
bindAction('#destroyDom', destroyDom);
19+
bindAction('#createDom', createDom);
20+
21+
bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
22+
bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
23+
}
24+
25+
init();
26+
}

‎modules/benchmarks/src/tree/incremental_dom/tree.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {TreeNode} from '../util';
2+
const {elementOpen, elementClose, text} = require('incremental-dom');
3+
4+
// template:
5+
// <span> {{data.value}} <span template='ngIf data.right != null'><tree
6+
// [data]='data.right'></tree></span><span template='ngIf data.left != null'><tree
7+
// [data]='data.left'></tree></span></span>
8+
export function render(data: TreeNode) {
9+
elementOpen('span', '', null);
10+
text(` ${data.value} `);
11+
if (data.left) {
12+
elementOpen('span', '', null);
13+
elementOpen('tree', '', null);
14+
render(data.left);
15+
elementClose('tree');
16+
elementClose('span');
17+
}
18+
if (data.right) {
19+
elementOpen('span', '', null);
20+
elementOpen('tree', '', null);
21+
render(data.right);
22+
elementClose('tree');
23+
elementClose('span');
24+
}
25+
elementClose('span');
26+
}

‎modules/benchmarks/src/tree/ng2/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ export function main() {
3131
tree = appRef.components[0].instance;
3232
bindAction('#destroyDom', destroyDom);
3333
bindAction('#createDom', createDom);
34-
bindAction('#updateDomProfile', profile(createDom, noop, 'ng2-update'));
35-
bindAction('#createDomProfile', profile(createDom, destroyDom, 'ng2-create'));
34+
bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
35+
bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
3636
});
3737
}
3838

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ <h2>Polymer tree benchmark</h2>
2323
<binary-tree id="root"></binary-tree>
2424
</div>
2525

26-
<script src="../../bootstrap_polymer.js"></script>
26+
<script src="../../bootstrap_plain.js"></script>
2727

2828
</body>
2929
</html>

0 commit comments

Comments
 (0)