refactor(benchmarks): make tree benchmark work again

Author: tbosch

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2",
   "dependencies": {
-    "polymer": "Polymer/polymer"
+    "polymer": "Polymer/polymer#^1.6.0"
   }
 }

build.sh

@@ -31,6 +31,21 @@ ln -s ../../../../node_modules/rxjs .
 ln -s ../../../../node_modules/angular/angular.js .
 cd -
 
+echo "====== Copying files needed for benchmarks ====="
+cp -r ./modules/benchmarks ./dist/all/
+cp -r ./modules/benchmarks/favicon.ico ./dist/
+mkdir ./dist/all/benchmarks/vendor
+cd ./dist/all/benchmarks/vendor
+ln -s ../../../../node_modules/core-js/client/core.js .
+ln -s ../../../../node_modules/zone.js/dist/zone.js .
+ln -s ../../../../node_modules/zone.js/dist/long-stack-trace-zone.js .
+ln -s ../../../../node_modules/systemjs/dist/system.src.js .
+ln -s ../../../../node_modules/base64-js/lib/b64.js .
+ln -s ../../../../node_modules/reflect-metadata/Reflect.js .
+ln -s ../../../../node_modules/rxjs .
+ln -s ../../../../node_modules/angular/angular.js .
+ln -s ../../../../bower_components/polymer .
+cd -
 
 TSCONFIG=./modules/tsconfig.json
 echo "====== (all)COMPILING: \$(npm bin)/tsc -p ${TSCONFIG} ====="

gulpfile.js

