Angular 1.x binding limits

A bit of practical look into Angular performance issues and some ways to avoid it by using mechanisms by Angular, JavaScript itself and common sense.
Presentet at Angular Munich Meetup #5:
http://www.meetup.com/AngularJS-Munich/events/222268338

Transcript

1. Angular limits by Zlatko Duric
2. How much bindings is too much bindings ? • 200 ms • 2000 watchers
3. Where has it all began ?
4. Problem • Thousands of lines to parse on each letter change • Thousands of nodes to update • Slow initial load, slow response to changes • Eats nerves at superfast rates
5. The story of live bindings • Two-way binding = biggest practical value But ... • $apply = $digest + more • $digest = lots of work • ng-bind ({{thisStuff}}), ng-model, $scope.anything
6. Some issues Linkers Binders Watchers DIRTY CHECKING
7. Hook it up right away • $compile runs once • $link runs on each $iteration • ng-transclude – limits scope • Repeated dirty-checks ! 2 + 2 = smart
8. To $parse or not to $parse $(eval($parse('<div>{{person.name}}</div>')) ; $(eval($parse('<div>{{person.name}}</div>')) ;
9. ng-once isn't the only way
10. Track by • $watch vs. $watchCollection • ng-repeat track by field only checks that field
11. Takeaways Reduce number of dirty checks == <3 FTW Kit : • `compile` instead of `link` • `ng-once` • `bind-on-notify` and `bind-notifier` • `ng-repeat` track by, $watchCollection • be smart
12. Who is the fastest ?
13. Solution ?
14. apiDoc + Gulp
15. En : "Thank you for your attention." De : "Willst du mir ein Bier kaufen?" Translation help, please !
16. Sources https://docs.angularjs.org https://medium.com/@kentcdodds/counting-angu larjs-watchers-11c5134dc2ef http://stackoverflow.com/questions/17071221/get -ng-repeat-complete-in-angular-directive http://editor.swagger.io/ https://www.youtube.com/watch?v=zyYpHIOrk_ Y https://github.com/kseamon/fast-bind http://plnkr.co/edit/3FPK7O7Yl82rIUEGzjgG?p= preview