Angular Core Abstractions - The ItreableDiffer

Have you ever wondered how Angular works so fast? Most of us use built-in directives like ngFor, ngClass, ngStyle, and more on daily basis, and get an enormous fast result. The secret behind all these fast utils is an Angular Abstraction most of us not really familiar with. In this talk, we will explain what the differs are and how the framework uses them internally.

Transcript

1. Angular Core Abstractions The Iterable Differs eliraneliassy
2. e-square.io — Founder & CEO @ e-square.io — Angular Google Developer Expert — Writer @ AngularInDepth — Community leader About mySelf
4. Angular EXPERTS on demand https://e-square.io info@e-square.io Want to join us? jobs@e-square.io
5. e-square.io New Angular Conference… Coming soon…
6. e-square.io Let’s Start!
7. e-square.io Angular CD • Asynchronous events • Input/Ouput • User DOM interactions Angular will check if any of the bindings has changed Teardown -> repaint the component
8. Angular CD
9. Event! Angular CD
10. Event! Angular CD
11. CD CD CD CD CD CD CD Angular CD
12. onPush Event! Angular CD
13. CD onPush CD CD CD Angular CD
14. e-square.io onPush is enough? • NO. • Repainting is expensive(!!) • onPush is an important optimization - but, itself is probably not enough to even for small applications • Why? ngFor, ngStyle, ngClass - highly in use by Angular developers
15. e-square.io Introducing IterableDiffers • Angular core abstraction • provider that allow us to compare two collections and produce a list of changes in the form of “IterableChanges” collection • Changes? Added Items, removed Items, changed position Items etc.
16. e-square.io IterableDiffers
17. e-square.io IterableDiffers Find
18. e-square.io IterableDiffers Create
19. e-square.io IterableDiffers Extend
20. e-square.io IterableDiffer Types • Default Iterable Differ • Default Key Value Differ • Key Value Differ
21. e-square.io Live coding…
22. e-square.io Track changes in array
23. e-square.io Track changes in array
24. e-square.io Track changes in array
25. e-square.io Track changes in array
26. e-square.io Track changes in Objects
27. e-square.io Track changes in Objects
28. e-square.io Track changes in Objects
29. e-square.io Track changes in Objects
30. e-square.io Track changes in Objects
31. e-square.io Add trackby function
32. e-square.io Add trackby function
33. e-square.io Add trackby function
34. e-square.io DIY - ngStyle
35. e-square.io DIY - ngStyle
36. e-square.io DIY - ngStyle
37. e-square.io DIY - ngStyle
38. e-square.io DIY - ngStyle
39. e-square.io Practical Example - Filters
40. e-square.io Improving ngFor Super Fast Differs! • ngFor - Arrays, Objects • IterableDiffer can find whether given collection has changed by checking the whole collection ≈ O(n) • But, what if we’ll move the “what has been changed” logic to the collection itself? ≈ O(1) • Inspired by Minko Gechev blog: https://mgv.io/ng-diff
41. e-square.io ngFor
42. e-square.io The DifferableList
43. e-square.io The DifferableList
44. e-square.io The DifferableList Iterator
45. e-square.io The DifferableList Differ
46. e-square.io The DifferableList Factory
47. e-square.io Extend the IterableDiffers
48. e-square.io what we have learned • What are IterableDiffers and how Angular use them to accelerate our applications performance • How we can create our custom IterableDiffer and extend the IterableDiffers by using CS technics
49. e-square.io Special Thanks
50. Keep in Touch with me! https://e-square.io https://eliassy.dev @eliraneliassy eliran@e-square.io
51. Thank You