* Почему Angular 2 такой быстрый и как его ускорить еще сильнее? * Как работает Change Detection механизм и как им управлять? * Зачем нам Zone.js и Функциональное Реактивное Программирование? * Как работать с Redux и Mobx в Angular 2 и что можно от этого выиграть? Об этом и ряде других вещей вы узнаете из этого доклада.

1. Превышаем скоростные лимиты
с Angular 2
Алексей Охрименко
IPONWEB
1
#rtb_techday

2. 2
#rtb_techday

3. 3
#rtb_techday

4. 4
#rtb_techday

5. 5

6. Алексей
Охрименко
Twitter: @Ai_boy
6

7. 7

8. IPONWEB
RTB
DSP
SSP
8

9. последствия превышения
скорости (в реальной
жизни)
9

10. последствия
превышения
скорости*
* - поищите в Google Image - 4-ый результат
10

11. Всегда
успеете…
11

12. А где тогда скорость превышать?
12

13. 13

14. 14

15. Angular 2

16. 16
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'project-name-app',
template: `
<h1 (click)='onClick()'>
{{title}}
</h1>
`,
styleUrls: ['project-name.component.css']
})
export class PROJECTNAMEAppComponent {
title = 'project-name works!';
}

17. 17
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'project-name-app',
template: `
<h1 (click)='onClick()'>
{{title}}
</h1>
`,
styleUrls: ['project-name.component.css']
})
export class PROJECTNAMEAppComponent {
title = 'project-name works!';
}

18. 18
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'project-name-app',
template: `
<h1 (click)='onClick()'>
{{title}}
</h1>
`,
styleUrls: ['project-name.component.css']
})
export class PROJECTNAMEAppComponent {
title = 'project-name works!';
}

19. Angular 2, Angular 2…
нас и [НАШ_FRAMEWORK]
неплохо кормит
19

20. 20

21. А что значит
«скорость»?
21

22. Скорость
загрузки
22

23. Скорость
загрузки
Размер
23

24. Скорость
загрузки
Размер
LazyLoading
24

25. Скорость
загрузки
Скорость работы
Размер
LazyLoading
25

26. Скорость
загрузки
Скорость работы
Размер
LazyLoading
Обьем работы
26

27. Скорость
загрузки
Скорость работы
Размер
LazyLoading
Обьем работы Производительность
27

28. Скорость
загрузки
Скорость работы
Размер
LazyLoading
Обьем работы Производительность
Память
28

29. Скорость
загрузки
Скорость работы
Размер
LazyLoading
Обьем работы
Многопоточность
Производительность
Память
29

30. Скорость
загрузки
Скорость работы
Размер
LazyLoading
Обьем работы
Многопоточность
Производительность
Память
30

31. Скорость работы
31

32. https://github.com/krausest/
js-framework-benchmark
https://github.com/mathieuancelin/
js-repaint-perfs
32

33. 33

34. Кол-во перерисовок в секунду (больше лучше)
Angular 1
Angular 2
React
Elm
0 9 18 27 36
34

35. Наша цель … 90 RR
35

36. Кол-во перерисовок в секунду (больше лучше)
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
36

37. Старая версия
Angular 2
37

38. Alpha 44
38

39. Alpha 44 —> v2.1.2
39

40. Alpha 44
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
40

41. v2.1.2
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
41

42. v2.1.2
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
42

43. На самом деле все
просто…
43

44. Angular 2 Performance Checklist
44

45. import {enableProdMode} from '@angular/core';
enableProdMode();
45

46. 300% в Edge
enableProdMode()
46

47. Alpha 44
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
47

48. v2.1.2 + enableProdMod()
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
48

49. function getData(keepIdentity) {
var oldData = data;
if (!keepIdentity) { // reset for each tick
data = [];
for (var i = 1; i <= ENV.rows; i++) {
data.push({ … });
data.push({ … });
}
}
}
49

