writing "excel" using angular: 2000 watchers is not a limit by misha bashkirov
TRANSCRIPT
![Page 1: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/1.jpg)
Пишем "Excel" на AngularJS:2000 watchers не пределМиша Башкиров, AT Consulting
![Page 2: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/2.jpg)
... my measurement is always something about 2,000 bindings per page. So,
if you imagine a complicated page, let’s say it has 100 rows and 20 columns,
then a table would have about 2,000 items on it. That’s pretty much the
limit of what you can show to the user before the user kind of scream and
say, “Hey! This page is ridiculous! You don’t give me back information or do
something to make the page more presentable.”
Miško Hevery, команда AngularJS
“2
![Page 3: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/3.jpg)
Поздним зимним вечеромв одном Enterprise-приложении
> countWatchers()
23659
3
![Page 4: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/4.jpg)
23 659 watchers!
![Page 5: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/5.jpg)
Как докатились
до жизни такой?
![Page 6: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/6.jpg)
![Page 7: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/7.jpg)
![Page 8: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/8.jpg)
![Page 9: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/9.jpg)
![Page 10: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/10.jpg)
Красиво!
Но...
![Page 11: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/11.jpg)
![Page 12: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/12.jpg)
У нас проблемы:— нажатие клавишы в input-е занимает от секунды до нескольких
— так ли хорош dirty checking? и тот ли framework мы выбрали O_o?
— ng-repeat на ng-repeat'е, ng-repeat'ом погоняет
— медленно работают сумматоры и прочие формулы
— перегружен UI
— ...
12
![Page 13: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/13.jpg)
![Page 14: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/14.jpg)
Учимся готовить
"черепаху"
![Page 15: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/15.jpg)
![Page 16: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/16.jpg)
Поверхностный поиск— < 2000 биндингов
— дерегистрируем $watch
— одноразовые биндинги
— bindonce
— angular-once
Уже кое-что...
16
![Page 17: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/17.jpg)
![Page 18: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/18.jpg)
Быстрые
итераторыpowered by Vanilla JS ;)
![Page 19: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/19.jpg)
jsperf.com/summators + масса других замеров
19
![Page 20: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/20.jpg)
![Page 21: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/21.jpg)
ng-if
vsng-show
![Page 22: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/22.jpg)
ng-if "изолирует" биндинги<div ng-if="true">
<input ng-model="model.attribute1">
</div>
<div ng-if="false">
<input ng-model="model.attribute2">
</div>
countWatchers() => 3 ... и каждый раз рендерится с нуля
01.
02.
03.
04.
05.
06.
22
![Page 23: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/23.jpg)
ng-show нет<div ng-show="true">
<input ng-model="model.attribute1">
</div>
<div ng-show="false">
<input ng-model="model.attribute2">
</div>
countWatchers() => 4 ... зато быстрее рендерится
01.
02.
03.
04.
05.
06.
23
![Page 24: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/24.jpg)
![Page 25: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/25.jpg)
Нужны ли
мгновенныеобновления?
![Page 26: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/26.jpg)
"Monkey patch" input + ng-modelappModule.directive 'input', ->
restrict: 'E'
priority: 1
link: ($scope, $element, $attrs) ->
$element.off 'compositionstart compositionend
input change'
Будет обновляться только при потере focus.
01.
02.
03.
04.
05.
26
![Page 27: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/27.jpg)
![Page 28: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/28.jpg)
И как оно?
![Page 29: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/29.jpg)
Результаты:— разгрузили UI
— медленные участки кода переписали на Vanilla JS (прости, underscore.js)
— убрали лишние watchers
— изолировали watchers через ng-if
— даже если их много, обновление происходит только при потере focus
— где не помогает техника, ищем способ дополнительно разгрузить UI
29
![Page 30: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/30.jpg)
![Page 31: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/31.jpg)
Будущее?
![Page 32: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/32.jpg)
Будущее!— ngModelOptions NEW!
самый долгий в истории AngularJS merged pull request
— AngularJS 2.0 Object.observe()
"... 20-40x increase in speed ..."
— AngularDart
32
![Page 33: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/33.jpg)
![Page 34: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/34.jpg)
Bonus!
![Page 35: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/35.jpg)
Экспорт HTML-таблиц в Excel<table id="important-excel-report">
<tr>
<td>Я откроюсь в Excel!</td>
</tr>
</table>
+ FileSaver.js
01.
02.
03.
04.
05.
35
![Page 36: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/36.jpg)
23 659 thanks!
![Page 37: Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554ba664b4c905ae618b4f44/html5/thumbnails/37.jpg)
Пишем "Excel" на AngularJS:2000 watchers не пределМиша Башкиров, AT Consulting
— bashmish.com
Презентация: bashmish.com/pres/ng-excel/
37