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
But …
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
Architecture Rule #3
Stores make your reactive flow more manageable
…long-term, we do
want to move to a
point where we’re
making
RxJs optional for
Angular.
Jeremy Elbourn
Angular Tech Lead
Angular Q&A Session
https://www.youtube.com/live/yN1xIs0IucQ
Slide 43
Slide 43 text
We primarily want to
remove it (RxJs) from
the
critical learning
journey.
Minko Gechev
Angular Product Lead
Ng-Poland 2024
https://www.youtube.com/watch?v=QtTLZRIVaKk
Slide 44
Slide 44 text
…there are probably
many applications that
will just fire a fetch
request, get the data…
you kind of give them a
machinery that is more
expensive to
operate
Pawel Koszlowski
Angular Core
“Future for Angular” JSParty
https://changelog.com/jsparty/310
Slide 45
Slide 45 text
It’s (RxJs) not
required or strictly
necessary to
express async data
flow.
Minko Gechev
Angular Product Lead
https://twitter.com/mgechev/status/1757242040897933541
Slide 46
Slide 46 text
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 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 Effects