refactor(benchmarks): make tree benchmark work again

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/tree_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;
+
+describe('tree benchmark', function() {
 
   afterEach(verifyNoBrowserErrors);
 
-  it('should log the ng stats', function(done) {
+  it('should work for the baseline', function() {
-    runClickBenchmark({
+    browser.ignoreSynchronization = true;
-      url: URL,
+    browser.get(`all/benchmarks/src/tree/baseline/index.html?bundles=${useBundles}`);
-      buttons: ['#ng2DestroyDom', '#ng2CreateDom'],
+    $('#createDom').click();
-      id: 'ng2.tree.create.plain',
+    expect($('baseline').getText()).toContain('0');
-      params: [{name: 'depth', value: 9, scale: 'log2'}]
-    }).then(done, done.fail);
   });
 
-  it('should log the ng stats (update)', function(done) {
+  it('should work for ng2', function() {
-    runClickBenchmark({
+    browser.get(`all/benchmarks/src/tree/ng2/index.html?bundles=${useBundles}`);
-      url: URL,
+    $('#createDom').click();
-      buttons: ['#ng2CreateDom'],
+    expect($('app').getText()).toContain('0');
-      id: 'ng2.tree.update',
-      params: [{name: 'depth', value: 9, scale: 'log2'}]
-    }).then(done, done.fail);
   });
 
-  it('should log the baseline stats', function(done) {
+  it('should work for polymer', function() {
-    runClickBenchmark({
+    browser.ignoreSynchronization = true;
-      url: URL,
+    browser.get(`all/benchmarks/src/tree/polymer/index.html?bundles=${useBundles}`);
-      buttons: ['#baselineDestroyDom', '#baselineCreateDom'],
+    $('#createDom').click();
-      id: 'baseline.tree.create',
+    expect($('#app').getText()).toContain('0');
-      params: [{name: 'depth', value: 9, scale: 'log2'}]
-    }).then(done, done.fail);
-  });
-
-  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);
   });
 
 });

modules/benchmarks/src/bootstrap.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/src/old/largetable/largetable_benchmark.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/src/tree/app/util.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/src/tree/baseline/app/tree.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);
+    }
+  }
+}

modules/benchmarks/src/tree/baseline/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<body>
+
+<h2>Params</h2>
+<form>
+  Depth:
+  <input type="number" name="depth" placeholder="depth" value="9">
+  <br>
+  <button>Apply</button>
+</form>
+
+<h2>Baseline tree benchmark</h2>
+<p>
+<button id="destroyDom">destroyDom</button>
+<button id="createDom">createDom</button>
+<button id="updateDomProfile">profile updateDom</button>
+<button id="createDomProfile">profile createDom</button>
+</p>
+
+<div>
+<baseline></baseline>
+</div>
+
+<script src="../../bootstrap.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,35 @@
+import {
+  bindAction
+} from '@angular/platform-browser/testing/benchmark_util';
+
+import {BaseLineTreeComponent} from './app/tree';
+import {TreeNode, buildTree, emptyTree, profile} from '../app/util';
+import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
+
+export function main() {
+  var app: BaseLineTreeComponent;
+
+  function destroyDom() { app.update(emptyTree()); }
+
+  function createDom() {
+    app.update(buildTree());
+  }
+
+  function noop() {}
+
+  function init() {
+    BrowserDomAdapter.makeCurrent();
+    const tree = document.createElement('tree');
+    document.querySelector('baseline').appendChild(tree);
+    app = new BaseLineTreeComponent(tree);
+
+    bindAction('#destroyDom', destroyDom);
+    bindAction('#createDom', createDom);
+
+    bindAction('#updateDomProfile', profile(createDom, noop, 'baseline-update'));
+    bindAction('#createDomProfile',
+               profile(createDom, destroyDom, 'baseline-create'));
+  }
+
+  init();
+}

modules/benchmarks/src/tree/ng2/app/tree.ts

@@ -0,0 +1,33 @@
+import {
+  Component,
+  NgModule
+} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {TreeNode, emptyTree} from '../../app/util';
+
+@Component({
+  selector: 'tree',
+  inputs: ['data'],
+  template:
+      `<span> {{data.value}} <span template='ngIf data.right != null'><tree [data]='data.right'></tree></span><span template='ngIf data.left != null'><tree [data]='data.left'></tree></span></span>`
+})
+class TreeComponent {
+  data: TreeNode;
+}
+
+@Component(
+    {selector: 'app', template: `<tree [data]='initData'></tree>`})
+export class AppComponent {
+  initData: TreeNode;
+  constructor() {
+    this.initData = emptyTree();
+  }
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  bootstrap: [AppComponent],
+  declarations: [TreeComponent, AppComponent]
+})
+export class AppModule {}

