Skip to content

Commit 7379140

Browse files
yjbanovyjbanov
committed
feat(perf): add AngularDart v1 of table scrolling benchmark
1 parent 474f176 commit 7379140

File tree

17 files changed

+773
-10
lines changed

17 files changed

+773
-10
lines changed

‎modules/benchmarks_external/e2e_test/naive_infinite_scroll_perf.es6‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
var perfUtil = require('../../e2e_test_lib/e2e_test/perf_util');
2+
3+
describe('ng-dart1.x naive infinite scroll benchmark', function () {
4+
5+
var URL = 'benchmarks_external/web/naive_infinite_scroll/index.html';
6+
7+
afterEach(perfUtil.verifyNoBrowserErrors);
8+
9+
[1, 2, 4].forEach(function(appSize) {
10+
it('should run scroll benchmark and collect stats for appSize = ' +
11+
appSize, function() {
12+
perfUtil.runBenchmark({
13+
url: URL,
14+
id: 'ng1-dart1.x.naive_infinite_scroll',
15+
work: function() {
16+
browser.executeScript(
17+
'document.querySelector("scroll-app /deep/ #reset-btn").click()');
18+
browser.executeScript(
19+
'document.querySelector("scroll-app /deep/ #run-btn").click()');
20+
browser.sleep(1000);
21+
},
22+
params: [{
23+
name: 'appSize', value: appSize
24+
}, {
25+
name: 'iterationCount', value: 20, scale: 'linear'
26+
}, {
27+
name: 'scrollIncrement', value: 40
28+
}]
29+
});
30+
});
31+
});
32+
33+
});

‎modules/benchmarks_external/e2e_test/naive_infinite_scroll_spec.es6‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var testUtil = require('../../e2e_test_lib/e2e_test/test_util');
2+
3+
describe('ng-dart1.x naive infinite scroll benchmark', function () {
4+
5+
var URL = 'benchmarks_external/web/naive_infinite_scroll/index.html';
6+
7+
afterEach(testUtil.verifyNoBrowserErrors);
8+
9+
it('should not throw errors', function() {
10+
browser.get(URL);
11+
browser.executeScript(
12+
'document.querySelector("scroll-app /deep/ #reset-btn").click()');
13+
browser.executeScript(
14+
'document.querySelector("scroll-app /deep/ #run-btn").click()');
15+
browser.sleep(1000);
16+
});
17+
18+
});

‎modules/benchmarks_external/pubspec.yaml‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ environment:
44
dependencies:
55
e2e_test_lib:
66
path: ../e2e_test_lib
7-
angular: ">=1.0.0 <2.0.0"
7+
angular: '>=1.0.0 <2.0.0'
88
browser: '>=0.10.0 <0.11.0'
9+
fixnum: '>=0.9.0 <1.0.0'
910
transformers:
10-
- angular
11+
- angular:
12+
html_files:
13+
- web/naive_infinite_scroll/scroll_area.html
14+
- web/naive_infinite_scroll/scroll_item.html

‎modules/benchmarks_external/src/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
<li>
1212
<a href="largetable/largetable_benchmark.html">Largetable benchmark</a>
1313
</li>
14+
<li>
15+
<a href="naive_infinite_scroll/index.html">Naive infinite scroll benchmark</a>
16+
</li>
1417
</ul>
1518
</body>
1619
</html>

‎modules/benchmarks_external/src/naive_infinite_scroll/app.dart‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
library scroll_app;
2+
3+
import 'dart:async';
4+
import 'dart:html';
5+
import 'package:angular/angular.dart';
6+
import 'package:e2e_test_lib/benchmark_util.dart';
7+
8+
@Component(
9+
selector: 'scroll-app',
10+
template: '''
11+
<div>
12+
<div style="display: flex">
13+
<scroll-area scroll-top="scrollTop"></scroll-area>
14+
<div style="padding-left: 20px">
15+
<button id='run-btn'>Run</button>
16+
<button id='reset-btn'>Reset</button>
17+
</div>
18+
</div>
19+
<div ng-if="scrollAreas.length > 0">
20+
<p>Following tables are only here to add weight to the UI:</p>
21+
<scroll-area ng-repeat="scrollArea in scrollAreas"></scroll-area>
22+
</div>
23+
</div>
24+
''')
25+
class App implements ShadowRootAware {
26+
final VmTurnZone ngZone;
27+
List<int> scrollAreas;
28+
int scrollTop = 0;
29+
int iterationCount;
30+
int scrollIncrement;
31+
32+
App(this.ngZone) {
33+
int appSize = getIntParameter('appSize');
34+
iterationCount = getIntParameter('iterationCount');
35+
scrollIncrement = getIntParameter('scrollIncrement');
36+
appSize = appSize > 1 ? appSize - 1 : 0; // draw at least one table
37+
scrollAreas = new List.generate(appSize, (i) => i);
38+
}
39+
40+
@override
41+
void onShadowRoot(ShadowRoot shadowRoot) {
42+
bindAction('scroll-app /deep/ #run-btn', () {
43+
runBenchmark();
44+
});
45+
bindAction('scroll-app /deep/ #reset-btn', () {
46+
scrollTop = 0;
47+
});
48+
}
49+
50+
void runBenchmark() {
51+
int n = iterationCount;
52+
scheduleScroll() {
53+
new Future(() {
54+
scrollTop += scrollIncrement;
55+
n--;
56+
if (n > 0) {
57+
scheduleScroll();
58+
}
59+
});
60+
}
61+
scheduleScroll();
62+
}
63+
}

