37
Пишем "Excel" на AngularJS: 2000 watchers не предел Миша Башкиров, AT Consulting
Пишем "Excel" на AngularJS:2000 watchers не пределМиша Башкиров, AT Consulting
... 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
Поздним зимним вечеромв одном Enterprise-приложении
> countWatchers()
23659
3
23 659 watchers!
Как докатились
до жизни такой?
Красиво!
Но...
У нас проблемы:— нажатие клавишы в input-е занимает от секунды до нескольких
— так ли хорош dirty checking? и тот ли framework мы выбрали O_o?
— ng-repeat на ng-repeat'е, ng-repeat'ом погоняет
— медленно работают сумматоры и прочие формулы
— перегружен UI
— ...
12
Учимся готовить
"черепаху"
Поверхностный поиск— < 2000 биндингов
— дерегистрируем $watch
— одноразовые биндинги
— bindonce
— angular-once
Уже кое-что...
16
Быстрые
итераторыpowered by Vanilla JS ;)
jsperf.com/summators + масса других замеров
19
ng-if
vsng-show
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
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
Нужны ли
мгновенныеобновления?
"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
И как оно?
Результаты:— разгрузили UI
— медленные участки кода переписали на Vanilla JS (прости, underscore.js)
— убрали лишние watchers
— изолировали watchers через ng-if
— даже если их много, обновление происходит только при потере focus
— где не помогает техника, ищем способ дополнительно разгрузить UI
29
Будущее?
Будущее!— ngModelOptions NEW!
самый долгий в истории AngularJS merged pull request
— AngularJS 2.0 Object.observe()
"... 20-40x increase in speed ..."
— AngularDart
32
Bonus!
Экспорт HTML-таблиц в Excel<table id="important-excel-report">
<tr>
<td>Я откроюсь в Excel!</td>
</tr>
</table>
+ FileSaver.js
01.
02.
03.
04.
05.
35
23 659 thanks!
Пишем "Excel" на AngularJS:2000 watchers не пределМиша Башкиров, AT Consulting
— bashmish.com
Презентация: bashmish.com/pres/ng-excel/
37