@@ -12,7 +12,7 @@ const os = require('os');
 
 const srcsToFmt =
     ['tools/**/*.ts', 'modules/@angular/**/*.ts', '!tools/public_api_guard/**/*.d.ts',
-    'modules/benchpress/**/*.ts', 'modules/playground/**/*.ts'];
+    'modules/benchpress/**/*.ts', 'modules/playground/**/*.ts', 'modules/benchmarks/**/*.ts'];
 
 gulp.task('format:enforce', () => {
   const format = require('gulp-clang-format');

modules/benchmarks/README.md

@@ -0,0 +1,12 @@
+# How to run the benchmarks locally
+
+## Run in the browser
+$ build.sh
+$ cp -r ./modules/benchmarks ./dist/all/
+$ ./node_modules/.bin/tsc -p modules --emitDecoratorMetadata -w
+$ gulp serve
+$ open http://localhost:8000/all/benchmarks/src/tree/ng2/index.html?bundles=false
+
+## Run e2e tests
+$ export NODE_PATH=$(pwd)/dist/all:$(pwd)/dist/tools
+$ ./node_modules/.bin/protractor protractor-js-new-world.conf.js --specs=dist/all/benchmarks/e2e_test/tree_perf.js

modules/benchmarks/e2e_test/compiler_perf.ts renamed to modules/benchmarks/e2e_test/old/compiler_perf.ts

@@ -1,46 +1,37 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
-import {runClickBenchmark} from '@angular/testing/src/perf_util';
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
 
-describe('ng2 tree benchmark', function() {
+import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 
-  var URL = 'benchmarks/src/tree/tree_benchmark.html';
+const useBundles = false;
 
-  afterEach(verifyNoBrowserErrors);
+describe('tree benchmark', function() {
 
-  it('should log the ng stats', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#ng2DestroyDom', '#ng2CreateDom'],
-      id: 'ng2.tree.create.plain',
-      params: [{name: 'depth', value: 9, scale: 'log2'}]
-    }).then(done, done.fail);
-  });
+  afterEach(verifyNoBrowserErrors);
 
-  it('should log the ng stats (update)', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#ng2CreateDom'],
-      id: 'ng2.tree.update',
-      params: [{name: 'depth', value: 9, scale: 'log2'}]
-    }).then(done, done.fail);
+  it('should work for the baseline', function() {
+    browser.ignoreSynchronization = true;
+    browser.get(`all/benchmarks/src/tree/baseline/index.html?bundles=${useBundles}`);
+    $('#createDom').click();
+    expect($('baseline').getText()).toContain('0');
   });
 
-  it('should log the baseline stats', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#baselineDestroyDom', '#baselineCreateDom'],
-      id: 'baseline.tree.create',
-      params: [{name: 'depth', value: 9, scale: 'log2'}]
-    }).then(done, done.fail);
+  it('should work for ng2', function() {
+    browser.get(`all/benchmarks/src/tree/ng2/index.html?bundles=${useBundles}`);
+    $('#createDom').click();
+    expect($('app').getText()).toContain('0');
   });
 
-  it('should log the baseline stats (update)', function(done) {
-    runClickBenchmark({
-      url: URL,
-      buttons: ['#baselineCreateDom'],
-      id: 'baseline.tree.update',
-      params: [{name: 'depth', value: 9, scale: 'log2'}]
-    }).then(done, done.fail);
+  it('should work for polymer', function() {
+    browser.ignoreSynchronization = true;
+    browser.get(`all/benchmarks/src/tree/polymer/index.html?bundles=${useBundles}`);
+    $('#createDom').click();
+    expect($('#app').getText()).toContain('0');
   });
 
 });

modules/benchmarks/e2e_test/costs_perf.ts renamed to modules/benchmarks/e2e_test/old/costs_perf.ts

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+
+(function(global: any /** TODO #9100 */) {
+
+  writeScriptTag('/all/benchmarks/vendor/core.js');
+  writeScriptTag('/all/benchmarks/vendor/zone.js');
+  writeScriptTag('/all/benchmarks/vendor/long-stack-trace-zone.js');
+  writeScriptTag('/all/benchmarks/vendor/system.src.js');
+  writeScriptTag('/all/benchmarks/vendor/Reflect.js', 'benchmarksBootstrap()');
+
+  (<any>global).benchmarksBootstrap = benchmarksBootstrap;
+
+  function benchmarksBootstrap() {
+    urlParamsToForm();
+    // check query param
+    var useBundles = location.search.indexOf('bundles=false') == -1;
+    if (useBundles) {
+      System.config({
+        map: {
+          'index': 'index.js',
+          '@angular/core': '/packages-dist/core/bundles/core.umd.js',
+          '@angular/common': '/packages-dist/common/bundles/common.umd.js',
+          '@angular/forms': '/packages-dist/forms/bundles/forms.umd.js',
+          '@angular/compiler': '/packages-dist/compiler/bundles/compiler.umd.js',
+          '@angular/platform-browser':
+              '/packages-dist/platform-browser/bundles/platform-browser.umd.js',
+          '@angular/platform-browser-dynamic':
+              '/packages-dist/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+          '@angular/http': '/packages-dist/http/bundles/http.umd.js',
+          '@angular/upgrade': '/packages-dist/upgrade/bundles/upgrade.umd.js',
+          '@angular/router': '/packages-dist/router/bundles/router.umd.js',
+          '@angular/core/src/facade': '/all/@angular/core/src/facade',
+          'rxjs': '/all/benchmarks/vendor/rxjs'
+        },
+        packages: {
+          'app': {defaultExtension: 'js'},
+          '../app': {defaultExtension: 'js'},
+          '@angular/core/src/facade': {defaultExtension: 'js'},
+          'rxjs': {defaultExtension: 'js'}
+        }
+      });
+    } else {
+      console.warn(
+          'Not using the Angular bundles. Don\'t use this configuration for e2e/performance tests!');
+
+      System.config({
+        map: {
+          'index': 'index.js',
+          '@angular': '/all/@angular',
+          'rxjs': '/all/benchmarks/vendor/rxjs'
+        },
+        packages: {
+          'app': {defaultExtension: 'js'},
+          '../app': {defaultExtension: 'js'},
+          '@angular/core': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/router': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/common': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/forms': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
+          '@angular/upgrade': {main: 'index.js', defaultExtension: 'js'},
+          'rxjs': {defaultExtension: 'js'}
+        }
+      });
+    }
+
+
+    // BOOTSTRAP the app!
+    System.import('index').then(function(m: any /** TODO #9100 */) {
+      m.main();
+    }, console.error.bind(console));
+  }
+
+
+  function writeScriptTag(scriptUrl: any /** TODO #9100 */, onload?: any /** TODO #9100 */) {
+    document.write(`<script src="${scriptUrl}" onload="${onload}"></script>`);
+  }
+
+  // helper script that will read out the url parameters
+  // and store them in appropriate form fields on the page
+  function urlParamsToForm() {
+    var regex = /(\w+)=(\w+)/g;
+    var search = decodeURIComponent(location.search);
+    var match: any[];
+    while (match = regex.exec(search)) {
+      var name = match[1];
+      var value = match[2];
+      var els = document.querySelectorAll('input[name="'+name+'"]');
+      var el: any;
+      for (var i=0; i<els.length; i++) {
+        el = els[i];
+        if (el.type === 'radio' || el.type === 'checkbox') {
+          el.checked = el.value === value;
+        } else {
+          el.value = value;
+        }
+      }
+    }
+  }
+}(window));

modules/benchmarks/e2e_test/di_perf.ts renamed to modules/benchmarks/e2e_test/old/di_perf.ts

@@ -26,7 +26,7 @@ function _createBindings() {
   return [
     {provide: BENCHMARK_TYPE, useValue: getStringParameter('benchmarkType')},
     {provide: LARGETABLE_ROWS, useValue: getIntParameter('rows')},
-    {provide: LARGETABLE_COLS, {useValue: getIntParameter('columns')},
+    {provide: LARGETABLE_COLS, useValue: getIntParameter('columns')},
   ];
 }
 

modules/benchmarks/e2e_test/largetable_perf.ts renamed to modules/benchmarks/e2e_test/old/largetable_perf.ts

@@ -0,0 +1,72 @@
+import {
+  getIntParameter,
+  windowProfile,
+  windowProfileEnd
+} from '@angular/platform-browser/testing/benchmark_util';
+
+export class TreeNode {
+  constructor(public value: string, public left: TreeNode, public right: TreeNode) {
+  }
+}
+
+let treeCreateCount: number;
+let maxDepth: number;
+let numberData: string[];
+let charData: string[];
+
+init();
+
+function init() {
+  maxDepth = getIntParameter('depth');
+  treeCreateCount = 0;
+  numberData = [];
+  charData = [];
+  for (let i = 0; i<maxDepth; i++) {
+    numberData.push(i.toString());
+    charData.push(String.fromCharCode('A'.charCodeAt(0) + i));
+  }
+}
+
+function _buildTree(values: string[], curDepth: number = 0): TreeNode {
+  if (maxDepth === curDepth) return new TreeNode('', null, null);
+  return new TreeNode(values[curDepth], _buildTree(values, curDepth + 1),
+                      _buildTree(values, curDepth + 1));
+}
+
+export function emptyTree(): TreeNode {
+  return new TreeNode('', null, null);
+}
+
+export function buildTree(): TreeNode {
+  treeCreateCount++;
+  return _buildTree(treeCreateCount % 2 ? numberData : charData);
+}
+
+export function profile(create: () => void, destroy: () => void, name: string) {
+    return function() {
+      windowProfile(name + ' w GC');
+      var duration = 0;
+      var count = 0;
+      while (count++ < 150) {
+        (<any>window)['gc']();
+        var start = window.performance.now();
+        create();
+        duration += window.performance.now() - start;
+        destroy();
+      }
+      windowProfileEnd(name + ' w GC');
+      window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`);
+
+      windowProfile(name + ' w/o GC');
+      duration = 0;
+      count = 0;
+      while (count++ < 150) {
+        var start = window.performance.now();
+        create();
+        duration += window.performance.now() - start;
+        destroy();
+      }
+      windowProfileEnd(name + ' w/o GC');
+      window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`);
+    };
+  }

modules/benchmarks/e2e_test/naive_infinite_scroll_perf.ts renamed to modules/benchmarks/e2e_test/old/naive_infinite_scroll_perf.ts

@@ -0,0 +1,71 @@
+import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {TreeNode} from '../../app/util';
+
+// http://jsperf.com/nextsibling-vs-childnodes
+
+const BASELINE_TREE_TEMPLATE =document.createElement('template');
+BASELINE_TREE_TEMPLATE.innerHTML = '<span>_<template class="ng-provider"></template><template class="ng-provider"></template></span>';
+const BASELINE_IF_TEMPLATE =document.createElement('template');
+BASELINE_IF_TEMPLATE.innerHTML = '<span template="if"><tree></tree></span>';
+
+export class BaseLineTreeComponent {
+  value: BaseLineInterpolation;
+  left: BaseLineIf;
+  right: BaseLineIf;
+  constructor(public element: HTMLElement) {
+    var clone = getDOM().clone(BASELINE_TREE_TEMPLATE.content.firstChild);
+    getDOM().appendChild(element, clone);
+
+    var child = clone.firstChild;
+    this.value = new BaseLineInterpolation(child);
+    child = getDOM().nextSibling(child);
+    this.left = new BaseLineIf(child);
+    child = getDOM().nextSibling(child);
+    this.right = new BaseLineIf(child);
+  }
+  update(value: TreeNode) {
+    this.value.update(value.value);
+    this.left.update(value.left);
+    this.right.update(value.right);
+  }
+}
+
+export class BaseLineInterpolation {
+  value: string;
+  constructor(public textNode: Node) {
+    this.value = null;
+  }
+  update(value: string) {
+    if (this.value !== value) {
+      this.value = value;
+      getDOM().setText(this.textNode, value + ' ');
+    }
+  }
+}
+
+export class BaseLineIf {
+  condition: boolean;
+  component: BaseLineTreeComponent;
+  constructor(public anchor: Node) {
+    this.condition = false;
+    this.component = null;
+  }
+  update(value: TreeNode) {
+    var newCondition = !!value;
+    if (this.condition !== newCondition) {
+      this.condition = newCondition;
+      if (this.component) {
+        getDOM().remove(this.component.element);
+        this.component = null;
+      }
+      if (this.condition) {
+        var element = getDOM().firstChild((<any>getDOM().clone(BASELINE_IF_TEMPLATE)).content);
+        this.anchor.parentNode.insertBefore(element, getDOM().nextSibling(this.anchor));
+        this.component = new BaseLineTreeComponent(<HTMLElement>getDOM().firstChild(element));
+      }
+    }
+    if (this.component) {
+      this.component.update(value);
+    }
+  }
+}