Angular - Digest Loop

Check out part2 here:
https://speakerdeck.com/barnash/angular-scope-inheritance-digest-loop-part-2
-------------------
Based on the first chapter of "Build Your Own Angular" book:
http://teropa.info/build-your-own-angular/

Building a small version of Scope.

Transcript

1. Angular.js Into the digest loop Iftach Bar
3. We will learn - The magic behind data-binding - An inside look into the digest loop - $digest, $watch - Basic methods of scope
4. Motivation HTML does not support data-binding
5. Motivation HTML does not support data-binding But Angular.js does it!
6. Motivation HTML does not support data-binding But Angular.js does it! Linux!
7. The magic Scope (The model) scope.user.name = “Iftach” <input ng-model=”user.name”>
8. The magic Scope (The model) Listen to dom events -> update the model: scope.user.name = newValue; <input ng-model=”user.name”>
9. The magic Scope (The model) Listen to dom events -> update the model: scope.user.name = newValue; Let me know when this expression changes -> update the dom: dom.value = scope.user.name; <input ng-model=”user.name”>
10. There is no spoon Scope (The model) Listen to dom events -> update the model: scope.user.name = newValue; Let me know when this expression changes -> update the dom: dom.value = scope.user.name; <input ng-model=”user.name”>
11. Let’s dive in
12. Scope function Scope() { }
13. Scope.$watch function Scope() { this.$$watchers = []; } Scope.prototype.$watch = function(watchFn, listenerFn) { var watcher = { watchFn: watchFn, listenerFn: listenerFn }; this.$$watchers.push(watcher); };
14. Scope.$digest Scope.prototype.$watch = function(watchFn, listenerFn) { var watcher = { watchFn: watchFn, listenerFn: listenerFn }; this.$$watchers.push(watcher); }; Scope.prototype.$digest = function() { _.forEach(this.$$watchers, function(watch) { watch. listenerFn(); }) };
15. Checking for dirty values Scope.prototype.$digest = function() { var self = this; _.forEach(this.$$watchers, function(watch) { var newValue = watch.watchFn(self); var oldValue = watch. last; if (newValue !== oldValue) { watch. last = newValue; watch. listenerFn(newValue, oldValue, self); } }); };
16. Getting notified of digest
17. Getting notified of digest Scope.prototype.$watch = function(watchFn, listenerFn) { var watcher = { watchFn: watchFn, listenerFn: listenerFn || function() {} }; this.$$watchers.push(watcher); };
18. Problem var scope = new Scope(); scope.name = “iftach”; scope.$watch(function(scope) { return scope.nameUpper; }, function (newValue) { if (newValue) { scope. initial = newValue.substring(0, 1) + '.'; } }); scope.$watch(function(scope) { return scope.name; }, function(newValue) { if (newValue) { scope. nameUpper = newValue.toUpperCase(); } });
19. Problem name = “iftach” nameUpper = undefined initial = undefined name = “iftach” nameUpper = undefined initial = undefined name = “iftach” nameUpper = “IFTACH” initial = undefined Running digest After watch of nameUpper After watch of name
20. Problem name = “iftach” nameUpper = undefined initial = undefined name = “iftach” nameUpper = undefined initial = undefined name = “iftach” nameUpper = “IFTACH” initial = undefined But we expected: name = “iftach” nameUpper = “IFTACH” initial = “I”
21. Keep digesting while dirty (1) Scope.prototype.$$digestOnce = function() { var self = this; var dirty = false; _.forEach(this.$$watchers, function(watch) { var newValue = watch.watchFn(self); var oldValue = watch.last; if (newValue !== oldValue) { watch.last = newValue; watch.listenerFn(newValue, oldValue, self); dirty = true; } }); return dirty; };
22. Keep digesting while dirty (2) Scope.prototype.$digest = function() { var dirty; do { dirty = this.$$digestOnce(); } while (dirty); };
23. Problem var scope = new Scope(); scope.c1 = 0; scope.c2 = 0; scope.$watch(function(scope) { return scope.c1; }, function() { scope.c2++; }); scope.$watch(function(scope) { return scope.c2; }, function() { scope.c1++; });
24. Unstable digest Scope.prototype.$digest = function() { var ttl = 10; var dirty; do { dirty = this.$$digestOnce(); if (dirty && !(ttl--)) { throw "10 digest iterations reached"; } } while (dirty); };
25. Deep equal support Scope.prototype.$watch = function(watchFn, listenerFn, valueEq) { var watcher = { watchFn: watchFn, listenerFn: listenerFn || function() {}, valueEq: !!valueEq }; this.$$watchers.push(watcher); };
26. Scope.prototype.$$areEqual = function(newValue, oldValue, valueEq) { if (valueEq) { return _.isEqual(newValue, oldValue); } else { return newValue === oldValue; } };
27. Scope.prototype.$$digestOnce = function() { var self = this; var dirty = false; _.forEach(this.$$watchers, function(watch) { var newValue = watch. watchFn(self); var oldValue = watch. last; if (!self.$$areEqual(newValue, oldValue, watch. valueEq)) { watch. last = (watch.valueEq ? _.cloneDeep(newValue) : newValue; watch. listenerFn(newValue, oldValue, self); dirty = true; } }); return dirty; };
28. NaN !== NaN Scope.prototype.$$areEqual = function(newValue, oldValue, valueEq) { if (valueEq) { return _.isEqual(newValue, oldValue); } else { return newValue === oldValue || (typeof newValue === 'number' && typeof oldValue === 'number' && isNaN(newValue) && isNaN(oldValue)); } };
29. NaN !== NaN Scope.prototype.$$areEqual = function(newValue, oldValue, valueEq) { if (valueEq) { return _.isEqual(newValue, oldValue); } else { return newValue === oldValue || (typeof newValue === 'number' && typeof oldValue === 'number' && isNaN(newValue) && isNaN(oldValue)); } };
30. Performance scope.$watch(...) scope.$watch(...) scope.$watch(...) scope.$watch(...) scope.$watch(...) scope.$digest()
31. Performance Watch 1 Watch 2 Watch 3 Watch 4 Watch 5
32. Performance Watch 1 Watch 2 Watch 3 Watch 4 Watch 5
33. Performance Watch 1 Watch 2 Watch 3 Watch 4 Watch 5
34. Performance Watch 1 Watch 2 Watch 3 Watch 4 Watch 5
35. Performance Watch 1 Watch 2 Watch 3 Watch 4 Watch 5
36. Performance Watch 1 Watch 2 Watch 3 Watch 4 Watch 5
37. Performance Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch Watch
38. Improve performance a bit function Scope() { this.$$watchers = []; this.$$lastDirtyWatch = null; } Scope.prototype.$digest = function() { var ttl = 10; var dirty; this.$$lastDirtyWatch = null; do { dirty = this.$$digestOnce(); if (dirty && !(ttl--)) { throw "10 digest iterations reached"; } } while (dirty); };
39. Scope.prototype.$$digestOnce = function() { var self = this; var dirty = false; this.$$watchers.every(function(watch) { var newValue = watch.watchFn(self); var oldValue = watch.last; if (!self.$$areEqual(newValue, oldValue, watch.valueEq)) { watch.last = (watch.valueEq ? _.cloneDeep(newValue) : newValue; watch.listenerFn(newValue, oldValue, self); dirty = true; self.$$lastDirtyWatch = watch; } else if (self.$$lastDirtyWatch === watch) { return false; } return true; }); return dirty; };
40. $eval vs $apply Scope.prototype.$eval = function(expr, locals) { return expr(this, locals); }; Scope.prototype.$apply = function(expr) { try { return this.$eval(expr); } finally { this.$digest(); } };
41. Destroying a watch Scope.prototype.$watch = function(watchFn, listenerFn, valueEq) { var self = this; var watcher = { watchFn: watchFn, listenerFn: listenerFn || function() {}, valueEq: !!valueEq }; self.$$watchers.push(watcher); return function() { var index = self.$$watchers.indexOf(watcher); if (index >= 0) { self.$$watchers.splice(index, 1); } } };
42. Questions
43. Stuff we didn’t discuss $evalAsync Scope phases $$postDigest Handing Exceptions http://teropa.info/build-your-own-angular
44. Me? Iftach Bar - Working on Deflect.io - Freelancing http://www.deflect.io
45. Thank you