1 of 28

Let’s go Zoneless

Matthieu Riegler

Grenoble 🏔, France 🇫🇷

@jean_ _ meche

June 24th, 2024

@jean_ _meche

2 of 28

Matt

Jean Meche

Team / OSS

@jean_ _meche

3 of 28

Angular.dev

Is Zoneless

@jean_ _meche

4 of 28

Thank you !

Matthieu Riegler

Grenoble, France

@jean_ _ meche

@jean_ _meche

5 of 28

What are we talking about ?

@jean_ _meche

6 of 28

Zone.js is Angular’s scheduler

A question of

when

ApplicationRef.tick()

@jean_ _meche

7 of 28

Monkey Patching

Promise

setTimeout

setInterval

queueMicrotask

addEventListener

@jean_ _meche

8 of 28

30 kB - eagerly loaded

Zones, runtime context

Messy stacktrace

No support for native Async/Await

Downsides of zone.js

@jean_ _meche

9 of 28

Root component

component

ApplicationRef.tick()

@jean_ _meche

10 of 28

How do we do this

without Zone.js

@jean_ _meche

11 of 28

A new scheduler

A question of

when

setTimeout or requestAnimationFrame

@jean_ _meche

12 of 28

Enable Zoneless change detection

provideExperimentalZonelessChangeDetection

@jean_ _meche

13 of 28

Observable$ 👓

@jean_ _meche

14 of 28

myStrSignal.set(‘someValue’)

myNumberSignal.update(v => v+1)

Signals 📡

@jean_ _meche

15 of 28

The framework 🅰️

(myEvent)=”myCallback($event)”

@jean_ _meche

16 of 28

What you need for zoneless

Signals

Observables + AsyncPipe

@jean_ _meche

17 of 28

Zone.js

Is more than just a scheduler

@jean_ _meche

18 of 28

Global state

A question of

Stability

@jean_ _meche

19 of 28

Server-side-rendering

💻

When stable

@jean_ _meche

20 of 28

Dom operations

this._ngZone.onStable(() => {

// some DOM operation

})

@jean_ _meche

21 of 28

after*Render

afterNextRender(() =>

// some DOM operation

})

afterRender(() =>

// some DOM operation

})

@jean_ _meche

22 of 28

PendingTasks

New global service

To handle stability

@jean_ _meche

23 of 28

PendingTasks

HttpRequests

Pending Effects

@jean_ _meche

24 of 28

New API !

const pendingTasks = inject(ExperimentalPendingTasks);

const taskCleanup = pendingTasks.add();

// do work that should block application's stability and then:

taskCleanup();

// Or also soon:

pendingTasks.run(async () => {

await myAsyncFunc();

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

ExperimentalPendingTasks

Public

Experimental

Editor

Preview

Both

@jean_ _meche

25 of 28

New API !

someLongTask$.pipe(

pendingUntilEvent()

)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

pendingUntilEvent

rxjs-interop (operator)

Public

Experimental

Editor

Preview

Both

@jean_ _meche

26 of 28

Do I need OnPush with

Zoneless ?

@jean_ _meche

27 of 28

When vs What

Zoneless	OnPush
When component are checked	What Component are checked

@jean_ _meche

28 of 28

Thank you !

Matthieu Riegler

Grenoble, France

@jean_ _ meche

@jean_ _meche