feat(core): add initial view engine (#14014)

The new view engine allows our codegen to produce less code,
as it can interpret view definitions during runtime.

The view engine is not feature complete yet, but already
allows to implement a tree benchmark based on it.

Part of #14013

modules/benchmarks/e2e_test/tree_perf.ts

@@ -50,6 +50,18 @@ describe('tree benchmark perf', () => {
         }).then(done, done.fail);
       });
 
+      it('should run for ng2 next', (done) => {
+        runTreeBenchmark({
+          id: `deepTree.ng2.next.${worker.id}`,
+          url: 'all/benchmarks/src/tree/ng2_next/index.html',
+          ignoreBrowserSynchronization: true,
+          work: worker.work,
+          prepare: worker.prepare,
+          // Can't use bundles as we use non exported code
+          extraParams: [{name: 'bundles', value: false}]
+        }).then(done, done.fail);
+      });
+
       it('should run for ng2 ftl', (done) => {
         runTreeBenchmark({
           id: `deepTree.ng2.ftl.${worker.id}`,
@@ -132,16 +144,27 @@ describe('tree benchmark perf', () => {
         }).then(done, done.fail);
       });
     });
+  });
 
-    it('should run ng2 changedetection', (done) => {
-      runTreeBenchmark({
-        id: `deepTree.ng2.changedetection`,
-        url: 'all/benchmarks/src/tree/ng2/index.html',
-        work: () => $('#detectChanges').click(),
-        setup: () => $('#createDom').click(),
-      }).then(done, done.fail);
-    });
+  it('should run ng2 changedetection', (done) => {
+    runTreeBenchmark({
+      id: `deepTree.ng2.changedetection`,
+      url: 'all/benchmarks/src/tree/ng2/index.html',
+      work: () => $('#detectChanges').click(),
+      setup: () => $('#createDom').click(),
+    }).then(done, done.fail);
+  });
 
