Reactive Programming with RxJS
Reactive programming is programming with asynchronous data streams.
"What is Reactive Programming?"
Reactive programming isn't new!
Excel anyone?
Traditionally we are using Promises for async
Promises
Types of async in modern web apps
- DOM events
- Animations
- AJAX
- WebSockets
- ServerSendEvents
Promises only really make sense for one of these
-
DOM events
-
0-N values
-
-
Animations
-
cancelable
-
-
AJAX
-
1 value
-
-
WebSockets
-
0-N values
-
-
ServerSendEvents
-
0-N values
-
... except when they don't
- Single page applications commonly prepare data via AJAX for each view shown
- When the view changes, the next view probably doesn't care about the previous view's data
- Fortunately, XHRs can be aborted!
- .. but promise-based AJAX implementations cannot be aborted, because promises cannot be cancelled
So how do we go from Promises to Observables?
Observable
- "Streams" or sets
- Of any number of things
- Over any amount of time
- Lazy
- Observables will not generate values via an underlying producer until they're subscribed to.
- Can be "unsubscribed" from.
- This means the underlying producer can be told to stop and even tear down
Observable
+
Iterator pattern
=
Observer pattern
Both Promises and Observables are built to solve problems around async
(to avoid "callback hell")
fs.readdir(source, function (err, files) {
if (err) {
console.log('Error finding files: ' + err)
} else {
files.forEach(function (filename, fileIndex) {
console.log(filename)
gm(source + filename).size(function (err, values) {
if (err) {
console.log('Error identifying file size: ' + err)
} else {
console.log(filename + ' : ' + values)
aspect = (values.width / values.height)
widths.forEach(function (width, widthIndex) {
height = Math.round(width / aspect)
console.log('resizing ' + filename + 'to ' + height + 'x' + height)
this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
if (err) console.log('Error writing file: ' + err)
})
}.bind(this))
}
})
})
}
})Operators
Observables
Schedulers
+
+
=
RxJS
What are these "operators?"
There are methods on Observables that allow you to compose new observables.
"RxJS is Lodash for async"
What are we building
Result
Before we dive into code
Let's code
3 calls?
Hot Observables
Ben Lesh about Hot vs Cold observables
- Observables are "cold" by default
- "Cold" observables create a new producer each time a consumer subscribes to them
- "Hot" observables share a single producer with every consumer that subscribes to them
Suggestion widget with "hot" observable:
RxJS is a bit like jQuery, you probably don’t need it as much as you think you do
with RxJS
rxjs
By Henk
