RxJS: Hot and Cold Observables
![](https://s3.amazonaws.com/media-p.slid.es/uploads/672180/images/3995670/pasted-from-clipboard.png)
Zenab Saleem
![](https://s3.amazonaws.com/media-p.slid.es/uploads/672180/images/4017755/facebook-logo.png)
/zenabSaleemKhan
![](https://s3.amazonaws.com/media-p.slid.es/uploads/672180/images/4017754/Octocat.png)
/zenabKhan
![](https://s3.amazonaws.com/media-p.slid.es/uploads/672180/images/4017753/twitter-logo.png)
Lead Developer
Recurship
![](https://s3.amazonaws.com/media-p.slid.es/uploads/672180/images/4458967/22508307.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/672180/images/4458966/rx_logo.png)
zainabslm@gmail.com
What is RxJS?
RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.
What is an Observable?
A representation of any set of values over any amount of time. This the most basic building block of RxJS.
What is an Observable? (cont.)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/672180/images/4459229/observable-animation.gif)
- Array of values over an amount of time.
- A data stream
- Just a function, with a few special characteristics.
- It takes in an “observer” (an object with “next”, “error” and “complete” methods on it)
- Returns cancellation logic (unsubscribe)
- Connects observer to "producer"(source of values)
What is an Observable? (cont.)
- Observables can be either hot or cold
- Observables created using the of, from, range, interval and timer operators will be cold.
- Observables created with the fromEvent operator for either user events or WebSocket events will be hot.
Cold Observable
- Producer created by the observable inside it
- Data emits on subscribe to observable
- Completes data stream itself
- Unicasts
- All subscriptions are independent
- Re-emits the whole values for new subscriber
![](https://s3.amazonaws.com/media-p.slid.es/uploads/672180/images/4459260/giphy.gif)
Hot Observable
- Producer created outside the observable
- Data emits as soon as observable created
- need extra logic to complete the subscription
- Multicasts
- All subscriptions share values
- Data can be lost if no subscriber
![](https://s3.amazonaws.com/media-p.slid.es/uploads/672180/images/4459282/untitled-401.gif)
Making cold observable hot
Example 1
Example 2
Publish
publish() : ConnectableObservable
???? Observable
Warm Observable
- Start emitting when at least one subscriber
- Publish() along with refCount()
- Shortcut share()
Summary
- Hot observable -> Movie at the Cinema
- Cold observable -> Movie with Netflix
- ‘Warm’ observable -> Movie with friends
Useful links
-
Hot vs Cold Observables - Ben Lesh
-
Hot vs Cold Observables for Angular - Youtube video
-
RxJS: Hot And Cold Observables - alligator.io
-
COLD VS HOT OBSERVABLES - Christoph Burgdorf
-
RxJS: Observables and Observers - Todd Motto
Thank you :)
RXJS: Hot and Cold Observables
By Zenab Saleem
RXJS: Hot and Cold Observables
- 2,360