![Page 1: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/1.jpg)
Превышаем скоростные лимиты с Angular 2Алексей Охрименко - IPONWEB
![Page 2: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/2.jpg)
Алексей Охрименко
Twitter: @Ai_boy
IPONWEB
![Page 3: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/3.jpg)
![Page 4: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/4.jpg)
![Page 5: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/5.jpg)
![Page 6: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/6.jpg)
![Page 7: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/7.jpg)
IPONWEB
RTB
DSP
SSP
![Page 8: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/8.jpg)
8
![Page 9: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/9.jpg)
последствия превышения скорости (в реальной жизни)
![Page 10: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/10.jpg)
последствия превышения скорости*
* - поищите в Google Image - 4-ый результат
![Page 11: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/11.jpg)
Всегда успеете…
![Page 12: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/12.jpg)
А где тогда скорость превышать?
![Page 13: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/13.jpg)
![Page 14: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/14.jpg)
![Page 15: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/15.jpg)
Angular 2, Angular 2… нас и [НАШ_FRAMEWORK]
неплохо кормит
![Page 16: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/16.jpg)
![Page 17: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/17.jpg)
А что значит «скорость»?
![Page 18: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/18.jpg)
Скорость загрузки
![Page 19: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/19.jpg)
Скорость загрузки
Размер
![Page 20: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/20.jpg)
Скорость загрузки
Размер
LazyLoading
![Page 21: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/21.jpg)
Скорость загрузки
Скорость работы
Размер
LazyLoading
![Page 22: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/22.jpg)
Скорость загрузки
Скорость работы
Размер
LazyLoading
Обьем работы
![Page 23: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/23.jpg)
Скорость загрузки
Скорость работы
Размер
LazyLoading
Обьем работы Производительность
![Page 24: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/24.jpg)
Скорость загрузки
Скорость работы
Размер
LazyLoading
Обьем работы Производительность
Память
![Page 25: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/25.jpg)
Скорость загрузки
Скорость работы
Размер
LazyLoading
Обьем работы
Многопоточность
Производительность
Память
![Page 26: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/26.jpg)
Скорость работы
Обьем работы
Многопоточность
Производительность
Память
Скорость загрузки
Размер
LazyLoading
![Page 27: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/27.jpg)
Скорость работы
![Page 28: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/28.jpg)
https://github.com/krausest/js-framework-benchmark
https://github.com/mathieuancelin/js-repaint-perfs
![Page 29: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/29.jpg)
![Page 30: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/30.jpg)
Кол-во перерисовок в секунду (больше лучше)
Angular 1
Angular 2
React
Elm
0 9 18 27 36
![Page 31: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/31.jpg)
Наша цель … 90 RR
![Page 32: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/32.jpg)
Кол-во перерисовок в секунду (больше лучше)
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
![Page 33: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/33.jpg)
Старая версия Angular 2
![Page 34: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/34.jpg)
Alpha 44
![Page 35: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/35.jpg)
Alpha 44 —> v2.1.2
![Page 36: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/36.jpg)
Alpha 44
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
![Page 37: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/37.jpg)
v2.1.2
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
![Page 38: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/38.jpg)
v2.1.2
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
![Page 39: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/39.jpg)
На самом деле все просто…
![Page 40: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/40.jpg)
Angular 2 Performance Checklist
![Page 41: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/41.jpg)
import {enableProdMode} from '@angular/core';
enableProdMode();
![Page 42: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/42.jpg)
300% в EdgeenableProdMode()
![Page 43: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/43.jpg)
Alpha 44
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
![Page 44: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/44.jpg)
v2.1.2 + enableProdMod()
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
![Page 45: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/45.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({ … }); } } }
![Page 46: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/46.jpg)
@Page({ template: ` <div *ngFor="let post of posts;trackBy:identify"> {{post.data}} </div> ` }) export class SomeConponent { identify(index,item){ return post.id } }
![Page 47: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/47.jpg)
@Page({ template: ` <div *ngFor="let post of posts;trackBy:identify"> {{post.data}} </div> ` }) export class SomeConponent { identify(index,item){ return post.id } }
![Page 48: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/48.jpg)
v2.1.2 + enableProdMod()
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
![Page 49: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/49.jpg)
trackBy
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
![Page 50: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/50.jpg)
AOTAhead Of Time template compilation
![Page 51: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/51.jpg)
![Page 52: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/52.jpg)
![Page 53: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/53.jpg)
Angular CLI
ng serve ——aot
ng build ——aot
![Page 54: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/54.jpg)
trackBy
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
![Page 55: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/55.jpg)
AOT
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
![Page 56: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/56.jpg)
WebWorkers
![Page 57: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/57.jpg)
import {bootstrapWorkerUi} from '@angular/platform-webworker'; import {enableProdMode} from '@angular/core';
export function main() { enableProdMode(); bootstrapWorkerUi('loader.js'); }
![Page 58: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/58.jpg)
import {bootstrapWorkerUi} from '@angular/platform-webworker'; import {enableProdMode} from '@angular/core';
export function main() { enableProdMode(); bootstrapWorkerUi('loader.js'); }
![Page 59: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/59.jpg)
@NgModule({ imports: [WorkerAppModule], bootstrap: [AppComponent], declarations: [AppComponent] }) class WebWorkerModule {}
export function main() { enableProdMode(); platformWorkerAppDynamic().bootstrapModule(WebWorkerModule); }
![Page 60: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/60.jpg)
@NgModule({ imports: [WorkerAppModule], bootstrap: [AppComponent], declarations: [AppComponent] }) class WebWorkerModule {}
export function main() { enableProdMode(); platformWorkerAppDynamic().bootstrapModule(WebWorkerModule); }
![Page 61: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/61.jpg)
AOT
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
![Page 62: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/62.jpg)
webWorkers
Angular 2
Target
0 10 20 30 40 50 60 70 80 90
![Page 63: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/63.jpg)
![Page 64: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/64.jpg)
Кол-во перерисовок в секунду (больше лучше)
Angular 1
Angular 2
React
Elm
0 10 20 30 40 50 60 70 80 90
![Page 65: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/65.jpg)
Еще раз• enableProd() • trackBy • AOT • WebWorkers
![Page 66: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/66.jpg)
Заглянем под капот
![Page 67: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/67.jpg)
Scott Hanselman
![Page 68: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/68.jpg)
ZoneJs
![Page 69: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/69.jpg)
![Page 70: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/70.jpg)
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}/`); });
![Page 71: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/71.jpg)
![Page 72: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/72.jpg)
process.on('uncaughtException', (err) => { console.log(`Caught exception: ${err}`); });
![Page 73: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/73.jpg)
![Page 74: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/74.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); }
setTimeout(someCallback, 0);
![Page 75: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/75.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); }
setTimeout(someCallback, 0);
![Page 76: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/76.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); }
setTimeout(someCallback, 0);
![Page 77: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/77.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); }
setTimeout(someCallback, 0);
![Page 78: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/78.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); // TRUE }
setTimeout(someCallback, 0);
![Page 79: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/79.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); }
setTimeout(someCallback, 0);
![Page 80: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/80.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); // FALSE }
setTimeout(someCallback, 0);
![Page 81: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/81.jpg)
Change Detection
![Page 82: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/82.jpg)
![Page 83: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/83.jpg)
![Page 84: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/84.jpg)
![Page 85: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/85.jpg)
![Page 86: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/86.jpg)
![Page 87: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/87.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()); } }
![Page 88: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/88.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()); } }
![Page 89: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/89.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()); } }
![Page 90: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/90.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()); } }
![Page 91: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/91.jpg)
![Page 92: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/92.jpg)
@Component({ template: '<v-card [vData]="vData"></v-card>' }) class VCardApp {
constructor() { this.vData = { name: 'Christoph Burgdorf', email: '[email protected]' } }
changeData() { this.vData.name = 'Pascal Precht'; } }
![Page 93: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/93.jpg)
@Component({ template: ` <h2>{{vData.name}}</h2> <span>{{vData.email}}</span> ` }) class VCardCmp { @Input() vData; }
![Page 94: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/94.jpg)
@Component({ template: '<v-card [vData]="vData"></v-card>' }) class VCardApp {
constructor() { this.vData = { name: 'Christoph Burgdorf', email: '[email protected]' } }
changeData() { this.vData = { name: 'Pascal Precht' }; } }
![Page 95: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/95.jpg)
@Component({ template: ` <h2>{{vData.name}}</h2> <span>{{vData.email}}</span> `, changeDetection: ChangeDetectionStrategy.OnPush }) class VCardCmp { @Input() vData; }
![Page 96: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/96.jpg)
![Page 97: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/97.jpg)
Управляем Zone и CD
![Page 98: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/98.jpg)
constructor(private zone: NgZone) {}
![Page 99: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/99.jpg)
processOutsideAngularZone() { this.progress = 0; this.zone.runOutsideAngular(() => { this.increaseProgress(() => { this.zone.run(() => { console.log('Outside Done!'); }); }); }); }
![Page 100: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/100.jpg)
processOutsideAngularZone() { this.progress = 0; this.zone.runOutsideAngular(() => { this.increaseProgress(() => { this.zone.run(() => { console.log('Outside Done!'); }); }); }); }
![Page 101: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/101.jpg)
constructor(private cd: ChangeDetectorRef) {}
![Page 102: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/102.jpg)
ngOnInit() { this.addItemStream.subscribe(() => { this.counter++; // application state changed this.cd.markForCheck(); // marks path }) } }
![Page 103: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/103.jpg)
А можно как-то попроще?
![Page 104: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/104.jpg)
Redux
![Page 105: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/105.jpg)
ng2-redux ngrx/store
![Page 106: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/106.jpg)
Mobx
![Page 107: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/107.jpg)
ng2-mobx
![Page 108: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/108.jpg)
![Page 109: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/109.jpg)
Улучшаем Perceived Performance
•Увеличивая реальную производительность
![Page 110: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/110.jpg)
Улучшаем Perceived Performance
•Увеличивая реальную производительность •Замедляя реальную производительность
![Page 111: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/111.jpg)
Улучшаем Perceived Performance
•Увеличивая реальную производительность •Замедляя реальную производительность •Грамотно перераспределяя нагрузку и ресурсы
![Page 112: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/112.jpg)
![Page 113: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/113.jpg)
FRPfunctional reactive programming
![Page 114: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/114.jpg)
this.form.valueChanges .filter((value) => this.form.valid) .switchMap((value) => { return http.post(‘/api’, value) });
![Page 115: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/115.jpg)
this.form.valueChanges .debounce(500) .filter((value) => this.form.valid) .switchMap((value) => { return http.post(‘/api’, value) });
![Page 116: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/116.jpg)
this.form.valueChanges .debounce(500) .distinctUntilChanged() .filter((value) => this.form.valid) .switchMap((value) => { return http.post(‘/api’, value) });
![Page 117: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/117.jpg)
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); }) ))
![Page 118: Превышаем скоростные лимиты с Angular 2 / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.net/reader031/viewer/2022012322/586f90d61a28ab54768b7a4f/html5/thumbnails/118.jpg)