Download to read offline
![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!';
}](https://image.slidesharecdn.com/angular2v3-161205120122/75/Angular-2-16-2048.jpg)
![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!';
}](https://image.slidesharecdn.com/angular2v3-161205120122/75/Angular-2-17-2048.jpg)
![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!';
}](https://image.slidesharecdn.com/angular2v3-161205120122/75/Angular-2-18-2048.jpg)
![Angular 2, Angular 2…
нас и [НАШ_FRAMEWORK]
неплохо кормит
19](https://image.slidesharecdn.com/angular2v3-161205120122/75/Angular-2-19-2048.jpg)
![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](https://image.slidesharecdn.com/angular2v3-161205120122/75/Angular-2-49-2048.jpg)
![@NgModule({
imports: [WorkerAppModule],
bootstrap: [AppComponent],
declarations: [AppComponent]
})
class WebWorkerModule {}
export function main() {
enableProdMode();
platformWorkerAppDynamic().bootstrapModule(WebWorkerModule);
}
63](https://image.slidesharecdn.com/angular2v3-161205120122/75/Angular-2-63-2048.jpg)
![@NgModule({
imports: [WorkerAppModule],
bootstrap: [AppComponent],
declarations: [AppComponent]
})
class WebWorkerModule {}
export function main() {
enableProdMode();
platformWorkerAppDynamic().bootstrapModule(WebWorkerModule);
}
64](https://image.slidesharecdn.com/angular2v3-161205120122/75/Angular-2-64-2048.jpg)
![// 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](https://image.slidesharecdn.com/angular2v3-161205120122/75/Angular-2-91-2048.jpg)
![// 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](https://image.slidesharecdn.com/angular2v3-161205120122/75/Angular-2-92-2048.jpg)
![// 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](https://image.slidesharecdn.com/angular2v3-161205120122/75/Angular-2-93-2048.jpg)
![// 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](https://image.slidesharecdn.com/angular2v3-161205120122/75/Angular-2-94-2048.jpg)
![@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](https://image.slidesharecdn.com/angular2v3-161205120122/75/Angular-2-96-2048.jpg)
![@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](https://image.slidesharecdn.com/angular2v3-161205120122/75/Angular-2-98-2048.jpg)
Превышаем скоросные лимиты с Angular 2
- 1. Превышаем скоростные лимиты сAngular 2 Алексей Охрименко IPONWEB 1 #rtb_techday
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. последствия превышения скорости (вреальной жизни) 9
- 10. последствия превышения скорости* * - поищитев Google Image - 4-ый результат 10
- 11.
- 12. А где тогдаскорость превышать? 12
- 13.
- 14.
- 15.
- 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, Angular2… нас и [НАШ_FRAMEWORK] неплохо кормит 19
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. Скорость загрузки Скорость работы Размер LazyLoading Обьем работыПроизводительность 27
- 28. Скорость загрузки Скорость работы Размер LazyLoading Обьем работыПроизводительность Память 28
- 29.
- 30.
- 31.
- 32.
- 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.
- 38.
- 39. Alpha 44 —>v2.1.2 39
- 40. Alpha 44 Angular 2 Target 010 20 30 40 50 60 70 80 90 40
- 41. v2.1.2 Angular 2 Target 0 1020 30 40 50 60 70 80 90 41
- 42. v2.1.2 Angular 2 Target 0 1020 30 40 50 60 70 80 90 42
- 43. На самом делевсе просто… 43
- 44. Angular 2 PerformanceChecklist 44
- 45. import {enableProdMode} from'@angular/core'; enableProdMode(); 45
- 46.
- 47. Alpha 44 Angular 2 Target 010 20 30 40 50 60 70 80 90 47
- 48. v2.1.2 + enableProdMod() Angular2 Target 0 10 20 30 40 50 60 70 80 90 48
- 49. function getData(keepIdentity) { varoldData = 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 postof posts;trackBy:identify"> {{post.data}} </div> ` }) export class SomeConponent { identify(index,item){ return post.id } } 50
- 51. @Page({ template: ` <div *ngFor="let postof posts;trackBy:identify"> {{post.data}} </div> ` }) export class SomeConponent { identify(index,item){ return post.id } } 51
- 52. v2.1.2 + enableProdMod() Angular2 Target 0 10 20 30 40 50 60 70 80 90 52
- 53. trackBy Angular 2 Target 0 1020 30 40 50 60 70 80 90 53
- 54. AOT Ahead Of Timetemplate compilation 54
- 55.
- 56.
- 57. Angular CLI ng serve——aot ng build ——aot 57
- 58. trackBy Angular 2 Target 0 1020 30 40 50 60 70 80 90 58
- 59. AOT Angular 2 Target 0 1020 30 40 50 60 70 80 90 59
- 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 1020 30 40 50 60 70 80 90 65
- 66. webWorkers Angular 2 Target 0 1020 30 40 50 60 70 80 90 66
- 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.
- 71.
- 72.
- 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.
- 76. process.on('uncaughtException', (err) =>{ console.log(`Caught exception: ${err}`); }); 76
- 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.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91. // very simplifiedversion 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 simplifiedversion 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 simplifiedversion 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 simplifiedversion 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.
- 96. @Component({ template: '<v-card [vData]="vData"></v-card>' }) classVCardApp { constructor() { this.vData = { name: 'Christoph Burgdorf', email: 'christoph@thoughtram.io' } } changeData() { this.vData.name = 'Pascal Precht'; } } 96
- 97.
- 98. @Component({ template: '<v-card [vData]="vData"></v-card>' }) classVCardApp { constructor() { this.vData = { name: 'Christoph Burgdorf', email: 'christoph@thoughtram.io' } } changeData() { this.vData = { name: 'Pascal Precht' }; } } 98
- 99.
- 100.
- 101. Управляем Zone иCD 101
- 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.
- 106. ngOnInit() { this.addItemStream.subscribe(() =>{ this.counter++; // application state changed this.cd.markForCheck(); // marks path }) } } 106
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113. Улучшаем Perceived Performance •Увеличиваяреальную производительность 113
- 114. Улучшаем Perceived Performance •Увеличиваяреальную производительность •Замедляя реальную производительность 114
- 115. Улучшаем Perceived Performance •Увеличиваяреальную производительность •Замедляя реальную производительность •Грамотно перераспределяя нагрузку и ресурсы 115
- 116.
- 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.
- 123.