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/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'));
+}