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

2015-04-29 18:11:56 -07:00
parent 9e8d31d532
commit e4342743c0
10 changed files with 2364 additions and 1130 deletions
--- a/modules/benchmarks_external/src/tree/react/index.es6
+++ b/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));
+}
--- a/modules/benchmarks_external/src/tree/react/index.html
+++ b/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>