$30 off During Our Annual Pro Sale. View Details »

Deep Dive: Change Detection

Deep Dive: Change Detection

At the core of every frontend framework lies the process where the DOM needs to be updated, a defining factor for performance and, consequently, the success of the framework. In Angular, this process seems almost magical. When we modify a property, the change promptly appears in the UI. This is commonly known as change detection. However, numerous other terms are often thrown into the mix, such as zone.js, dirty marking, OnPush, and Signals. Through animations and live coding, I'll break down the inner workings of change detection so that you will be able to customize it to your own needs.

Rainer Hahnekamp

May 23, 2024
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Technology

Transcript

  1. 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
  2. RainerHahnekamp Changes have to be found Runs too often Change

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

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

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

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

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

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

    one component only) Zone.js Component Tree ✅
  9. 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
  10. 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
  11. RainerHahnekamp Signal Components (What we know so far…) OnPush Behavior

    Zone-free No Control Flow Structural Directives Standalone Fine-grained CD Speculation
  12. 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