50. @Page({
template: `
<div
*ngFor="let post of posts;trackBy:identify">
{{post.data}}
</div>
`
})
export class SomeConponent {
identify(index,item){
return post.id
}
}
50

51. @Page({
template: `
<div
*ngFor="let post of posts;trackBy:identify">
{{post.data}}
</div>
`
})
export class SomeConponent {
identify(index,item){
return post.id
}
}
51

52. v2.1.2 + enableProdMod()
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
52

53. trackBy
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
53

54. AOT
Ahead Of Time template compilation
54

55. 55

56. 56

57. Angular CLI
ng serve ——aot
ng build ——aot
57

58. trackBy
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
58

59. AOT
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
59

60. WebWorkers
60

61. import {bootstrapWorkerUi} from '@angular/platform-webworker';
import {enableProdMode} from '@angular/core';
export function main() {
enableProdMode();
bootstrapWorkerUi('loader.js');
}
61

62. import {bootstrapWorkerUi} from '@angular/platform-webworker';
import {enableProdMode} from '@angular/core';
export function main() {
enableProdMode();
bootstrapWorkerUi('loader.js');
}
62

63. @NgModule({
imports: [WorkerAppModule],
bootstrap: [AppComponent],
declarations: [AppComponent]
})
class WebWorkerModule {}
export function main() {
enableProdMode();
platformWorkerAppDynamic().bootstrapModule(WebWorkerModule);
}
63

64. @NgModule({
imports: [WorkerAppModule],
bootstrap: [AppComponent],
declarations: [AppComponent]
})
class WebWorkerModule {}
export function main() {
enableProdMode();
platformWorkerAppDynamic().bootstrapModule(WebWorkerModule);
}
64

65. AOT
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
65

66. webWorkers
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
66

67. 67

68. Кол-во перерисовок в секунду (больше лучше)
Angular 1
Angular 2
React
Elm
0 10 20 30 40 50 60 70 80 90
68

69. Еще раз
• enableProd()
• trackBy
• AOT
• WebWorkers
69

70. Заглянем под капот
70

71. Scott
Hanselman
71

72. ZoneJs
72

73. 73

74. const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
74

75. 75

76. process.on('uncaughtException', (err) => {
console.log(`Caught exception: ${err}`);
});
76

77. 77

78. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone);
}
setTimeout(someCallback, 0);
78

79. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone);
}
setTimeout(someCallback, 0);
79

80. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone);
}
setTimeout(someCallback, 0);
80

81. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone);
}
setTimeout(someCallback, 0);
81

82. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone);//TRUE
}
setTimeout(someCallback, 0);
82

83. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone);
}
setTimeout(someCallback, 0);
83

84. Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(someCallback, 0);
});
function someCallback() {
console.log(Zone.current.inTheZone);//FALSE
}
setTimeout(someCallback, 0);
84

85. Change Detection
85

86. 86

87. 87

88. 88

89. 89

90. 90

