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
Eventually Zone-less!
Component With Signals
from = signal('Paris');
to = signal('London');
flightRoute = computed(() => this.from() + ' to ' + this.to());
Slide 13
Slide 13 text
Demo
Slide 14
Slide 14 text
Computed
Slide 15
Slide 15 text
Demo
Branch: 02a-input-signals
Slide 16
Slide 16 text
Architecture Rule #1
Synchronously derive state where possible
Slide 17
Slide 17 text
Effects
Slide 18
Slide 18 text
Current effect implementation:
Mainly for rendering!
Slide 19
Slide 19 text
Demo
Branch: 04c-effects
Slide 20
Slide 20 text
Architecture Rule #2
Avoid effects propagating state and Signal writes
Slide 21
Slide 21 text
“Business Effects“
Slide 22
Slide 22 text
What are „Business Effects“?
Effect triggering (business) logic
on Signal change
Slide 23
Slide 23 text
Why „Business Effects“ are critical
Glitch-free property: Events might get lost
Auto-Tracking
Cycles and Change Cascades
Effect: End of the „reactive chain“
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
Event
(click, data, etc.)
Signal
{ … }
Logic
Slide 26
Slide 26 text
Alternative
Use RxJS
Slide 27
Slide 27 text
Alternative
Use reactive Helpers
Slide 28
Slide 28 text
Demo
Branch: 08b-details
Slide 29
Slide 29 text
Hint #1
Be aware of options and consequences of “Business Effects“
Hint #3
Avoid Race Conditions (e.g. RxJS, loading flag, …)
Slide 37
Slide 37 text
Stores
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
Stores Streamline Reactive Flow
Component
Store
"Intention" Signal
sync/ async
computed()
computed()
Currently:
Main Use Case for Signlas
Business Effects,
Events, RxJS
and/or RxJS
Slide 42
Slide 42 text
Demo
Branch: 07-state-service-starter
Slide 43
Slide 43 text
Architecture Rule #3
Stores make your reactive flow more manageable
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 46
Slide 46 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 47
Slide 47 text
Conclusion
Hint #1
Signals play well together with RxJS
Hint #2
Avoid Race Conditions (e.g. RxJS and/or loading flag)
Hint #3
Be aware of options and consequences of “Business Effect“