Tweet
Tweet

Slide 1

Slide 1 text

AngularArchitects.io | @ManfredSteyer Successful with Signals: 3 Rules for Your Architecture

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Agenda • Austrian Desserts • Computed • Effects • RxJS Interop • Stores

Slide 6

Slide 6 text

Result • 3 Rules (of thumb) • 3 Hints

Slide 7

Slide 7 text

About me… Manfred Steyer, ANGULARarchitects.io (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer

Slide 8

Slide 8 text

Austrian Desserts: Example App

Slide 9

Slide 9 text

Simple Reactivity with Signals Signal 4711 Consumer read set notify 4712

Slide 10

Slide 10 text

Fine-Grained Change Detection Signal

Slide 11

Slide 11 text

Component With Signals flights = signal([]); const flights = await this.flightService.findAsPromise(from, to); this.flights.set(flights);

Slide 12

Slide 12 text

Demo

Slide 13

Slide 13 text

Computed

Slide 14

Slide 14 text

Demo Branch: 02a-input-signals

Slide 15

Slide 15 text

Architecture Rule #1 Synchronously derive state where possible

Slide 16

Slide 16 text

Effects

Slide 17

Slide 17 text

Angular‘s Effect implementation: Mainly for rendering!

Slide 18

Slide 18 text

Demo Branch: 04c-effects

Slide 19

Slide 19 text

Architecture Rule #2 Avoid effects propagating state and Signal writes

Slide 20

Slide 20 text

How can my app react on changing State?

Slide 21

Slide 21 text

Effects are Problematic Here! Event (click, data, etc.) Signal { … } Logic

Slide 22

Slide 22 text

Why Effects are Problematic Here? Glitch-free property: Events might get lost Auto-Tracking Cycles and change cascades Effect: End of the „reactive chain“

Slide 23

Slide 23 text

Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream Pancakes

Slide 24

Slide 24 text

Alternative Use event behind signal change Event (click, data, etc.) Signal { … } Logic

Slide 25

Slide 25 text

Alternative Use event behind signal change Use RxJS toObservable, toSignal, …

Slide 26

Slide 26 text

Alternative Use event behind signal change Use RxJS Use reactive helpers

Slide 27

Slide 27 text

Alternative Use event behind signal change Use RxJS Use reactive helpers rxMethod (SignalStore), ngxtension, Angular itself will get some

Slide 28

Slide 28 text

Demo Branch: 08b-details

Slide 29

Slide 29 text

Stores

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Stores Streamline Reactive Flow Component Store Trigger Signal sync/ async computed() computed() Currently: Main Use Case for Signals

Slide 34

Slide 34 text

Demo Branch: 07-state-service-starter

Slide 35

Slide 35 text

Architecture Rule #3 Stores make your reactive flow more manageable

Slide 36

Slide 36 text

Free eBook (6th Edition) angularArchitects.io/ebook

Slide 37

Slide 37 text

More: Angular Architecture Workshop • Maintainable Architectures with Modern Angular • Strategic Design with Nx & Sheriff • Micro Frontends with Module Federation • Signals and Your Architecture: CD & Zone-less, NGRX & Signal Store, RxJS-Interop German Version: angulararchitects.io/workshop-de English Version: angulararchitects.io/workshop-en

Slide 38

Slide 38 text

Conclusion Architecture Rule #1 Synchronously derive state where possible Architecture Rule #2 Avoid effects propagating state and signal writes Architecture Rule #3 Stores make your reactive flow more manageable Component Store

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

AngularArchitects.io Slides & Examples ManfredSteyer