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

Towards Modern Change Detection

Rainer Hahnekamp
May 01, 2024
310

Towards Modern Change Detection

In Angular's zoneless future, mastering change detection is essential. We've all witnessed seemingly magical UI updates when modifying properties. This talk peels back the curtain, explaining how Angular detects and reflects changes.

Beyond "Change Detection," terms like "dirty checking," "OnPush," and "Signals" often emerge. We'll explore each piece, providing a comprehensive picture that prepares you for Angular's evolution.

Rainer Hahnekamp

May 01, 2024
Tweet

Transcript

  1. RainerHahnekamp Towards Modern Change Detection Past → Present → Future

    Rainer Hahnekamp 30.4.2024, Angular Graz Meetup
  2. RainerHahnekamp About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff •

    Rainer Hahnekamp ANGULARarchitects.io • Developer / Trainer / Speaker Modern Spring for Angular @RainerHahnekamp
  3. RainerHahnekamp Changes have to be found Runs too often Change

    Detection Improvements Exclude Components OnPush Issues
  4. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush

    (Handled DOM Event triggers Change Detection) Zone.js
  5. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush

    (Detecting Changes...) Zone.js ✅ ✅ ✅ ✅ ✅
  6. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush

    (Detecting Changes...) Zone.js ✅ ✅ ✅ ✅ ✅
  7. RainerHahnekamp Changes have to be found Runs too often Change

    Detection Improvements Exclude Components OnPush Local CD Signals & OnPush Angular 17 Issues
  8. RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection (Zone.js

    starts because of asynchronous task) Zone.js Zone.js
  9. RainerHahnekamp DOM Submit Cancel Local Change Detection (Check runs on

    one component only) Zone.js Component Tree ✅
  10. RainerHahnekamp Changes have to be found Runs too often Change

    Detection Improvements Exclude Components OnPush Local CD Signals & OnPush Angular 17 Angular 18 Zoneless With zone.js as "Hybrid Mode" Issues
  11. RainerHahnekamp Changes have to be found Runs too often Change

    Detection Improvements Exclude Components OnPush Local CD Signals & OnPush Signal Components CD on View-Level Angular 17 Angular 18 Angular ? Zoneless With zone.js as "Hybrid Mode" Issues
  12. RainerHahnekamp Signal Components (What we know so far…) OnPush Behavior

    Zone-free No Control Flow Structural Directives Standalone Fine-grained CD Speculation
  13. RainerHahnekamp Further Reading • Matthieu Riegler ◦ Hybrid Change detection

    in v18 | blog | Matthieu Riegler ◦ Zoneless Change Detection for everybody in preview in Angular 17.1 | blog | Matthieu Riegler ◦ The state of Change Detection in Angular v17 | blog | Matthieu Riegler • Enea Jahollari ◦ A new era for Angular - Zoneless Change Detection - justangular.com ◦ A change detection, zone.js, zoneless, local change detection, and signals story 📚 - justangular.com • Evgeniy Tuboltsev ◦ Preparing our Code for Zoneless Angular | by 🪄 OZ 🎩 | Mar, 2024 | Medium ◦ Angular Change Detection — Today and Tomorrow | by 🪄 OZ 🎩 | Medium