Introduction to RxJS
Brian Love
Software Architect @ Briebug
brianflove.com
twitter.com/brian_love
Demo Files
git clone git@github.com:blove/rxjs-intro.git
What is RxJS?
- Javascript implementation of ReactiveX Library
- Building asynchronous, modular, event-based apps
- Streams subject matter through the app
- Allows streams of data to be observed
Observer Design Pattern
What are Observables?
- Implements Observer design pattern
- Watches a subject for Notification that is emitted
- Push notifications to Observer instances
- Allows functional Array-style operators (e.g. map, filter, reduce, etc.)
From Promiseland
promise.ts
To Observableland
observable.ts
What are Notifications?
- Containers that represent an event or value
- Pushed through observables to observers
- Also include metadata about the event or value, including the type of message:
- next
- error
- completion
What are Observers?
- Receives a Notification from an Observable
- Managed by a Subscription
- React to next, error and completion of observable
What are Subscriptions?
- The link between an Observable and an Observer
- Invoke unsubscribe() to stop listening to Notifications
- Can add() child subscriptions
- Child subscriptions are all unsubscribed when parent unsubscribe() method is invoked
Is this included in ES2016?
- Not yet
- RxJS provides ECMAScript Observable today
- TC39 proposal is in stage 1
What are Subjects?
- Sources of notifications
- Extends Observable
- Have different behaviors
Dive into Subjects
subject.ts
async-subject.ts
behavior-subject.ts
replay-subject.ts
Unicast vs. Multicast
- Each subscribed Observer owns an independent execution of the Observable
- A Subject can multicast to multiple subscribed Observers
Dive into unicast vs multicast
observable-unicast.ts
subject-multicast.ts
Hot or Cold?
- Observables may be either Hot or Cold
- Cold is when the observable creates the source of events or values ("producer") only when subscribed to
- Hot is when the observable closes around an already existing producer
Cold Observables
- You have most likely already used them
- The Http service in Angular returns cold observables
- Subscribing to them more than once will create multiple instances of the producer
- Multiple subscriptions to an Http observer result in multiple Http calls to the same endpoint!
Brrr
observable-cold.ts
Hot Observables
- You may have already used them
- The NGRX Actions observable is hot
- Multiple subscriptions to actions$ process the same events from the same single source
- Use .share() to make a cold observable hot
Yowza
observable-hot-1.ts
observable-hot-2.ts
Hot Observables
- You may have already used them
- The NGRX Actions observable is hot
- Multiple subscriptions to actions$ process the same events from the same single source
- Use .share() to make a cold observable hot
Why Unsubscribe?
- Prevent memory leaks
- You don't need to unsubscribe from:
- HttpClient
- ActivatedRoute
Subscription Management
- Use AsyncPipe
- Invoke unsubscribe() on Subscription
- Use takeWhile() or takeUntil() operators
Unsubscribe
takewhile.ts
takeuntil.ts
Thanks
- Jon Rista @ Briebug
- Ben Lesh
- Angular Community
What's Next?
- Operators:
- catchError()
- concat()
- debounceTime()
- distinctUntilChanged()
- filter()
- first()
- forkJoin()
- map()
- scan()
- startWith()
- switchMap()
- take()
- tap()
- withLatestFrom()
- Testing with Rx Marbles
- Maybe more??
Introduction to RxJS
By Brian Love
Introduction to RxJS
Learn the basics of RxJS, Observables, Subjects, Notifications, Subscriptions, and more.
- 1,163