diff --git a/modules/benchmarks_external/e2e_test/naive_infinite_scroll_perf.es6 b/modules/benchmarks_external/e2e_test/naive_infinite_scroll_perf.es6 new file mode 100644 index 0000000000..5e184d3eb9 --- /dev/null +++ b/modules/benchmarks_external/e2e_test/naive_infinite_scroll_perf.es6 @@ -0,0 +1,33 @@ +var perfUtil = require('../../e2e_test_lib/e2e_test/perf_util'); + +describe('ng-dart1.x naive infinite scroll benchmark', function () { + + var URL = 'benchmarks_external/web/naive_infinite_scroll/index.html'; + + afterEach(perfUtil.verifyNoBrowserErrors); + + [1, 2, 4].forEach(function(appSize) { + it('should run scroll benchmark and collect stats for appSize = ' + + appSize, function() { + perfUtil.runBenchmark({ + url: URL, + id: 'ng1-dart1.x.naive_infinite_scroll', + work: function() { + browser.executeScript( + 'document.querySelector("scroll-app /deep/ #reset-btn").click()'); + browser.executeScript( + 'document.querySelector("scroll-app /deep/ #run-btn").click()'); + browser.sleep(1000); + }, + params: [{ + name: 'appSize', value: appSize + }, { + name: 'iterationCount', value: 20, scale: 'linear' + }, { + name: 'scrollIncrement', value: 40 + }] + }); + }); + }); + +}); diff --git a/modules/benchmarks_external/e2e_test/naive_infinite_scroll_spec.es6 b/modules/benchmarks_external/e2e_test/naive_infinite_scroll_spec.es6 new file mode 100644 index 0000000000..691e2f1790 --- /dev/null +++ b/modules/benchmarks_external/e2e_test/naive_infinite_scroll_spec.es6 @@ -0,0 +1,18 @@ +var testUtil = require('../../e2e_test_lib/e2e_test/test_util'); + +describe('ng-dart1.x naive infinite scroll benchmark', function () { + + var URL = 'benchmarks_external/web/naive_infinite_scroll/index.html'; + + afterEach(testUtil.verifyNoBrowserErrors); + + it('should not throw errors', function() { + browser.get(URL); + browser.executeScript( + 'document.querySelector("scroll-app /deep/ #reset-btn").click()'); + browser.executeScript( + 'document.querySelector("scroll-app /deep/ #run-btn").click()'); + browser.sleep(1000); + }); + +}); diff --git a/modules/benchmarks_external/pubspec.yaml b/modules/benchmarks_external/pubspec.yaml index 10c59f2752..aad86d9b6a 100644 --- a/modules/benchmarks_external/pubspec.yaml +++ b/modules/benchmarks_external/pubspec.yaml @@ -4,7 +4,11 @@ environment: dependencies: e2e_test_lib: path: ../e2e_test_lib - angular: ">=1.0.0 <2.0.0" + angular: '>=1.0.0 <2.0.0' browser: '>=0.10.0 <0.11.0' + fixnum: '>=0.9.0 <1.0.0' transformers: -- angular \ No newline at end of file +- angular: + html_files: + - web/naive_infinite_scroll/scroll_area.html + - web/naive_infinite_scroll/scroll_item.html diff --git a/modules/benchmarks_external/src/index.html b/modules/benchmarks_external/src/index.html index 86ee472808..8ab0defcbe 100644 --- a/modules/benchmarks_external/src/index.html +++ b/modules/benchmarks_external/src/index.html @@ -11,6 +11,9 @@
  • Largetable benchmark
    • +
  • + Naive infinite scroll benchmark +
    • diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/app.dart b/modules/benchmarks_external/src/naive_infinite_scroll/app.dart new file mode 100644 index 0000000000..c78d7f178d --- /dev/null +++ b/modules/benchmarks_external/src/naive_infinite_scroll/app.dart @@ -0,0 +1,63 @@ +library scroll_app; + +import 'dart:async'; +import 'dart:html'; +import 'package:angular/angular.dart'; +import 'package:e2e_test_lib/benchmark_util.dart'; + +@Component( + selector: 'scroll-app', + template: ''' +
    +
    + +
    + + +
    +
    +
    +

    Following tables are only here to add weight to the UI:

    + +
    +
    + ''') +class App implements ShadowRootAware { + final VmTurnZone ngZone; + List scrollAreas; + int scrollTop = 0; + int iterationCount; + int scrollIncrement; + + App(this.ngZone) { + int appSize = getIntParameter('appSize'); + iterationCount = getIntParameter('iterationCount'); + scrollIncrement = getIntParameter('scrollIncrement'); + appSize = appSize > 1 ? appSize - 1 : 0; // draw at least one table + scrollAreas = new List.generate(appSize, (i) => i); + } + + @override + void onShadowRoot(ShadowRoot shadowRoot) { + bindAction('scroll-app /deep/ #run-btn', () { + runBenchmark(); + }); + bindAction('scroll-app /deep/ #reset-btn', () { + scrollTop = 0; + }); + } + + void runBenchmark() { + int n = iterationCount; + scheduleScroll() { + new Future(() { + scrollTop += scrollIncrement; + n--; + if (n > 0) { + scheduleScroll(); + } + }); + } + scheduleScroll(); + } +} diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/cells.dart b/modules/benchmarks_external/src/naive_infinite_scroll/cells.dart new file mode 100644 index 0000000000..62dc070a8c --- /dev/null +++ b/modules/benchmarks_external/src/naive_infinite_scroll/cells.dart @@ -0,0 +1,154 @@ +library cells; + +import 'package:angular/angular.dart'; +import 'common.dart'; + +@Component( + selector: 'company-name', + template: ''' +
    {{company.name}}
    + ''', + map: const { + 'company': '=>company', + 'cell-width': '=>width', + }) +class CompanyNameComponent { + String width; + Company company; +} + +@Component( + selector: 'opportunity-name', + template: ''' +
    {{opportunity.name}}
    + ''', + map: const { + 'opportunity': '=>opportunity', + 'cell-width': '=>width', + }) +class OpportunityNameComponent { + String width; + Opportunity opportunity; +} + +@Component( + selector: 'offering-name', + template: ''' +
    {{offering.name}}
    + ''', + map: const { + 'offering': '=>offering', + 'cell-width': '=>width', + }) +class OfferingNameComponent { + String width; + Offering offering; +} + +class Stage { + String name; + bool isDisabled; + Map style; + Function apply; + + String get styleString => style != null + ? style.keys + .map((prop) => '$prop: ${style[prop]}') + .join(';') + : ''; +} + +@Component( + selector: 'stage-buttons', + template: ''' +
    + +
    + ''', + map: const { + 'offering': '=>offering', + 'cell-width': '=>width', + }) +class StageButtonsComponent { + Offering _offering; + List stages; + String width; + + Offering get offering => _offering; + set offering(Offering offering) { + _offering = offering; + _computeStageButtons(); + } + + setStage(Stage stage) { + _offering.status = stage.name; + _computeStageButtons(); + } + + _computeStageButtons() { + bool disabled = true; + stages = STATUS_LIST + .map((String status) { + bool isCurrent = offering.status == status; + var stage = new Stage(); + stage + ..name = status + ..isDisabled = disabled + ..style = { + 'background-color': disabled + ? '#DDD' + : isCurrent + ? '#DDF' + : '#FDD' + }; + if (isCurrent) { + disabled = false; + } + return stage; + }) + .toList(); + } +} + +@Component( + selector: 'account-cell', + template: ''' +
    + + {{account.accountId}} + +
    + ''', + map: const { + 'account': '=>account', + 'cell-width': '=>width', + }) +class AccountCellComponent { + Account account; + String width; +} + +@Component( + selector: 'formatted-cell', + template: '''
    {{formattedValue}}
    ''', + map: const { + 'value': '=>value', + 'cell-width': '=>width', + }) +class FormattedCellComponent { + String formattedValue; + String width; + + set value(dynamic value) { + if (value is DateTime) { + formattedValue = '${value.month}/${value.day}/${value.year}'; + } else { + formattedValue = value.toString(); + } + } +} diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/common.dart b/modules/benchmarks_external/src/naive_infinite_scroll/common.dart new file mode 100644 index 0000000000..540d8896e3 --- /dev/null +++ b/modules/benchmarks_external/src/naive_infinite_scroll/common.dart @@ -0,0 +1,211 @@ +library common.stuff; + +import 'dart:async'; +import 'dart:collection'; +import 'package:fixnum/fixnum.dart'; +import 'package:observe/observe.dart'; + +const ITEMS = 1000; +const ITEM_HEIGHT = 40; +const VISIBLE_ITEMS = 17; + +const HEIGHT = ITEMS * ITEM_HEIGHT; +const VIEW_PORT_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS; + +const COMPANY_NAME_WIDTH = 100; +const OPPORTUNITY_NAME_WIDTH = 100; +const OFFERING_NAME_WIDTH = 100; +const ACCOUNT_CELL_WIDTH = 50; +const BASE_POINTS_WIDTH = 50; +const KICKER_POINTS_WIDTH = 50; +const STAGE_BUTTONS_WIDTH = 220; +const BUNDLES_WIDTH = 120; +const DUE_DATE_WIDTH = 100; +const END_DATE_WIDTH = 100; +const AAT_STATUS_WIDTH = 100; +const ROW_WIDTH = COMPANY_NAME_WIDTH + + OPPORTUNITY_NAME_WIDTH + + OFFERING_NAME_WIDTH + + ACCOUNT_CELL_WIDTH + + BASE_POINTS_WIDTH + + KICKER_POINTS_WIDTH + + STAGE_BUTTONS_WIDTH + + BUNDLES_WIDTH + + DUE_DATE_WIDTH + + END_DATE_WIDTH + + AAT_STATUS_WIDTH; + +const STATUS_LIST = const [ + 'Planned', 'Pitched', 'Won', 'Lost' +]; + +const AAT_STATUS_LIST = const [ + 'Active', 'Passive', 'Abandoned' +]; + +// Imitate Streamy entities. + +class RawEntity +extends Object +with MapMixin +implements ObservableMap { + + ObservableMap _data = new ObservableMap(); + + @override + Iterable get keys => _data.keys; + + @override + void clear() { + _data.clear(); + } + + @override + operator[](String key) { + if (!key.contains('.')) { + return _data[key]; + } + var pieces = key.split('.'); + var last = pieces.removeLast(); + var target = _resolve(pieces, this); + if (target == null) { + return null; + } + return target[last]; + } + + @override + operator[]=(String key, value) { + if (!key.contains('.')) { + _data[key] = value; + return; + } + var pieces = key.split('.'); + var last = pieces.removeLast(); + var target = _resolve(pieces, this); + target[last] = value; + } + + @override + remove(String key) { + if (!key.contains('.')) { + return _data.remove(key); + } + var pieces = key.split('.'); + var last = pieces.removeLast(); + var target = _resolve(pieces, this); + return target.remove(last); + } + + _resolve(List pieces, start) { + var cur = start; + for (var i = 0; i < pieces.length; i++) { + cur = cur[pieces[i]]; + if (cur == null) { + return null; + } + } + return cur; + } + + @override + Stream> get changes => _data.changes; + @override + bool get hasObservers => _data.hasObservers; + @override + bool deliverChanges() => _data.deliverChanges(); + @override + notifyPropertyChange(Symbol field, Object oldValue, Object newValue) => + _data.notifyPropertyChange(field, oldValue, newValue); + @override + void notifyChange(ChangeRecord record) { + _data.notifyChange(record); + } + @override + void observed() { + _data.observed(); + } + @override + void unobserved() { + _data.observed(); + } +} + +class Company extends RawEntity { + String get name => this['name']; + set name(String val) { + this['name'] = val; + } +} + +class Offering extends RawEntity { + String get name => this['name']; + set name(String val) { + this['name'] = val; + } + + Company get company => this['company']; + set company(Company val) { + this['company'] = val; + } + + Opportunity get opportunity => this['opportunity']; + set opportunity(Opportunity val) { + this['opportunity'] = val; + } + + Account get account => this['account']; + set account(Account val) { + this['account'] = val; + } + + int get basePoints => this['basePoints']; + set basePoints(int val) { + this['basePoints'] = val; + } + + int get kickerPoints => this['kickerPoints']; + set kickerPoints(int val) { + this['kickerPoints'] = val; + } + + String get status => this['status']; + set status(String val) { + this['status'] = val; + } + + String get bundles => this['bundles']; + set bundles(String val) { + this['bundles'] = val; + } + + DateTime get dueDate => this['dueDate']; + set dueDate(DateTime val) { + this['dueDate'] = val; + } + + DateTime get endDate => this['endDate']; + set endDate(DateTime val) { + this['endDate'] = val; + } + + String get aatStatus => this['aatStatus']; + set aatStatus(String val) { + this['aatStatus'] = val; + } +} + +class Opportunity extends RawEntity { + String get name => this['name']; + set name(String val) { + this['name'] = val; + } + +} + +class Account extends RawEntity { + Int64 get accountId => this['accountId']; + set accountId(Int64 val) { + this['accountId'] = val; + } +} diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/index.dart b/modules/benchmarks_external/src/naive_infinite_scroll/index.dart new file mode 100644 index 0000000000..b8a9df4070 --- /dev/null +++ b/modules/benchmarks_external/src/naive_infinite_scroll/index.dart @@ -0,0 +1,29 @@ +library naive_infinite_scroll; + +import 'package:angular/angular.dart'; +import 'package:angular/application_factory.dart'; +import 'app.dart'; +import 'scroll_area.dart'; +import 'scroll_item.dart'; +import 'cells.dart'; + +class MyAppModule extends Module { + MyAppModule() { + bind(ResourceResolverConfig, toValue: new ResourceResolverConfig.resolveRelativeUrls(false)); + bind(App); + bind(ScrollAreaComponent); + bind(ScrollItemComponent); + bind(CompanyNameComponent); + bind(OpportunityNameComponent); + bind(OfferingNameComponent); + bind(AccountCellComponent); + bind(StageButtonsComponent); + bind(FormattedCellComponent); + } +} + +void main() { + applicationFactory() + .addModule(new MyAppModule()) + .run(); +} diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/index.html b/modules/benchmarks_external/src/naive_infinite_scroll/index.html new file mode 100644 index 0000000000..bbdb070cec --- /dev/null +++ b/modules/benchmarks_external/src/naive_infinite_scroll/index.html @@ -0,0 +1,16 @@ + + + + AngularDart Scrolling Benchmark + + +
    + App size:
    + Iteration count:
    + Scroll increment:
    +
    + + + $SCRIPTS$ + + diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/random_data.dart b/modules/benchmarks_external/src/naive_infinite_scroll/random_data.dart new file mode 100644 index 0000000000..1cdfe2fabf --- /dev/null +++ b/modules/benchmarks_external/src/naive_infinite_scroll/random_data.dart @@ -0,0 +1,62 @@ +library random_data; + +import 'common.dart'; +import 'package:fixnum/fixnum.dart'; + +List generateOfferings(int count) => + new List.generate(count, generateOffering); + +Offering generateOffering(int seed) { + final res = new Offering(); + res.name = generateName(seed++); + res.company = generateCompany(seed++); + res.opportunity = generateOpportunity(seed++); + res.account = generateAccount(seed++); + res.basePoints = seed % 10; + res.kickerPoints = seed % 4; + res.status = STATUS_LIST[seed % STATUS_LIST.length]; + res.bundles = randomString(seed++); + res.dueDate = randomDate(seed++); + res.endDate = randomDate(seed++, minDate: res.dueDate); + res.aatStatus = AAT_STATUS_LIST[seed % AAT_STATUS_LIST.length]; + return res; +} + +Company generateCompany(int seed) { + return new Company() + ..name = generateName(seed); +} + +Opportunity generateOpportunity(int seed) { + return new Opportunity() + ..name = generateName(seed); +} + +Account generateAccount(int seed) { + return new Account() + ..accountId = new Int64(seed); +} + +String generateName(int seed) { + const names = const [ + 'Foo', 'Bar', 'Baz', 'Qux', 'Quux', 'Garply', 'Waldo', 'Fred', 'Plugh', + 'Xyzzy', 'Thud', 'Cruft', 'Stuff' + ]; + return names[seed % names.length]; +} + +DateTime randomDate(int seed, {DateTime minDate}) { + if (minDate == null) { + minDate = new DateTime.now(); + } + + const offsets = const[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; + return minDate.add(new Duration(days: offsets[seed % offsets.length])); +} + +String randomString(int seed) { + return new String.fromCharCodes(new List.generate( + const[5, 7, 9, 11, 13][seed % 5], + (i) => 'a'.codeUnitAt(0) + const[0, 1, 2, 3, 4, 5, 6, 7, 8][seed % 9] + i + )); +} diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/scroll_area.dart b/modules/benchmarks_external/src/naive_infinite_scroll/scroll_area.dart new file mode 100644 index 0000000000..1a5bc61588 --- /dev/null +++ b/modules/benchmarks_external/src/naive_infinite_scroll/scroll_area.dart @@ -0,0 +1,58 @@ +library scroll_area; + +import 'dart:html'; +import 'dart:math' as math; +import 'package:angular/angular.dart'; +import 'common.dart'; +import 'random_data.dart'; + +@Component( + selector: 'scroll-area', + templateUrl: 'scroll_area.html', + map: const { + 'scroll-top': '=>scrollTop', + }) +class ScrollAreaComponent implements ShadowRootAware { + Element scrollDiv; + List _fullList; + List visibleItems = []; + + // Init empty maps and populate later. There seems to be a bug in Angular + // that makes it choke on pre-populated style maps. + final Map paddingStyle = {}; + final Map innerStyle = {}; + final Map scrollDivStyle = {}; + + ScrollAreaComponent() { + _fullList = generateOfferings(ITEMS); + } + + @override + void onShadowRoot(ShadowRoot shadowRoot) { + scrollDiv = shadowRoot.querySelector('#scrollDiv'); + onScroll(); + scrollDivStyle.addAll({ + 'height': '${VIEW_PORT_HEIGHT}px', + 'width': '1000px', + 'border': '1px solid #000', + 'overflow': 'scroll', + }); + innerStyle['width'] = '${ROW_WIDTH}px'; + } + + set scrollTop(int value) { + if (value == null || scrollDiv == null) return; + scrollDiv.scrollTop = value; + } + + void onScroll() { + int scrollY = scrollDiv.scrollTop; + int iStart = scrollY == 0 ? 0 : (scrollY / ITEM_HEIGHT).floor(); + int iEnd = math.min(iStart + VISIBLE_ITEMS + 1, _fullList.length); + int padding = iStart * ITEM_HEIGHT; + innerStyle['height'] = '${HEIGHT - padding}px'; + paddingStyle['height'] = '${padding}px'; + visibleItems..clear()..addAll(_fullList.getRange(iStart, iEnd)); + } + +} diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/scroll_area.html b/modules/benchmarks_external/src/naive_infinite_scroll/scroll_area.html new file mode 100644 index 0000000000..ad9729c20a --- /dev/null +++ b/modules/benchmarks_external/src/naive_infinite_scroll/scroll_area.html @@ -0,0 +1,13 @@ +
    +
    +
    +
    + + +
    +
    +
    diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/scroll_item.dart b/modules/benchmarks_external/src/naive_infinite_scroll/scroll_item.dart new file mode 100644 index 0000000000..73fa539190 --- /dev/null +++ b/modules/benchmarks_external/src/naive_infinite_scroll/scroll_item.dart @@ -0,0 +1,41 @@ +library scroll_item; + +import 'package:angular/angular.dart'; +import 'common.dart'; + +@Component( + selector: 'scroll-item', + templateUrl: 'scroll_item.html', + map: const { + 'offering': '=>offering', + }) +class ScrollItemComponent implements ShadowRootAware { + + Offering offering; + + // Init empty maps and populate later. There seems to be a bug in Angular + // that makes it choke on pre-populated style maps. + Map itemStyle = {}; + + @override + void onShadowRoot(_) { + itemStyle.addAll({ + 'height': '${ITEM_HEIGHT}px', + 'line-height': '${ITEM_HEIGHT}px', + 'font-size': '18px', + 'display': 'flex', + 'justify-content': 'space-between', + }); + } + get companyNameWidth => '${COMPANY_NAME_WIDTH}px'; + get opportunityNameWidth => '${OPPORTUNITY_NAME_WIDTH}px'; + get offeringNameWidth => '${OFFERING_NAME_WIDTH}px'; + get accountCellWidth => '${ACCOUNT_CELL_WIDTH}px'; + get basePointsWidth => '${BASE_POINTS_WIDTH}px'; + get kickerPointsWidth => '${KICKER_POINTS_WIDTH}px'; + get stageButtonsWidth => '${STAGE_BUTTONS_WIDTH}px'; + get bundlesWidth => '${BUNDLES_WIDTH}px'; + get dueDateWidth => '${DUE_DATE_WIDTH}px'; + get endDateWidth => '${END_DATE_WIDTH}px'; + get aatStatusWidth => '${AAT_STATUS_WIDTH}px'; +} diff --git a/modules/benchmarks_external/src/naive_infinite_scroll/scroll_item.html b/modules/benchmarks_external/src/naive_infinite_scroll/scroll_item.html new file mode 100644 index 0000000000..fea9512744 --- /dev/null +++ b/modules/benchmarks_external/src/naive_infinite_scroll/scroll_item.html @@ -0,0 +1,45 @@ +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    diff --git a/modules/e2e_test_lib/e2e_test/perf_util.es6 b/modules/e2e_test_lib/e2e_test/perf_util.es6 index 628864d115..274ae2b4d9 100644 --- a/modules/e2e_test_lib/e2e_test/perf_util.es6 +++ b/modules/e2e_test_lib/e2e_test/perf_util.es6 @@ -3,10 +3,23 @@ var webdriver = require('protractor/node_modules/selenium-webdriver'); module.exports = { runClickBenchmark: runClickBenchmark, + runBenchmark: runBenchmark, verifyNoBrowserErrors: benchpress.verifyNoBrowserErrors }; function runClickBenchmark(config) { + var buttons = config.buttons.map(function(selector) { + return $(selector); + }); + config.work = function() { + buttons.forEach(function(button) { + button.click(); + }); + } + runBenchmark(config); +} + +function runBenchmark(config) { var globalParams = browser.params; getScaleFactor(globalParams.benchmark.scaling).then(function(scaleFactor) { var params = config.params.map(function(param) { @@ -23,14 +36,7 @@ function runClickBenchmark(config) { return param.name + '=' + param.value; }).join('&')); browser.get(url); - var buttons = config.buttons.map(function(selector) { - return $(selector); - }); - benchpress.runBenchmark(benchmarkConfig, function() { - buttons.forEach(function(button) { - button.click(); - }); - }); + benchpress.runBenchmark(benchmarkConfig, config.work); }); } diff --git a/protractor-e2e-js.conf.js b/protractor-e2e-js.conf.js index c29d611e39..5752da40a6 100644 --- a/protractor-e2e-js.conf.js +++ b/protractor-e2e-js.conf.js @@ -1,3 +1,6 @@ var config = exports.config = require('./protractor-e2e-shared.js').config; config.baseUrl = 'http://localhost:8001/'; +// TODO: remove exclusion when JS verison of scrolling benchmark is available +config.exclude = config.exclude || []; +config.exclude.push('dist/cjs/e2e_test/benchmarks_external/e2e_test/naive_infinite_scroll_spec.js'); diff --git a/protractor-perf-js.conf.js b/protractor-perf-js.conf.js index 841a95e588..3bf5655e0f 100644 --- a/protractor-perf-js.conf.js +++ b/protractor-perf-js.conf.js @@ -1,3 +1,7 @@ var config = exports.config = require('./protractor-perf-shared.js').config; config.baseUrl = 'http://localhost:8001/'; config.params.lang = 'js'; + +// TODO: remove exclusion when JS verison of scrolling benchmark is available +config.exclude = config.exclude || []; +config.exclude.push('dist/cjs/e2e_test/benchmarks_external/e2e_test/naive_infinite_scroll_perf.js');