modules/benchmarks/src/tree/ng2/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<body>
+
+<h2>Params</h2>
+<form>
+  Depth:
+  <input type="number" name="depth" placeholder="depth" value="9">
+  <br>
+  <button>Apply</button>
+</form>
+
+<h2>Angular2 tree benchmark</h2>
+<p>
+<button id="destroyDom">destroyDom</button>
+<button id="createDom">createDom</button>
+<button id="updateDomProfile">profile updateDom</button>
+<button id="createDomProfile">profile createDom</button>
+</p>
+
+<div>
+<app></app>
+</div>
+
+<script src="../../bootstrap.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,49 @@
+import {
+  NgModule,
+  enableProdMode
+} from '@angular/core';
+
+import {ApplicationRef} from '@angular/core/src/application_ref';
+import {
+  bindAction,
+  windowProfile,
+  windowProfileEnd
+} from '@angular/platform-browser/testing/benchmark_util';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {AppComponent, AppModule} from './app/tree';
+import {TreeNode, buildTree, emptyTree, profile} from '../app/util';
+
+export function main() {
+  var app: AppComponent;
+  var appRef: ApplicationRef;
+
+  function destroyDom() {
+    app.initData = emptyTree();
+    appRef.tick();
+  }
+
+  function createDom() {
+    app.initData = buildTree();
+    appRef.tick();
+  }
+
+  function noop() {}
+
+  function init() {
+    enableProdMode();
+    platformBrowserDynamic().bootstrapModule(AppModule)
+        .then((ref) => {
+          var injector = ref.injector;
+          appRef = injector.get(ApplicationRef);
+
+          app = appRef.components[0].instance;
+          bindAction('#destroyDom', destroyDom);
+          bindAction('#createDom', createDom);
+          bindAction('#updateDomProfile', profile(createDom, noop, 'ng2-update'));
+          bindAction('#createDomProfile', profile(createDom, destroyDom, 'ng2-create'));
+        });
+  }
+
+  init();
+}

modules/benchmarks/src/tree/polymer/binary_tree.html

@@ -1,4 +1,4 @@
-<link rel="import" href="polymer.html">
+<link rel="import" href="/all/benchmarks/vendor/polymer/polymer.html">
 <dom-module id="binary-tree">
   <template>
     <span>

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

@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+  <link rel="import" href="binary_tree.html">
+</head>
+<body>
+
+<h2>Params</h2>
+<form>
+  Depth:
+  <input type="number" name="depth" placeholder="depth" value="9">
+  <br>
+  <button>Apply</button>
+</form>
+
+<h2>Polymer tree benchmark</h2>
+<p>
+<button id="destroyDom">destroyDom</button>
+<button id="createDom">createDom</button>
+</p>
+
+<div>
+<binary-tree id="app"></binary-tree>
+</div>
+
+<script src="../../bootstrap.js"></script>
+
+</body>
+</html>

modules/benchmarks/src/tree/polymer/index.ts

@@ -0,0 +1,22 @@
+import {buildTree, emptyTree} from '../app/util';
+import {
+  bindAction
+} from '@angular/platform-browser/testing/benchmark_util';
+
+declare var Polymer: any;
+
+export function main() {
+  const rootEl: any = document.querySelector('binary-tree');
+  rootEl.data = emptyTree();
+
+  function destroyDom() {
+    rootEl.data = emptyTree();
+  }
+
+  function createDom() {
+    rootEl.data = buildTree();
+  }
+
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+}

modules/benchmarks/src/tree/tree_benchmark.html

@@ -1,47 +0,0 @@
-<!doctype html>
-<html>
-<body>
-
-<h2>Params</h2>
-<form>
-  Depth:
-  <input type="number" name="depth" placeholder="depth" value="9">
-  <br>
-  Use Viewcache:
-  <label>
-  Yes<input type="radio" name="viewcache" placeholder="use viewcache" value="true" checked="checked">
-  </label>
-  <label>
-  No<input type="radio" name="viewcache" placeholder="use viewcache" value="false">
-  </label>
-  <br>
-  <button>Apply</button>
-</form>
-
-<h2>Angular2 tree benchmark</h2>
-<p>
-<button id="ng2DestroyDom">destroyDom</button>
-<button id="ng2CreateDom">createDom</button>
-<button id="ng2UpdateDomProfile">profile updateDom</button>
-<button id="ng2CreateDomProfile">profile createDom</button>
-</p>
-
-<h2>Baseline tree benchmark</h2>
-<p>
-<button id="baselineDestroyDom">destroyDom</button>
-<button id="baselineCreateDom">createDom</button>
-<button id="baselineUpdateDomProfile">profile updateDom</button>
-<button id="baselineCreateDomProfile">profile createDom</button>
-</p>
-
-<div>
-<app></app>
-</div>
-
-<div>
-<baseline></baseline>
-</div>
-
-$SCRIPTS$
-</body>
-</html>