91. // very simplified version of actual source
class ApplicationRef {
changeDetectorRefs:ChangeDetectorRef[] = [];
constructor(private zone: NgZone) {
this.zone.onTurnDone
.subscribe(() => {
this.zone.run(() => this.tick()
});
}
tick() {
this.changeDetectorRefs
.forEach((ref) => ref.detectChanges());
}
} 91

92. // very simplified version of actual source
class ApplicationRef {
changeDetectorRefs:ChangeDetectorRef[] = [];
constructor(private zone: NgZone) {
this.zone.onTurnDone
.subscribe(() => {
this.zone.run(() => this.tick()
});
}
tick() {
this.changeDetectorRefs
.forEach((ref) => ref.detectChanges());
}
} 92

93. // very simplified version of actual source
class ApplicationRef {
changeDetectorRefs:ChangeDetectorRef[] = [];
constructor(private zone: NgZone) {
this.zone.onTurnDone
.subscribe(() => {
this.zone.run(() => this.tick()
});
}
tick() {
this.changeDetectorRefs
.forEach((ref) => ref.detectChanges());
}
} 93

94. // very simplified version of actual source
class ApplicationRef {
changeDetectorRefs:ChangeDetectorRef[] = [];
constructor(private zone: NgZone) {
this.zone.onTurnDone
.subscribe(() => {
this.zone.run(() => this.tick()
});
}
tick() {
this.changeDetectorRefs
.forEach((ref) => ref.detectChanges());
}
} 94

95. 95

96. @Component({
template: '<v-card [vData]="vData"></v-card>'
})
class VCardApp {
constructor() {
this.vData = {
name: 'Christoph Burgdorf',
email: 'christoph@thoughtram.io'
}
}
changeData() {
this.vData.name = 'Pascal Precht';
}
}
96

97. @Component({
template: `
<h2>{{vData.name}}</h2>
<span>{{vData.email}}</span>
`
})
class VCardCmp {
@Input() vData;
}
97

98. @Component({
template: '<v-card [vData]="vData"></v-card>'
})
class VCardApp {
constructor() {
this.vData = {
name: 'Christoph Burgdorf',
email: 'christoph@thoughtram.io'
}
}
changeData() {
this.vData = { name: 'Pascal Precht' };
}
}
98

99. @Component({
template: `
<h2>{{vData.name}}</h2>
<span>{{vData.email}}</span>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
class VCardCmp {
@Input() vData;
}
99

100. 100

101. Управляем Zone и CD
101

102. constructor(private zone: NgZone) {}
102

103. processOutsideAngularZone() {
this.progress = 0;
this.zone.runOutsideAngular(() => {
this.increaseProgress(() => {
this.zone.run(() => {
console.log('Outside Done!');
});
});
});
}
103

104. processOutsideAngularZone() {
this.progress = 0;
this.zone.runOutsideAngular(() => {
this.increaseProgress(() => {
this.zone.run(() => {
console.log('Outside Done!');
});
});
});
}
104

105. constructor(private cd: ChangeDetectorRef) {}
105

106. ngOnInit() {
this.addItemStream.subscribe(() => {
this.counter++; // application state changed
this.cd.markForCheck(); // marks path
})
}
}
106

107. А можно как-то
попроще?
107

108. Redux
108

109. ng2-redux
ngrx/store
109

110. Mobx
110

111. ng2-mobx
111

112. 112

113. Улучшаем Perceived Performance
•Увеличивая реальную
производительность
113

114. Улучшаем Perceived Performance
•Увеличивая реальную
производительность
•Замедляя реальную
производительность
114

115. Улучшаем Perceived Performance
•Увеличивая реальную
производительность
•Замедляя реальную
производительность
•Грамотно перераспределяя
нагрузку и ресурсы
115

116. 116

117. FRP
functional reactive programming
117

118. this.form.valueChanges
.filter((value) => this.form.valid)
.switchMap((value) => {
return http.post(‘/api’, value)
});
118

119. this.form.valueChanges
.debounce(500)
.filter((value) => this.form.valid)
.switchMap((value) => {
return http.post(‘/api’, value)
});
119

120. this.form.valueChanges
.debounce(500)
.distinctUntilChanged()
.filter((value) => this.form.valid)
.switchMap((value) => {
return http.post(‘/api’, value)
});
120

121. this.form.valueChanges
.debounce(500)
.distinctUntilChanged()
.filter((value) => this.form.valid)
.switchMap((value) => {
return http.post(‘/api’, value)
}).retryWhen(attempts =>
attempts
.zip(Observable.range(1, 3), (_, i) => i)
.flatMap((i: number) => {
return Observable.timer(i * 1000);
})
))
121

122. 122

123. Алексей
Охрименко
Twitter: @Ai_boy
IPONWEB
http://bit.ly/2eMOBjm
123