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
Demo
Slide 10
Slide 10 text
Computed
Slide 11
Slide 11 text
Demo
Branch: 01a-add-signals
Slide 12
Slide 12 text
Demo
Branch: 02a-input-signals
Slide 13
Slide 13 text
Architecture Rule #1
Synchronously derive state where possible
Slide 14
Slide 14 text
Rendering
Effects
Slide 15
Slide 15 text
Rendering vs. Business Effects?
Slide 16
Slide 16 text
Current effect implementation:
Mainly for rendering
Slide 17
Slide 17 text
Demo
Branch: 04c-effects
Slide 18
Slide 18 text
Architecture Rule #2
Avoid (rendering) effects propagating state and Signal writes
Slide 19
Slide 19 text
Business Effects
Slide 20
Slide 20 text
What are Business Effects?
Effect triggering (business) logic
on Signal change
Slide 21
Slide 21 text
Why Signals as Events are Critical?
Glitch-free property: Events might get lost
Quickly leads to Effects with Signal Writes
Chains of change and cycles?
Slide 22
Slide 22 text
Alternative
Use Event behind Signal Change
Event
(click, data, etc.)
Signal
{ … }
Logic
Slide 23
Slide 23 text
Alternative
Use Event behind Signal Change
Event
(click, data, etc.)
Signal
{ … }
Logic
Slide 24
Slide 24 text
However …
Angular APIs are more and more Signal-based
Using Events behind Signal change might feel
unnatural
Slide 25
Slide 25 text
Demo
Branch: 08b-details
Slide 26
Slide 26 text
Hint #3
Be aware of options and consequences of Business Effects
Hint #2
Avoid Race Conditions (e.g. RxJS and/or loading flag)
Slide 33
Slide 33 text
Stores
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Stores Streamline Reactive Flow
Component
Store
"Intention" Signal
sync/ async
computed()
computed()
Currently:
Main Use Case for Signas
Business Effects,
Events, RxJS
and/or RxJS
Slide 38
Slide 38 text
Demo
Branch: 07-state-service-starter
Slide 39
Slide 39 text
Architecture Rule #3
Stores make your reactive flow more manageable
Conclusion
Architecture Rule #1
Synchronously derive state where possible
Architecture Rule #2
Avoid (rendering) effects propagating state and signal writes
Architecture Rule #3
Stores make your reactive flow more manageable
Component
Store
Slide 42
Slide 42 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 Effects