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

on

  • 505 views

 

Statistics

Views

Total Views
505
Views on SlideShare
500
Embed Views
5

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 5

http://lanyrd.com 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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 Presentation Transcript

  • Пишем "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 vs ng-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-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
  • И как оно?
  • Результаты: — разгрузили 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@gmail.com Презентация: bashmish.com/pres/ng-excel/ 37