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
Tweet

More Decks by Eliran Eliassy

Other Decks in Programming

Transcript

  1. e-square.io — Founder & CEO @ e-square.io — Angular Google

    Developer Expert — Writer @ AngularInDepth — Community leader About mySelf
  2. 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
  3. 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
  4. 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.
  5. 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
  6. 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