‎modules/benchmarks_external/src/naive_infinite_scroll/cells.dart‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
library cells;
2+
3+
import 'package:angular/angular.dart';
4+
import 'common.dart';
5+
6+
@Component(
7+
selector: 'company-name',
8+
template: '''
9+
<div style="width: {{width}}">{{company.name}}</div>
10+
''',
11+
map: const {
12+
'company': '=>company',
13+
'cell-width': '=>width',
14+
})
15+
class CompanyNameComponent {
16+
String width;
17+
Company company;
18+
}
19+
20+
@Component(
21+
selector: 'opportunity-name',
22+
template: '''
23+
<div style="width: {{width}}">{{opportunity.name}}</div>
24+
''',
25+
map: const {
26+
'opportunity': '=>opportunity',
27+
'cell-width': '=>width',
28+
})
29+
class OpportunityNameComponent {
30+
String width;
31+
Opportunity opportunity;
32+
}
33+
34+
@Component(
35+
selector: 'offering-name',
36+
template: '''
37+
<div style="width: {{width}}">{{offering.name}}</div>
38+
''',
39+
map: const {
40+
'offering': '=>offering',
41+
'cell-width': '=>width',
42+
})
43+
class OfferingNameComponent {
44+
String width;
45+
Offering offering;
46+
}
47+
48+
class Stage {
49+
String name;
50+
bool isDisabled;
51+
Map style;
52+
Function apply;
53+
54+
String get styleString => style != null
55+
? style.keys
56+
.map((prop) => '$prop: ${style[prop]}')
57+
.join(';')
58+
: '';
59+
}
60+
61+
@Component(
62+
selector: 'stage-buttons',
63+
template: '''
64+
<div style="width: {{width}}">
65+
<button ng-repeat="stage in stages"
66+
ng-disabled="stage.isDisabled"
67+
style="{{stage.styleString}}"
68+
ng-click="setStage(stage)">
69+
{{stage.name}}
70+
</button>
71+
</div>
72+
''',
73+
map: const {
74+
'offering': '=>offering',
75+
'cell-width': '=>width',
76+
})
77+
class StageButtonsComponent {
78+
Offering _offering;
79+
List<Stage> stages;
80+
String width;
81+
82+
Offering get offering => _offering;
83+
set offering(Offering offering) {
84+
_offering = offering;
85+
_computeStageButtons();
86+
}
87+
88+
setStage(Stage stage) {
89+
_offering.status = stage.name;
90+
_computeStageButtons();
91+
}
92+
93+
_computeStageButtons() {
94+
bool disabled = true;
95+
stages = STATUS_LIST
96+
.map((String status) {
97+
bool isCurrent = offering.status == status;
98+
var stage = new Stage();
99+
stage
100+
..name = status
101+
..isDisabled = disabled
102+
..style = {
103+
'background-color': disabled
104+
? '#DDD'
105+
: isCurrent
106+
? '#DDF'
107+
: '#FDD'
108+
};
109+
if (isCurrent) {
110+
disabled = false;
111+
}
112+
return stage;
113+
})
114+
.toList();
115+
}
116+
}
117+
118+
@Component(
119+
selector: 'account-cell',
120+
template: '''
121+
<div style="width: {{width}}">
122+
<a href="/account/{{account.accountId}}">
123+
{{account.accountId}}
124+
</a>
125+
</div>
126+
''',
127+
map: const {
128+
'account': '=>account',
129+
'cell-width': '=>width',
130+
})
131+
class AccountCellComponent {
132+
Account account;
133+
String width;
134+
}
135+
136+
@Component(
137+
selector: 'formatted-cell',
138+
template: '''<div style="width: {{width}}">{{formattedValue}}</div>''',
139+
map: const {
140+
'value': '=>value',
141+
'cell-width': '=>width',
142+
})
143+
class FormattedCellComponent {
144+
String formattedValue;
145+
String width;
146+
147+
set value(dynamic value) {
148+
if (value is DateTime) {
149+
formattedValue = '${value.month}/${value.day}/${value.year}';
150+
} else {
151+
formattedValue = value.toString();
152+
}
153+
}
154+
}

0 commit comments

Comments
 (0)