Пишем "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 ...
Поздним зимним вечером
в одном Enterprise-приложении
> countWatchers()
23659
3
23 659 watchers!
Как докатились
до жизни такой?
Красиво!
Но...
У нас проблемы:
— нажатие клавишы в input-е занимает от секунды до нескольких
— так ли хорош dirty checking? и тот ли fram...
Учимся готовить
"черепаху"
Поверхностный поиск
— < 2000 биндингов
— дерегистрируем $watch
— одноразовые биндинги
— bindonce
— angular-once
Уже кое-чт...
Быстрые
итераторы
powered by Vanilla JS ;)
jsperf.com/summators + масса других замеров
19
ng-if
vs
ng-show
ng-if "изолирует" биндинги
<div ng-if="true">
<input ng-model="model.attribute1">
</div>
<div ng-if="false">
<input ng-mod...
ng-show нет
<div ng-show="true">
<input ng-model="model.attribute1">
</div>
<div ng-show="false">
<input ng-model="model.a...
Нужны ли
мгновенные
обновления?
"Monkey patch" input + ng-model
appModule.directive 'input', ->
restrict: 'E'
priority: 1
link: ($scope, $element, $attrs)...
И как оно?
Результаты:
— разгрузили UI
— медленные участки кода переписали на Vanilla JS (прости, underscore.js)
— убрали лишние watc...
Будущее?
Будущее!
— ngModelOptions NEW!
самый долгий в истории AngularJS merged pull request
— AngularJS 2.0 Object.observe()
"... ...
Bonus!
Экспорт HTML-таблиц в Excel
<table id="important-excel-report">
<tr>
<td>Я откроюсь в Excel!</td>
</tr>
</table>
+ FileSav...
23 659 thanks!
Пишем "Excel" на AngularJS:
2000 watchers не предел
Миша Башкиров, AT Consulting
— bashmish.com
— bashmish@gmail.com
Презе...
Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov
Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov
Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov
Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov
Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov
Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov
Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov
Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov
Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov
Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov
Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov
Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov
Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov
Upcoming SlideShare
Loading in...5
×

Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov

868

Published on

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
868
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Writing "Excel" Using Angular: 2000 Watchers Is Not a Limit by Misha Bashkirov

  1. 1. Пишем "Excel" на AngularJS: 2000 watchers не предел Миша Башкиров, AT Consulting
  2. 2. ... 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
  3. 3. Поздним зимним вечером в одном Enterprise-приложении > countWatchers() 23659 3
  4. 4. 23 659 watchers!
  5. 5. Как докатились до жизни такой?
  6. 6. Красиво! Но...
  7. 7. У нас проблемы: — нажатие клавишы в input-е занимает от секунды до нескольких — так ли хорош dirty checking? и тот ли framework мы выбрали O_o? — ng-repeat на ng-repeat'е, ng-repeat'ом погоняет — медленно работают сумматоры и прочие формулы — перегружен UI — ... 12
  8. 8. Учимся готовить "черепаху"
  9. 9. Поверхностный поиск — < 2000 биндингов — дерегистрируем $watch — одноразовые биндинги — bindonce — angular-once Уже кое-что... 16
  10. 10. Быстрые итераторы powered by Vanilla JS ;)
  11. 11. jsperf.com/summators + масса других замеров 19
  12. 12. ng-if vs ng-show
  13. 13. 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
  14. 14. 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
  15. 15. Нужны ли мгновенные обновления?
  16. 16. "Monkey patch" input + ng-model appModule.directive 'input', -> restrict: 'E' priority: 1 link: ($scope, $element, $attrs) -> $element.off 'compositionstart compositionend input change' Будет обновляться только при потере focus. 01. 02. 03. 04. 05. 26
  17. 17. И как оно?
  18. 18. Результаты: — разгрузили UI — медленные участки кода переписали на Vanilla JS (прости, underscore.js) — убрали лишние watchers — изолировали watchers через ng-if — даже если их много, обновление происходит только при потере focus — где не помогает техника, ищем способ дополнительно разгрузить UI 29
  19. 19. Будущее?
  20. 20. Будущее! — ngModelOptions NEW! самый долгий в истории AngularJS merged pull request — AngularJS 2.0 Object.observe() "... 20-40x increase in speed ..." — AngularDart 32
  21. 21. Bonus!
  22. 22. Экспорт HTML-таблиц в Excel <table id="important-excel-report"> <tr> <td>Я откроюсь в Excel!</td> </tr> </table> + FileSaver.js 01. 02. 03. 04. 05. 35
  23. 23. 23 659 thanks!
  24. 24. Пишем "Excel" на AngularJS: 2000 watchers не предел Миша Башкиров, AT Consulting — bashmish.com — bashmish@gmail.com Презентация: bashmish.com/pres/ng-excel/ 37
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×