RxJS, Signals & Native Observables

Slide 1

Slide 1 text

RxJS, Signals & Native Observables What Now? RainerHahnekamp

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

RainerHahnekamp

Slide 4

Slide 4 text

RainerHahnekamp "Angular should become easier." "Signals are easier than RxJS." "You will require both."

Slide 5

Slide 5 text

RainerHahnekamp Why RxJS doesn't go away ● Existing Code ● Knowledge among Developers ● Native Observables ● Superior Race Condition Management

Slide 6

Slide 6 text

RainerHahnekamp "Angular should become easier." "Signals are easier than RxJS." "You will require both." 🫤

Slide 7

Slide 7 text

RainerHahnekamp Agenda 1. How did Signals/optional RxJS happen? 2. Why not stick to RxJS? 3. Why is RxJS difﬁcult? 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?

Slide 8

Slide 8 text

…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

Slide 9

Slide 9 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 10

Slide 10 text

…there are probably many applications that will just ﬁre 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 11

Slide 11 text

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

Slide 12

Slide 12 text

RainerHahnekamp Why not stick to RxJS?

Slide 13

Slide 13 text

RainerHahnekamp Why not stick to RxJS? ● RxJS is generic ● Frontend-speciﬁc requirements ○ Pull/Push Behavior ■ Glitch-Free ■ Pull !== Subscription ○ No Side-Effects ■ resource vs HttpClient ○ Value has to be there all the time

Slide 14

Slide 14 text

Coding Time

Slide 15

Slide 15 text

RainerHahnekamp Why is RxJS difﬁcult?

Slide 16

Slide 16 text

RainerHahnekamp "Problem Fields" ● Subscription Management ● Multicasting ● Error Behavior ● Asynchronous & Synchronous Tasks ● Incompatibility with Non-Streaming Behavior ○ HTTP Requests

Slide 17

Slide 17 text

Coding Time

Slide 18

Slide 18 text

RainerHahnekamp When to choose Signals and when RxJS?

Slide 19

Slide 19 text

RainerHahnekamp a b c d e State Events (Observables, Callbacks) "Event-based" Change Detection / Synchronization (zone.js)

Slide 20

Slide 20 text

RainerHahnekamp a b c d e State (Signals) Events (Observables, Callbacks) "State-based" Change Detection / Synchronization (Signals)

Slide 21

Slide 21 text

RainerHahnekamp Component Tree DOM Submit Cancel zone.js Handled DOM Events Asynchronous Tasks Change Detection with zone.js

Slide 22

Slide 22 text

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()

Slide 23

Slide 23 text

RainerHahnekamp Component Tree DOM Submit Cancel Future Change Detection Signal Components Signal Change

Slide 24

Slide 24 text

RainerHahnekamp Signals ● Represents State ○ Value is always available ○ Glitch-Free RxJS ● Represents Events ○ Time plays a central role ○ Race Condition Management

Slide 25

Slide 25 text

RainerHahnekamp a b c d e State (BehaviorSubject) Events (Observables, Callbacks) Old Way of managing State

Slide 26

Slide 26 text

RainerHahnekamp Signals ● Represents State ○ Value is always available ○ Glitch-Free RxJS ● Represents Events ○ Time plays a central role ○ Race Condition Management BehaviorSubject as intersection

Slide 27

Slide 27 text

Slide 28

Slide 28 text

RainerHahnekamp ● You MUST use Signals for state ● You CAN use RxJS for events

Slide 29

Slide 29 text

RainerHahnekamp It is not RxJS vs. Signals. It is RxJS vs. event callbacks

Slide 30

Slide 30 text

Coding Time

Slide 31

Slide 31 text

RainerHahnekamp Is it really that easy? Signal Change = Event

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

RainerHahnekamp API Challenges Is it really that easy? Signal Change = Event

Slide 34

Slide 34 text

RainerHahnekamp Will Native Observables change anything?

Slide 35

Slide 35 text

Coding Time

Slide 36

Slide 36 text

RainerHahnekamp How to make RxJS easier?

Slide 37

Slide 37 text

Coding Time

Slide 38

Slide 38 text

RainerHahnekamp What's a potential future?

Slide 39

Slide 39 text

RainerHahnekamp Where RxJS Shines… Pipe Operators Managing Race Conditions

Slide 40

Slide 40 text

RainerHahnekamp Three Levels of RxJS Usage 1. No RxJS a. For very simple applications b. Self-written pipe operators (debounceTime)

Slide 41

Slide 41 text

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,...

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

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()