feat(benchmark): add large form benchmark

This benchmark tracks the generated file size for large forms
as well as the time to create and destroy many form fields.

modules/benchmarks/e2e_test/largeform_perf.ts

@@ -0,0 +1,52 @@
+/**
+ * @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
+ */
+
+import {runBenchmark, verifyNoBrowserErrors} from 'e2e_util/perf_util';
+
+interface Worker {
+  id: string;
+  prepare?(): void;
+  work(): void;
+}
+
+const CreateAndDestroyWorker: Worker = {
+  id: 'createDestroy',
+  work: () => {
+    $('#createDom').click();
+    $('#destroyDom').click();
+  }
+};
+
+describe('largeform benchmark perf', () => {
+
+  afterEach(verifyNoBrowserErrors);
+
+  [CreateAndDestroyWorker].forEach((worker) => {
+    describe(worker.id, () => {
+      it('should run for ng2', (done) => {
+        runLargeFormBenchmark({
+          id: `largeform.ng2.${worker.id}`,
+          url: 'all/benchmarks/src/largeform/ng2/index.html',
+          worker: worker
+        }).then(done, done.fail);
+      });
+    });
+  });
+
+  function runLargeFormBenchmark(
+      config: {id: string, url: string, ignoreBrowserSynchronization?: boolean, worker: Worker}) {
+    return runBenchmark({
+      id: config.id,
+      url: config.url,
+      params: [{name: 'copies', value: 8}],
+      ignoreBrowserSynchronization: config.ignoreBrowserSynchronization,
+      prepare: config.worker.prepare,
+      work: config.worker.work
+    });
+  }
+});

modules/benchmarks/e2e_test/largeform_spec.ts

@@ -0,0 +1,34 @@
+/**
+ * @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
+ */
+
+import {openBrowser, verifyNoBrowserErrors} from 'e2e_util/e2e_util';
+
+describe('largeform benchmark spec', () => {
+
+  afterEach(verifyNoBrowserErrors);
+
+  it('should work for ng2', () => {
+    testLargeformBenchmark({
+      url: 'all/benchmarks/src/largeform/ng2/index.html',
+    });
+  });
+
+  function testLargeformBenchmark(
+      openConfig: {url: string, ignoreBrowserSynchronization?: boolean}) {
+    openBrowser({
+      url: openConfig.url,
+      params: [{name: 'copies', value: 1}],
+      ignoreBrowserSynchronization: openConfig.ignoreBrowserSynchronization,
+    });
+    $('#createDom').click();
+    expect(element.all(By.css('input[name=value0]')).get(0).getAttribute('value'))
+        .toBe('someValue0');
+    $('#destroyDom').click();
+    expect(element.all(By.css('input[name=value0]')).count()).toBe(0);
+  }
+});

modules/benchmarks/src/largeform/README.md

@@ -0,0 +1,7 @@
+# Large Form Benchmark
+
+Purpose:
+
+- Track generated file size for a big form
+- Track time for creation / destruction of form widgets,
+  as they are more complex (e.g. include event listeners, host bindings, ...)

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

