Tweet
Tweet

Slide 1

Slide 1 text

RainerHahnekamp Towards Modern Change Detection Past → Present → Future Rainer Hahnekamp 14.11.2024

Slide 2

Slide 2 text

RainerHahnekamp About Me... https://www.ng-news.com https://github.com/softarc-consulting/sheriff ● Rainer Hahnekamp ANGULARarchitects.io NgRx Team (Trusted Collaborator) ● Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality

Slide 3

Slide 3 text

RainerHahnekamp

Slide 4

Slide 4 text

RainerHahnekamp Why: Upcoming Changes Hybrid Mode Zoneless Signal Components

Slide 5

Slide 5 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (DOM and Components in Sync)

Slide 6

Slide 6 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Component's value changes)

Slide 7

Slide 7 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...)

Slide 8

Slide 8 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅

Slide 9

Slide 9 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅

Slide 10

Slide 10 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅

Slide 11

Slide 11 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅

Slide 12

Slide 12 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅

Slide 13

Slide 13 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅

Slide 14

Slide 14 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅

Slide 15

Slide 15 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅

Slide 16

Slide 16 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅ ✅

Slide 17

Slide 17 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Updating DOM) ✅ ✅ ✅ ✅

Slide 18

Slide 18 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Updating DOM) ✅ ✅ ✅ ✅ ✅

Slide 19

Slide 19 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Updating DOM) ✅ ✅ ✅ ✅ ✅

Slide 20

Slide 20 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Updating DOM) ✅ ✅ ✅ ✅ ✅ ✅

Slide 21

Slide 21 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Done)

Slide 22

Slide 22 text

RainerHahnekamp Triggers for Change Detection Component Tree DOM Submit Cancel Zone.js Handled DOM Events Asynchronous Tasks

Slide 23

Slide 23 text

RainerHahnekamp DOM Updates via Change Detection are already perfect

Slide 24

Slide 24 text

RainerHahnekamp Changes have to be found Runs too often Change Detection Improvements Exclude Components OnPush Issues

Slide 25

Slide 25 text

RainerHahnekamp Don't check it, unless I tell you! ChangeDetectionStrategy.OnPush

Slide 26

Slide 26 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Done)

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Done)

Slide 32

Slide 32 text

RainerHahnekamp Criteria markForCheck Immutable Property Binding Handled DOM Events async Pipe Signal Change manually via markForCheck

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (markForCheck) Zone.js

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

RainerHahnekamp Changes have to be found Runs too often Change Detection Improvements Exclude Components OnPush Local CD Signals & OnPush Angular 17 Issues

Slide 45

Slide 45 text

RainerHahnekamp Signal Change with OnPush & without DOM Event Local Change Detection

Slide 46

Slide 46 text

RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection Zone.js

Slide 47

Slide 47 text

RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection (asynchronous task ends) Zone.js

Slide 48

Slide 48 text

RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection (Signal changes) Zone.js

Slide 49

Slide 49 text

RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection (Special Dirty Marking) Zone.js

Slide 50

Slide 50 text

RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection (Special Dirty Marking) Zone.js

Slide 51

Slide 51 text

RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection (Zone.js starts because of asynchronous task) Zone.js Zone.js

Slide 52

Slide 52 text

RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection (Zone.js starts because of asynchronous task) Zone.js

Slide 53

Slide 53 text

RainerHahnekamp DOM Submit Cancel Local Change Detection (Check runs on one component only) Zone.js Component Tree ✅

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

RainerHahnekamp markForCheck triggers CD Zoneless Change Detection

Slide 56

Slide 56 text

RainerHahnekamp Component Tree DOM Submit Cancel Zoneless Change Detection Zone.js

Slide 57

Slide 57 text

RainerHahnekamp Component Tree DOM Submit Cancel Zoneless Change Detection Zone.js

Slide 58

Slide 58 text

RainerHahnekamp Component Tree DOM Submit Cancel Zoneless Change Detection (Change happens)

Slide 59

Slide 59 text

RainerHahnekamp Component Tree DOM Submit Cancel Zoneless Change Detection ("Somebody/-thing calls markForCheck()) markForCheck()

Slide 60

Slide 60 text

RainerHahnekamp Component Tree DOM Submit Cancel Zoneless Change Detection (markForCheck triggers CD) markForCheck()

Slide 61

Slide 61 text

RainerHahnekamp Component Tree DOM Submit Cancel Zoneless Change Detection (Checkend & Done) ✅ ✅ ✅ ✅ ✅ ✅

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

RainerHahnekamp Signal Components (What we know so far…) OnPush Behavior Zone-free No Control Flow Structural Directives Standalone Fine-grained CD Speculation

Slide 64

Slide 64 text

RainerHahnekamp Component Tree DOM Submit Cancel Signal Components

Slide 65

Slide 65 text

RainerHahnekamp Component Tree DOM Submit Cancel Signal Components

Slide 66

Slide 66 text

RainerHahnekamp Component Tree DOM Submit Cancel Signal Components Fine-grained

Slide 67

Slide 67 text

RainerHahnekamp Be ready for the Future Use Signals

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

RainerHahnekamp Further Watching https://youtu.be/6W6gycuhiN0 https://youtu.be/0PJPZ3rLqrY

Slide 70

Slide 70 text

RainerHahnekamp Thanks