feat(benchmark): added an implementation of the tree benchmark in React

Author: vsavkin

modules/benchmarks/src/tree/tree_benchmark.js

@@ -10,6 +10,7 @@ import {reflector} from 'angular2/src/reflection/reflection';
 import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {isPresent} from 'angular2/src/facade/lang';
+import {List} from 'angular2/src/facade/collection';
 import {window, document, gc} from 'angular2/src/facade/browser';
 import {getIntParameter, getStringParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
 import {If} from 'angular2/directives';

modules/benchmarks_external/e2e_test/react_tree_perf.es6

@@ -0,0 +1,31 @@
+var perfUtil = require('angular2/src/test_lib/perf_util');
+
+describe('react tree benchmark', function () {
+
+  var URL = 'benchmarks_external/src/tree/react/index.html';
+
+  afterEach(perfUtil.verifyNoBrowserErrors);
+
+  it('should log the stats (create)', function(done) {
+    perfUtil.runClickBenchmark({
+      url: URL,
+      buttons: ['#destroyDom', '#createDom'],
+      id: 'react.tree.create',
+      params: [{
+        name: 'depth', value: 9, scale: 'log2'
+      }]
+    }).then(done, done.fail);
+  });
+
+  it('should log the stats (update)', function(done) {
+    perfUtil.runClickBenchmark({
+      url: URL,
+      buttons: ['#createDom'],
+      id: 'react.tree.update',
+      params: [{
+        name: 'depth', value: 9, scale: 'log2'
+      }]
+    }).then(done, done.fail);
+  });
+
+});

modules/benchmarks_external/src/index.html

@@ -11,12 +11,16 @@
     <li>
       <a href="tree/polymer/index.html">Polymer Tree benchmark</a>
     </li>
+    <li>
+      <a href="tree/react/index.html">React Tree benchmark</a>
+    </li>
     <li>
       <a href="largetable/largetable_benchmark.html">Largetable benchmark</a>
     </li>
     <li>
       <a href="naive_infinite_scroll/index.html">Naive infinite scroll benchmark</a>
     </li>
   </ul>
+
 </body>
 </html>

modules/benchmarks_external/src/tree/react/index.es6

@@ -0,0 +1,84 @@
+// tree benchmark in React
+import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
+import React from './react.min';
+
+var TreeComponent = React.createClass({
+  displayName: 'TreeComponent',
+
+  render: function() {
+    var treeNode = this.props.treeNode;
+
+    var left = null;
+    if (treeNode.left) {
+      left = React.createElement(
+        "span",
+        {},
+        [React.createElement(TreeComponent, {treeNode: treeNode.left}, "")]
+      )
+    }
+
+    var right = null;
+    if (treeNode.right) {
+      right = React.createElement(
+        "span",
+        {},
+        [React.createElement(TreeComponent, {treeNode: treeNode.right}, "")]
+      )
+    }
+
+    var span = React.createElement("span", {}, [
+      " " + treeNode.value,
+      left,
+      right
+    ]);
+
+    return (
+      React.createElement("tree", {}, [span])
+    );
+  }
+});
+
+export function main() {
+  var count = 0;
+  var maxDepth = getIntParameter('depth');
+
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+
+  var empty = new TreeNode(0, null, null);
+  var rootComponent = React.render(
+    React.createElement(TreeComponent, {treeNode: empty}, ""),
+    document.getElementById('rootTree')
+  );
+
+  function destroyDom() {
+    rootComponent.setProps({treeNode: empty});
+  }
+
+  function createDom() {
+    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', '-'];
+    rootComponent.setProps({treeNode: buildTree(maxDepth, values, 0)});
+  }
+}
+
+class TreeNode {
+  value:string;
+  left:TreeNode;
+  right:TreeNode;
+
+  constructor(value, left, right) {
+    this.value = value;
+    this.left = left;
+    this.right = right;
+  }
+}
+
+function buildTree(maxDepth, values, curDepth) {
+  if (maxDepth === curDepth) return new TreeNode('', null, null);
+  return new TreeNode(
+    values[curDepth],
+    buildTree(maxDepth, values, curDepth + 1),
+    buildTree(maxDepth, values, curDepth + 1));
+}

modules/benchmarks_external/src/tree/react/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<h2>Params</h2>
+<form>
+  Depth:
+  <input type="number" name="depth" placeholder="depth" value="9">
+  <br>
+  <button>Apply</button>
+</form>
+<button id="destroyDom">destroyDom</button>
+<button id="createDom">createDom</button>
+
+<h2>React Tree Benchmark</h2>
+<root-tree id="rootTree"></root-tree>
+
+$SCRIPTS$
+
+</body>
+</html>