modules/benchmarks/src/tree/tree_benchmark.ts

@@ -1,246 +0,0 @@
-import {bootstrap} from '@angular/platform-browser';
-import {
-  NgModule,
-  Component,
-  enableProdMode
-} from '@angular/core';
-import {NgIf} from '@angular/common';
-
-import {ApplicationRef} from '@angular/core/src/application_ref';
-import {DOM} from '@angular/platform-browser/src/dom/dom_adapter';
-import {isPresent} from '@angular/facade/src/lang';
-import {window, document, gc} from '@angular/facade/src/browser';
-import {
-  getIntParameter,
-  getStringParameter,
-  bindAction,
-  windowProfile,
-  windowProfileEnd
-} from '@angular/testing/src/benchmark_util';
-import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
-import {BrowserModule} from '@angular/platform-browser';
-import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-
-function createProviders(): any[] {
-  return [];
-}
-
-var BASELINE_TREE_TEMPLATE;
-var BASELINE_IF_TEMPLATE;
-
-export function main() {
-  BrowserDomAdapter.makeCurrent();
-  enableProdMode();
-  var maxDepth = getIntParameter('depth');
-
-  BASELINE_TREE_TEMPLATE = DOM.createTemplate(
-      '<span>_<template class="ng-provider"></template><template class="ng-provider"></template></span>');
-  BASELINE_IF_TEMPLATE = DOM.createTemplate('<span template="if"><tree></tree></span>');
-
-  var app;
-  var appRef;
-  var baselineRootTreeComponent;
-  var count = 0;
-
-  function ng2DestroyDom() {
-    // TODO: We need an initial value as otherwise the getter for data.value will fail
-    // --> this should be already caught in change detection!
-    app.initData = new TreeNode('', null, null);
-    appRef.tick();
-  }
-
-  function profile(create, destroy, name) {
-    return function() {
-      windowProfile(name + ' w GC');
-      var duration = 0;
-      var count = 0;
-      while (count++ < 150) {
-        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`);
-    };
-  }
-
-  function ng2CreateDom() {
-    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', '-'];
-    app.initData = buildTree(maxDepth, values, 0);
-    appRef.tick();
-  }
-
-  function noop() {}
-
-  @NgModule({
-    imports: [BrowserModule],
-    bootstrap: [AppComponent],
-    providers: createProviders()
-  })
-  class AppModule {
-  }
-
-  function initNg2() {
-    platformBrowserDynamic().bootstrapModule(AppModule)
-        .then((ref) => {
-          var injector = ref.injector;
-          appRef = injector.get(ApplicationRef);
-
-          app = ref.instance;
-          bindAction('#ng2DestroyDom', ng2DestroyDom);
-          bindAction('#ng2CreateDom', ng2CreateDom);
-          bindAction('#ng2UpdateDomProfile', profile(ng2CreateDom, noop, 'ng2-update'));
-          bindAction('#ng2CreateDomProfile', profile(ng2CreateDom, ng2DestroyDom, 'ng2-create'));
-        });
-  }
-
-  function baselineDestroyDom() { baselineRootTreeComponent.update(new TreeNode('', null, null)); }
-
-  function baselineCreateDom() {
-    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', '-'];
-
-    baselineRootTreeComponent.update(buildTree(maxDepth, values, 0));
-  }
-
-  function initBaseline() {
-    var tree = DOM.createElement('tree');
-    DOM.appendChild(DOM.querySelector(document, 'baseline'), tree);
-    baselineRootTreeComponent = new BaseLineTreeComponent(tree);
-
-    bindAction('#baselineDestroyDom', baselineDestroyDom);
-    bindAction('#baselineCreateDom', baselineCreateDom);
-
-    bindAction('#baselineUpdateDomProfile', profile(baselineCreateDom, noop, 'baseline-update'));
-    bindAction('#baselineCreateDomProfile',
-               profile(baselineCreateDom, baselineDestroyDom, 'baseline-create'));
-  }
-
-  initNg2();
-  initBaseline();
-}
-
-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));
-}
-
-// http://jsperf.com/nextsibling-vs-childnodes
-
-class BaseLineTreeComponent {
-  element;
-  value: BaseLineInterpolation;
-  left: BaseLineIf;
-  right: BaseLineIf;
-  constructor(element) {
-    this.element = element;
-    var clone = DOM.clone(BASELINE_TREE_TEMPLATE.content.firstChild);
-    var shadowRoot = this.element.createShadowRoot();
-    DOM.appendChild(shadowRoot, clone);
-
-    var child = clone.firstChild;
-    this.value = new BaseLineInterpolation(child);
-    child = DOM.nextSibling(child);
-    this.left = new BaseLineIf(child);
-    child = DOM.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);
-  }
-}
-
-class BaseLineInterpolation {
-  value: string;
-  textNode;
-  constructor(textNode) {
-    this.value = null;
-    this.textNode = textNode;
-  }
-  update(value: string) {
-    if (this.value !== value) {
-      this.value = value;
-      DOM.setText(this.textNode, value + ' ');
-    }
-  }
-}
-
-class BaseLineIf {
-  condition: boolean;
-  component: BaseLineTreeComponent;
-  anchor;
-  constructor(anchor) {
-    this.anchor = anchor;
-    this.condition = false;
-    this.component = null;
-  }
-  update(value: TreeNode) {
-    var newCondition = isPresent(value);
-    if (this.condition !== newCondition) {
-      this.condition = newCondition;
-      if (isPresent(this.component)) {
-        DOM.remove(this.component.element);
-        this.component = null;
-      }
-      if (this.condition) {
-        var element = DOM.firstChild((<any>DOM.clone(BASELINE_IF_TEMPLATE)).content);
-        this.anchor.parentNode.insertBefore(element, DOM.nextSibling(this.anchor));
-        this.component = new BaseLineTreeComponent(DOM.firstChild(element));
-      }
-    }
-    if (isPresent(this.component)) {
-      this.component.update(value);
-    }
-  }
-}
-
-@Component({
-  selector: 'tree',
-  inputs: ['data'],
-  directives: [TreeComponent, NgIf],
-  template:
-      `<span> {{data.value}} <span template='ngIf data.right != null'><tree [data]='data.right'></tree></span><span template='ngIf data.left != null'><tree [data]='data.left'></tree></span></span>`
-})
-class TreeComponent {
-  data: TreeNode;
-}
-
-@Component(
-    {selector: 'app', directives: [TreeComponent], template: `<tree [data]='initData'></tree>`})
-class AppComponent {
-  initData: TreeNode;
-  constructor() {
-    // TODO: We need an initial value as otherwise the getter for data.value will fail
-    // --> this should be already caught in change detection!
-    this.initData = new TreeNode('', null, null);
-  }
-}

modules/benchmarks_external/README.md

@@ -0,0 +1,6 @@
+# How to run the benchmarks_external locally
+
+$ cp -r ./modules/benchmarks_external ./dist/all/
+$ ./node_modules/.bin/tsc -p modules --emitDecoratorMetadata -w
+$ gulp serve
+$ open http://localhost:8000/all/benchmarks_external/src/tree/index.html?bundles=false

modules/benchmarks_external/src/bootstrap.ts

@@ -0,0 +1,83 @@
+/**
+ * @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() {
+    // 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'},
+          '@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'},
+          '@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>`);
+  }
+}(window));

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

@@ -1,22 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <link rel="import" href="root_tree.html">
-</head>
-<body>
-
-<h2>Params</h2>
-<form>
-  Depth:
-  <input type="number" name="depth" placeholder="depth" value="9">
-  <br>
-  <button>Apply</button>
-</form>
-
-<h2>Polymer JS 1.x tree benchmark</h2>
-<root-tree></root-tree>
-
-<script src="url_params_to_form.js" type="text/javascript"></script>
-
-</body>
-</html>

modules/benchmarks_external/src/tree/polymer/root_tree.html

@@ -1,49 +0,0 @@
-<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>

modules/tsconfig.json

@@ -24,7 +24,8 @@
   "exclude": [
     "angular1_router",
     "angular2",
-    "benchmarks",
+    "benchmarks/e2e_test/old",
+    "benchmarks/src/old",
     "benchmarks_external",
     "benchpress",
     "payload_tests",