+  it('should run ng2 next changedetection', (done) => {
+    runTreeBenchmark({
+      id: `deepTree.ng2.next.changedetection`,
+      url: 'all/benchmarks/src/tree/ng2_next/index.html',
+      work: () => $('#detectChanges').click(),
+      setup: () => $('#createDom').click(),
+      ignoreBrowserSynchronization: true,
+      // Can't use bundles as we use non exported code
+      extraParams: [{name: 'bundles', value: false}]
+    }).then(done, done.fail);
   });
 
   function runTreeBenchmark(config: {

modules/benchmarks/e2e_test/tree_spec.ts

@@ -21,7 +21,30 @@ describe('tree benchmark spec', () => {
 
   it('should work for ng2 detect changes', () => {
     let params = [{name: 'depth', value: 4}];
-    openBrowser({url: 'all/benchmarks/src/tree/ng2/index.html'});
+    openBrowser({url: 'all/benchmarks/src/tree/ng2/index.html', params});
+    $('#detectChanges').click();
+    expect($('#numberOfChecks').getText()).toContain('10');
+  });
+
+  it('should work for ng2 next', () => {
+    testTreeBenchmark({
+      url: 'all/benchmarks/src/tree/ng2_next/index.html',
+      ignoreBrowserSynchronization: true,
+      // Can't use bundles as we use non exported code
+      extraParams: [{name: 'bundles', value: false}]
+    });
+  });
+
+  it('should work for ng2 next detect changes', () => {
+    let params = [
+      {name: 'depth', value: 4},
+      // Can't use bundles as we use non exported code
+      {name: 'bundles', value: false}
+    ];
+    openBrowser({
+      url: 'all/benchmarks/src/tree/ng2_next/index.html',
+      ignoreBrowserSynchronization: true, params
+    });
     $('#detectChanges').click();
     expect($('#numberOfChecks').getText()).toContain('10');
   });

modules/benchmarks/src/tree/ng2_next/README.md

@@ -0,0 +1,46 @@
+# Ng2 Next Benchmark
+
+This benchmark uses the upcoming view engine for Angular 2, which moves
+more functionality from codegen into runtime to reduce generated code size.
+
+As we introduce more runtime code, we need to be very careful to not
+regress in performance, compared to the pure codegen solution.
+
+## Initial resuls: size of Deep Tree Benchmark
+
+File size for Tree benchmark template,
+view class of the component + the 2 embedded view classes (without imports nor host view factory):
+
+                               | bytes | ratio | bytes (gzip) | ratio (gzip)
+------------------------------ | ----- | ----- | ------------ | ------------
+Source template + annotation   | 245   | 1x    | 159          | 1x
+Gen code (Closure minified)    | 2693  | 11.9x | 746          | 4.7x
+New View Engine (minified)     | 868   | 3.5x  | 436          | 2.7x
+
+## Initial results: performance of Deep Tree Benchmark
+
+Measured locally on a MacBook Pro.
+
+BENCHMARK deepTree....
+Description:
+- bundles: false
+- depth: 11
+- forceGc: false
+- regressionSlopeMetric: scriptTime
+- sampleSize: 20
+- userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36
+
+...createOnly   |           gcAmount |             gcTime |        majorGcTime |     pureScriptTime |         renderTime |         scriptTime
+--------------- | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------
+ng2             |      11461.24+-21% |         12.35+-42% |         1.15+-429% |          72.49+-4% |          49.61+-4% |          82.69+-6%
+ng2 next        |       6207.77+-93% |          9.84+-84% |         3.35+-238% |          73.95+-4% |          49.86+-4% |         77.53+-10%
+
+...update       |           gcAmount |             gcTime |        majorGcTime |     pureScriptTime |         renderTime |         scriptTime
+--------------- | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------
+ng2             |               0.00 |         0.00+-435% |         0.00+-435% |          13.34+-8% |          28.55+-8% |          13.34+-8%
+ng2 next        |       175.02+-435% |         0.74+-435% |         0.00+-302% |         20.55+-12% |          28.00+-6% |         20.55+-12%
+
+...pure cd (10x) |           gcAmount |             gcTime |        majorGcTime |     pureScriptTime |         renderTime |         scriptTime
+--------------- | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------
+ng2             |      2155.57+-238% |         0.24+-238% |         0.00+-238% |          19.32+-9% |           2.54+-6% |          19.32+-9%
+ng2 next        |       908.12+-366% |         1.62+-325% |         0.49+-435% |          30.66+-6% |          2.62+-19% |          30.66+-6%

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

@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Ng2 Next Tree Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="detectChanges">detectChanges</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+    <button id="detectChangesProfile">profile detectChanges</button>
+  </p>
+
+  <div>
+    Change detection runs:<span id="numberOfChecks"></span>
+  </div>
+  <div>
+    <tree id="root">Loading...</tree>
+  </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/tree/ng2_next/index.ts

@@ -0,0 +1,56 @@
+/**
+ * @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 {ApplicationRef, NgModuleRef} from '@angular/core';
+
+import {bindAction, profile} from '../../util';
+import {buildTree, emptyTree} from '../util';
+
+import {AppModule, TreeComponent} from './tree';
+
+export function main() {
+  let tree: TreeComponent;
+  let appMod: AppModule;
+  let detectChangesRuns = 0;
+
+  function destroyDom() {
+    tree.data = emptyTree;
+    appMod.tick();
+  }
+
+  function createDom() {
+    tree.data = buildTree();
+    appMod.tick();
+  }
+
+  function detectChanges() {
+    for (let i = 0; i < 10; i++) {
+      appMod.tick();
+    }
+    detectChangesRuns += 10;
+    numberOfChecksEl.textContent = `${detectChangesRuns}`;
+  }
+
+  function noop() {}
+
+  const numberOfChecksEl = document.getElementById('numberOfChecks');
+
+  appMod = new AppModule();
+  appMod.bootstrap();
+  tree = appMod.rootComp;
+  const rootEl = document.querySelector('#root');
+  rootEl.textContent = '';
+  rootEl.appendChild(appMod.rootEl);
+
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+  bindAction('#detectChanges', detectChanges);
+  bindAction('#detectChangesProfile', profile(detectChanges, noop, 'detectChanges'));
+  bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+  bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+}

modules/benchmarks/src/tree/ng2_next/tree.ts

@@ -0,0 +1,86 @@
+/**
+ * @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 {NgIf} from '@angular/common';
+import {Component, NgModule, TemplateRef, ViewContainerRef, ViewEncapsulation} from '@angular/core';
+import {BindingType, DefaultServices, NodeFlags, NodeUpdater, ViewData, ViewDefinition, ViewFlags, anchorDef, checkAndUpdateView, createRootView, elementDef, providerDef, textDef, viewDef} from '@angular/core/src/view/index';
+import {DomSanitizer, DomSanitizerImpl, SafeStyle} from '@angular/platform-browser/src/security/dom_sanitization_service';
+
+import {TreeNode, emptyTree} from '../util';
+
+let trustedEmptyColor: SafeStyle;
+let trustedGreyColor: SafeStyle;
+
+export class TreeComponent {
+  data: TreeNode = emptyTree;
+  get bgColor() { return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor; }
+}
+
+let viewFlags = ViewFlags.DirectDom;
+
+const TreeComponent_Host: ViewDefinition = viewDef(viewFlags, [
+  elementDef(NodeFlags.None, 1, 'tree'),
+  providerDef(NodeFlags.None, TreeComponent, [], null, () => TreeComponent_0),
+]);
+
+const TreeComponent_1: ViewDefinition = viewDef(
+    viewFlags,
+    [
+      elementDef(NodeFlags.None, 1, 'tree'),
+      providerDef(NodeFlags.None, TreeComponent, [], {data: [0, 'data']}, () => TreeComponent_0),
+    ],
+    (updater: NodeUpdater, view: ViewData, cmp: TreeComponent) => {
+      updater.checkInline(view, 1, cmp.data.left);
+    });
+
+const TreeComponent_2: ViewDefinition = viewDef(
+    viewFlags,
+    [
+      elementDef(NodeFlags.None, 1, 'tree'),
+      providerDef(NodeFlags.None, TreeComponent, [], {data: [0, 'data']}, () => TreeComponent_0),
+    ],
+    (updater: NodeUpdater, view: ViewData, cmp: TreeComponent) => {
+      updater.checkInline(view, 1, cmp.data.right);
+    });
+
+const TreeComponent_0: ViewDefinition = viewDef(
+    viewFlags,
+    [
+      elementDef(
+          NodeFlags.None, 1, 'span', null, [[BindingType.ElementStyle, 'backgroundColor', null]]),
+      textDef([' ', ' ']),
+      anchorDef(NodeFlags.HasEmbeddedViews, 1, TreeComponent_1),
+      providerDef(NodeFlags.None, NgIf, [ViewContainerRef, TemplateRef], {ngIf: [0, 'ngIf']}),
+      anchorDef(NodeFlags.HasEmbeddedViews, 1, TreeComponent_2),
+      providerDef(NodeFlags.None, NgIf, [ViewContainerRef, TemplateRef], {ngIf: [0, 'ngIf']}),
+    ],
+    (updater: NodeUpdater, view: ViewData, cmp: TreeComponent) => {
+      updater.checkInline(view, 0, cmp.bgColor);
+      updater.checkInline(view, 1, cmp.data.value);
+      updater.checkInline(view, 3, cmp.data.left != null);
+      updater.checkInline(view, 5, cmp.data.right != null);
+    });
+
+export class AppModule {
+  public rootComp: TreeComponent;
+  public rootEl: any;
+  private rootView: ViewData;
+  private sanitizer: DomSanitizer;
+
+  constructor() {
+    this.sanitizer = new DomSanitizerImpl();
+    trustedEmptyColor = this.sanitizer.bypassSecurityTrustStyle('');
+    trustedGreyColor = this.sanitizer.bypassSecurityTrustStyle('grey');
+  }
+  bootstrap() {
+    this.rootView = createRootView(new DefaultServices(null, this.sanitizer), TreeComponent_Host);
+    this.rootComp = this.rootView.nodes[1].provider;
+    this.rootEl = this.rootView.nodes[0].renderNode;
+  }
+  tick() { checkAndUpdateView(this.rootView); }
+}