@@ -0,0 +1,83 @@
+import {Component, NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+
+@Component({
+  selector: 'app',
+  template: `<form *ngFor="let copy of copies">
+<input type="text" [(ngModel)]="values[0]" name="value0">
+<input type="text" [(ngModel)]="values[1]" name="value1">
+<input type="text" [(ngModel)]="values[2]" name="value2">
+<input type="text" [(ngModel)]="values[3]" name="value3">
+<input type="text" [(ngModel)]="values[4]" name="value4">
+<input type="text" [(ngModel)]="values[5]" name="value5">
+<input type="text" [(ngModel)]="values[6]" name="value6">
+<input type="text" [(ngModel)]="values[7]" name="value7">
+<input type="text" [(ngModel)]="values[8]" name="value8">
+<input type="text" [(ngModel)]="values[9]" name="value9">
+<input type="text" [(ngModel)]="values[10]" name="value10">
+<input type="text" [(ngModel)]="values[11]" name="value11">
+<input type="text" [(ngModel)]="values[12]" name="value12">
+<input type="text" [(ngModel)]="values[13]" name="value13">
+<input type="text" [(ngModel)]="values[14]" name="value14">
+<input type="text" [(ngModel)]="values[15]" name="value15">
+<input type="text" [(ngModel)]="values[16]" name="value16">
+<input type="text" [(ngModel)]="values[17]" name="value17">
+<input type="text" [(ngModel)]="values[18]" name="value18">
+<input type="text" [(ngModel)]="values[19]" name="value19">
+<input type="text" [(ngModel)]="values[20]" name="value20">
+<input type="text" [(ngModel)]="values[21]" name="value21">
+<input type="text" [(ngModel)]="values[22]" name="value22">
+<input type="text" [(ngModel)]="values[23]" name="value23">
+<input type="text" [(ngModel)]="values[24]" name="value24">
+<input type="text" [(ngModel)]="values[25]" name="value25">
+<input type="text" [(ngModel)]="values[26]" name="value26">
+<input type="text" [(ngModel)]="values[27]" name="value27">
+<input type="text" [(ngModel)]="values[28]" name="value28">
+<input type="text" [(ngModel)]="values[29]" name="value29">
+<input type="text" [(ngModel)]="values[30]" name="value30">
+<input type="text" [(ngModel)]="values[31]" name="value31">
+<input type="text" [(ngModel)]="values[32]" name="value32">
+<input type="text" [(ngModel)]="values[33]" name="value33">
+<input type="text" [(ngModel)]="values[34]" name="value34">
+<input type="text" [(ngModel)]="values[35]" name="value35">
+<input type="text" [(ngModel)]="values[36]" name="value36">
+<input type="text" [(ngModel)]="values[37]" name="value37">
+<input type="text" [(ngModel)]="values[38]" name="value38">
+<input type="text" [(ngModel)]="values[39]" name="value39">
+<input type="text" [(ngModel)]="values[40]" name="value40">
+<input type="text" [(ngModel)]="values[41]" name="value41">
+<input type="text" [(ngModel)]="values[42]" name="value42">
+<input type="text" [(ngModel)]="values[43]" name="value43">
+<input type="text" [(ngModel)]="values[44]" name="value44">
+<input type="text" [(ngModel)]="values[45]" name="value45">
+<input type="text" [(ngModel)]="values[46]" name="value46">
+<input type="text" [(ngModel)]="values[47]" name="value47">
+<input type="text" [(ngModel)]="values[48]" name="value48">
+<input type="text" [(ngModel)]="values[49]" name="value49">
+</form>`
+})
+export class AppComponent {
+  copies: number[] = [];
+  values: string[] = [];
+  constructor() {
+    for (var i = 0; i < 50; i++) {
+      this.values[i] = `someValue${i}`;
+    }
+  }
+
+  setCopies(count: number) {
+    this.copies = [];
+    for (var i = 0; i < count; i++) {
+      this.copies.push(i);
+    }
+  }
+}
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  bootstrap: [AppComponent],
+  declarations: [AppComponent]
+})
+export class AppModule {
+}

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

@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<body>
+  <h2>Params</h2>
+  <form>
+    Copies:
+    <input type="number" name="copies" placeholder="copies" value="8">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Ng2 Large Form Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <app id="root">Loading...</app>
+  </div>
+
+  <script>
+    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
+      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + mainUrl + '">\u003c/script>');
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,10 @@
+import {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {AppModule} from './app';
+import {init} from './init';
+
+export function main() {
+  enableProdMode();
+  platformBrowserDynamic().bootstrapModule(AppModule).then(init);
+}

modules/benchmarks/src/largeform/ng2/index_aot.ts

@@ -0,0 +1,8 @@
+import {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+
+import {AppModuleNgFactory} from './app.ngfactory';
+import {init} from './init';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(init);

modules/benchmarks/src/largeform/ng2/init.ts

@@ -0,0 +1,32 @@
+import {ApplicationRef, NgModuleRef} from '@angular/core';
+
+import {bindAction, getIntParameter, profile} from '../../util';
+
+import {AppComponent, AppModule} from './app';
+
+const copies = getIntParameter('copies');
+
+export function init(moduleRef: NgModuleRef<AppModule>) {
+  let app: AppComponent;
+  let appRef: ApplicationRef;
+
+  function destroyDom() {
+    app.setCopies(0);
+    appRef.tick();
+  }
+
+  function createDom() {
+    app.setCopies(copies);
+    appRef.tick();
+  }
+
+  function noop() {}
+
+  const injector = moduleRef.injector;
+  appRef = injector.get(ApplicationRef);
+
+  app = appRef.components[0].instance;
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}