RxJS, Signals & Native Observables

Angular’s approach to reactivity is evolving. For years, RxJS was the standard. Then Signals introduced a simpler, framework-integrated model. Now, with Native Observables becoming part of the web platform, new questions arise: how do these pieces fit together? In this talk, we will explore the differences and common ground between RxJS and Native Observables, and examine what this means for the future of Angular and Signals. Beyond simple patterns like “events vs. state,” you will learn a practical model to decide when to use Signals, when Observables are more suitable, and where Signals are likely to replace them.

Transcript

1. RxJS, Signals & Native Observables What Now? RainerHahnekamp
2. About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io NgRx Core Team • Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing
3. RainerHahnekamp
4. RainerHahnekamp "Angular should become easier." "Signals are easier than RxJS." "You will require both."
5. RainerHahnekamp Why RxJS doesn't go away • Existing Code • Knowledge among Developers • Native Observables • Superior Race Condition Management
6. RainerHahnekamp "Angular should become easier." "Signals are easier than RxJS." "You will require both." 🫤
7. RainerHahnekamp Agenda 1. How did Signals/optional RxJS happen? 2. Why not stick to RxJS? 3. Why is RxJS difficult? 4. When to use RxJS and when Signals? 5. Will Native Observables change anything? 6. How to simplify RxJS? 7. What's a potential future?
8. …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 8. September 2023 https://www.youtube.com/live/yN1xIs0IucQ
9. 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
10. …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
11. To clarify, we have two goals with RxJS and Angular: 1. Angular shouldn't require you to learn/use RxJS. 2. Using RxJS with Angular should feel like a natural, polished experience. Alex Rickabaugh Angular Framework Lead https://x.com/synalx/status/1844397229525913684
12. RainerHahnekamp Why not stick to RxJS?
13. RainerHahnekamp Why not stick to RxJS? • RxJS is generic • Frontend-specific requirements ◦ Pull/Push Behavior ▪ Glitch-Free ▪ Pull !== Subscription ◦ No Side-Effects ▪ resource vs HttpClient ◦ Value has to be there all the time
14. Coding Time
15. RainerHahnekamp Why is RxJS difficult?
16. RainerHahnekamp "Problem Fields" • Subscription Management • Multicasting • Error Behavior • Asynchronous & Synchronous Tasks • Incompatibility with Non-Streaming Behavior ◦ HTTP Requests
17. Coding Time
18. RainerHahnekamp When to choose Signals and when RxJS?
19. RainerHahnekamp a b c d e State Events (Observables, Callbacks) "Event-based" Change Detection / Synchronization (zone.js)
20. RainerHahnekamp a b c d e State (Signals) Events (Observables, Callbacks) "State-based" Change Detection / Synchronization (Signals)
21. RainerHahnekamp Component Tree DOM Submit Cancel zone.js Handled DOM Events Asynchronous Tasks Change Detection with zone.js
22. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection without zone.js (zoneless) async Pipe Signal Change Handled DOM Event Immutable Property Binding manually run markForCheck()
23. RainerHahnekamp Component Tree DOM Submit Cancel Future Change Detection Signal Components Signal Change
24. RainerHahnekamp Signals • Represents State ◦ Value is always available ◦ Glitch-Free RxJS • Represents Events ◦ Time plays a central role ◦ Race Condition Management
25. RainerHahnekamp a b c d e State (BehaviorSubject) Events (Observables, Callbacks) Old Way of managing State
26. RainerHahnekamp Signals • Represents State ◦ Value is always available ◦ Glitch-Free RxJS • Represents Events ◦ Time plays a central role ◦ Race Condition Management BehaviorSubject as intersection
27. RainerHahnekamp Signals • Represents State ◦ Value is always available ◦ Glitch-Free RxJS • Represents Events ◦ Time plays a central role ◦ Race Condition Management BehaviorSubject as intersection
28. RainerHahnekamp • You MUST use Signals for state • You CAN use RxJS for events
29. RainerHahnekamp It is not RxJS vs. Signals. It is RxJS vs. event callbacks
30. Coding Time
31. RainerHahnekamp Is it really that easy? Signal Change = Event
32. RainerHahnekamp a b c d e State (Signals) Events (Observables, Callbacks) "State-based" Change Detection / Synchronization (Signals) x y z Debouncing of Form Fields Signals
33. RainerHahnekamp API Challenges Is it really that easy? Signal Change = Event
34. RainerHahnekamp Will Native Observables change anything?
35. Coding Time
36. RainerHahnekamp How to make RxJS easier?
37. Coding Time
38. RainerHahnekamp What's a potential future?
39. RainerHahnekamp Where RxJS Shines… Pipe Operators Managing Race Conditions
40. RainerHahnekamp Three Levels of RxJS Usage 1. No RxJS a. For very simple applications b. Self-written pipe operators (debounceTime)
41. RainerHahnekamp Three Levels of RxJS Usage 1. No RxJS a. For very simple applications b. Self-written pipe operators (debounceTime) 2. Embedded RxJS a. Library, Functions manage subscriptions automatically b. Users just need to apply pipe operators c. SignalStore, ngxtension,...
42. RainerHahnekamp Three Levels of RxJS Usage 1. No RxJS a. For very simple applications b. Self-written pipe operators (debounceTime) 2. Embedded RxJS a. Library, Functions manage subscriptions automatically b. Users just need to apply pipe operators c. SignalStore, ngxtension,... 3. All-In RxJS a. Event-Driver Apps b. Dashboards, Monitoring,...
43. RainerHahnekamp Three Levels of RxJS Usage 1. No RxJS a. For very simple applications b. Self-written pipe operators (debounceTime) 2. Embedded RxJS a. Library, Functions manage subscriptions automatically b. Users just need to apply pipe operators c. SignalStore, ngxtension,... 3. All-In RxJS a. Event-Driver Apps b. Dashboards, Monitoring,...
44. RainerHahnekamp Summary • Use Signals whenever you can • Don't use BehaviorSubject • Don't use RxJS because just because it is an event • Make use of utility functions ◦ RxJS in a controlled manner • Signals will incorporate common RxJS use cases ◦ switchMap in resource's loader ◦ exhaustMap in resource's reload()