Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Core Abstractions - The ItreableDiffer

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.


Eliran Eliassy

November 30, 2020


  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
  3. None
  4. Angular EXPERTS on demand https://e-square.io info@e-square.io Want to join us?

  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