perf(ivy): class bindings benchmark (#33470)

PR Close #33470

modules/benchmarks/src/class_bindings/BUILD.bazel

@@ -0,0 +1,57 @@
+package(default_visibility = ["//modules/benchmarks:__subpackages__"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_library")
+load("@npm_bazel_typescript//:index.bzl", "ts_devserver")
+load("//modules/benchmarks:benchmark_test.bzl", "benchmark_test")
+
+ng_module(
+    name = "application_lib",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//packages:types",
+        "//packages/common",
+        "//packages/core",
+        "//packages/platform-browser",
+        "@npm//rxjs",
+    ],
+)
+
+ts_library(
+    name = "perf_lib",
+    testonly = 1,
+    srcs = ["benchmark_perf.spec.ts"],
+    deps = [
+        "//modules/e2e_util",
+        "@npm//protractor",
+    ],
+)
+
+ng_rollup_bundle(
+    name = "bundle",
+    entry_point = ":index_aot.ts",
+    deps = [
+        ":application_lib",
+        "@npm//rxjs",
+    ],
+)
+
+ts_devserver(
+    name = "prodserver",
+    index_html = "index.html",
+    port = 4200,
+    static_files = [
+        ":bundle.min_debug.es2015.js",
+        "@npm//:node_modules/zone.js/dist/zone.js",
+    ],
+)
+
+benchmark_test(
+    name = "perf",
+    server = ":prodserver",
+    deps = [
+        ":perf_lib",
+    ],
+)

modules/benchmarks/src/class_bindings/app.component.ts

@@ -0,0 +1,38 @@
+/**
+ * @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 {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-component',
+  template: `
+    <button id="create" (click)="create()">Create</button>
+    <button id="update" (click)="update()">Update</button>
+    <button id="destroy" (click)="destroy()">Destroy</button>
+    <class-bindings *ngIf="show" [msg]="msg" [list]="list"><class-bindings>
+  `
+})
+export class AppComponent {
+  show = false;
+  msg = 'hello';
+  list: {i: number, text: string}[] = [];
+
+  constructor() {
+    for (let i = 0; i < 1000; i++) {
+      this.list.push({i, text: 'foobar' + i});
+    }
+  }
+
+  create() { this.show = true; }
+
+  update() {
+    this.msg = this.msg === 'hello' ? 'bye' : 'hello';
+    this.list[0].text = this.msg;
+  }
+
+  destroy() { this.show = false; }
+}

modules/benchmarks/src/class_bindings/app.module.ts

@@ -0,0 +1,21 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {AppComponent} from './app.component';
+import {ClassBindingsComponent} from './class_bindings.component';
+
+@NgModule({
+  declarations: [AppComponent, ClassBindingsComponent],
+  imports: [BrowserModule],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+}

modules/benchmarks/src/class_bindings/benchmark_perf.spec.ts

@@ -0,0 +1,38 @@
+/**
+ * @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 {$, browser} from 'protractor';
+import {runBenchmark} from '../../../e2e_util/perf_util';
+
+describe('benchmarks', () => {
+
+  it('should work for update', done => {
+    browser.rootEl = '#root';
+    runBenchmark({
+      id: 'create',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      prepare: () => $('#destroy').click(),
+      work: () => $('#create').click()
+    }).then(done, done.fail);
+  });
+
+  it('should work for update', done => {
+    browser.rootEl = '#root';
+    runBenchmark({
+      id: 'update',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      prepare: () => $('#create').click(),
+      work: () => $('#update').click()
+    }).then(done, done.fail);
+  });
+
+});

modules/benchmarks/src/class_bindings/class_bindings.component.ts

@@ -0,0 +1,36 @@
+/**
+ * @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 {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'class-bindings',
+  template: `
+  <div>
+  <p>{{ msg }}</p>
+  <div *ngFor="let obj of list; let i = index" [title]="msg + i">
+    <span [class]="msg">{{ obj.text }}</span>
+    <span class="baz">one</span>
+    <span class="qux">two</span>
+    <div>
+      <span class="qux">three</span>
+      <span class="qux">four</span>
+      <span class="baz">five</span>
+      <div>
+        <span class="qux">six</span>
+        <span class="baz">seven</span>
+        <span [class]="msg">eight</span>
+      </div>
+    </div>
+  </div>
+</div>
+  `
+})
+export class ClassBindingsComponent {
+  @Input() msg: string = '';
+  @Input() list: string[]|null = null;
+}

modules/benchmarks/src/class_bindings/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+
+<head>
+  <!-- Prevent the browser from requesting any favicon. -->
+  <link rel="icon" href="data:,">
+  <style>
+    .hello {
+      color: red;
+    }
+
+    .bye {
+      color: blue;
+    }
+  </style>
+</head>
+
+<body>
+
+  <h1>Class Binding Benchmark</h1>
+  <app-component>Loading...</app-component>
+
+</body>
+
+</html>

modules/benchmarks/src/class_bindings/index_aot.ts

@@ -0,0 +1,15 @@
+/**
+ * @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 {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+
+import {AppModuleNgFactory} from './app.module.ngfactory';
+
+enableProdMode();
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);