From 7e135f6d3aa7bebf033b587d4c6a6035adfd06ec Mon Sep 17 00:00:00 2001 From: Pawel Kozlowski Date: Wed, 23 Oct 2019 15:30:32 +0200 Subject: [PATCH] perf(ivy): class bindings benchmark (#33470) PR Close #33470 --- .../benchmarks/src/class_bindings/BUILD.bazel | 57 +++++++++++++++++++ .../src/class_bindings/app.component.ts | 38 +++++++++++++ .../src/class_bindings/app.module.ts | 21 +++++++ .../src/class_bindings/benchmark_perf.spec.ts | 38 +++++++++++++ .../class_bindings.component.ts | 36 ++++++++++++ .../benchmarks/src/class_bindings/index.html | 25 ++++++++ .../src/class_bindings/index_aot.ts | 15 +++++ 7 files changed, 230 insertions(+) create mode 100644 modules/benchmarks/src/class_bindings/BUILD.bazel create mode 100644 modules/benchmarks/src/class_bindings/app.component.ts create mode 100644 modules/benchmarks/src/class_bindings/app.module.ts create mode 100644 modules/benchmarks/src/class_bindings/benchmark_perf.spec.ts create mode 100644 modules/benchmarks/src/class_bindings/class_bindings.component.ts create mode 100644 modules/benchmarks/src/class_bindings/index.html create mode 100644 modules/benchmarks/src/class_bindings/index_aot.ts diff --git a/modules/benchmarks/src/class_bindings/BUILD.bazel b/modules/benchmarks/src/class_bindings/BUILD.bazel new file mode 100644 index 0000000000..6608e14b8c --- /dev/null +++ b/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", + ], +) diff --git a/modules/benchmarks/src/class_bindings/app.component.ts b/modules/benchmarks/src/class_bindings/app.component.ts new file mode 100644 index 0000000000..168a945fea --- /dev/null +++ b/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: ` + + + + + ` +}) +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; } +} \ No newline at end of file diff --git a/modules/benchmarks/src/class_bindings/app.module.ts b/modules/benchmarks/src/class_bindings/app.module.ts new file mode 100644 index 0000000000..b0af65ad2f --- /dev/null +++ b/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 { +} \ No newline at end of file diff --git a/modules/benchmarks/src/class_bindings/benchmark_perf.spec.ts b/modules/benchmarks/src/class_bindings/benchmark_perf.spec.ts new file mode 100644 index 0000000000..4dba88ccc2 --- /dev/null +++ b/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); + }); + +}); diff --git a/modules/benchmarks/src/class_bindings/class_bindings.component.ts b/modules/benchmarks/src/class_bindings/class_bindings.component.ts new file mode 100644 index 0000000000..3aa00a6753 --- /dev/null +++ b/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: ` +
+

{{ msg }}

+
+ {{ obj.text }} + one + two +
+ three + four + five +
+ six + seven + eight +
+
+
+
+ ` +}) +export class ClassBindingsComponent { + @Input() msg: string = ''; + @Input() list: string[]|null = null; +} \ No newline at end of file diff --git a/modules/benchmarks/src/class_bindings/index.html b/modules/benchmarks/src/class_bindings/index.html new file mode 100644 index 0000000000..372f1a3209 --- /dev/null +++ b/modules/benchmarks/src/class_bindings/index.html @@ -0,0 +1,25 @@ + + + + + + + + + + + +

Class Binding Benchmark

+ Loading... + + + + \ No newline at end of file diff --git a/modules/benchmarks/src/class_bindings/index_aot.ts b/modules/benchmarks/src/class_bindings/index_aot.ts new file mode 100644 index 0000000000..3e57cacf09 --- /dev/null +++ b/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);