Introduction to the Reactive Extensions for JavaScript at Cascadia JS 2012

1. Don’t Cross the Streams…
Matthew Podwysocki
@mattpodwysocki

3. Callback Hell…
app.get('/index', function (req, res, next) {
User.get(req.params.userId, function (err, user) {
if (err) next(err);
db.find({user: user.name}, function (err, cursor) {
if (err) next(err);
cursor.toArray(function (err, items) {
if (err) next(err);
res.send(items);
});
});
});
});
…and the Pyramid of Doom

4. The promise of a better future…
tweetsAsync()
.then(function (a) { return usersAsync(a); })
.then(function (b) { return locationAsync(b); })
.done(function (c) { render(); });

5. What about events?
• What about composition?
• How do I clean up handlers?
• How do I merge streams?
• Or filter?
• Or aggregate?
• Without having a lot of state hanging around?
• The list goes on and on…

6. In other words…
We cross the streams!

7. What is it?
• RxJS is…
• a set of types representing asynchronous data streams
• a set of operators over asynchronous data streams
• a set of types to parameterize concurrency
RxJS = Observables + LINQ + Schedulers

8. Not another flow control library…
Why bother?

9. var mousedrag = mousedown.selectMany(function (md) {
// calculate offsets when mouse down
var startX = md.offsetX,
startY = md.offsetY;
// calculate diffs until mouse up
return mousemove.select(function (mm) {
return {
left: mm.clientX - startX,
top: mm.clientY - startY
};
}).takeUntil(mouseup);
});
Rich Composite Events…

10. var words = Rx.Observable.fromEvent(input, "keyup")
.select(function(x) { return input.value; })
.throttle(500)
.distinctUntilChanged()
.select(function(term) { return search(term); })
.switchLatest();
words.subscribe(function (data) {
// Bind data to the UI
});
Control Flow…

11. stockTicks
.groupBy(function (tick) { return tick.symbol; })
.selectMany(
function (g) { return g.bufferWithCount(2, 1); },
function (g, b) { return { key: g.key, b: b }; })
.select(function (c) {
return { diff: (c.b[1] – c.b[0]) / c.b[0], symbol: c.key };
})
.where(function (c) { return c.diff > 0.1; })
.select(function (c) {
return { company: c.symbol, increase: c.diff };
});
Complex Event Processing…

12. var sequence = '38,38,40,40,37,39,37,39,66,65';
var keyups = Rx.Observable.fromEvent(document, 'keyup')
.select(function (x) { return x.keyCode; })
.bufferWithCount(10, 10)
.subscribe(function (x) {
var matches = x.join() === sequence;
if (matches) console.log('Konami');
});

13. What is it?
• RxJS is…
• a set of types representing asynchronous data streams
• a set of operators over asynchronous data streams
• a set of types to parameterize concurrency
RxJS = Observables + LINQ + Schedulers

14. The Essentials…
Observer = {
onNext :
function (data) { … }, Observable = {
onError : subscribe :
function (error) { … }, function (observer) { … }
onCompleted : };
function () { … }
};
Observable
Subscribe
Observer

15. The Grammar Police…
• Zero or more values
* ( OnError | OnCompleted ) ?
• E.g. events are ∞ sequences
0 1 2
0 1
• It’s a sequence
0 1 2 • No concurrent
callbacks
• One time termination
0 1 2

16. First Class Events…

17. What?
• RxJS is…
• a set of types representing asynchronous data streams
• a set of operators over asynchronous data streams
• a set of types to parameterize concurrency
RxJS = Observables + LINQ + Schedulers

18. If you know ES5 Array “extras”…
Array Observable
• Querying • Querying
• concat • concat
• every • all
• filter • where
• map • select
• reduce • aggregate
• some • any
• Subscribing • Subscribing
• forEach • subscribe
… then you know RxJS

19. Querying Asynchronous Streams
• Observables are data streams
• Hence we can query them like we do with Arrays!
function
return

20. Querying Asynchronous Streams
• Observables are asynchronous
• Hence, they have a notion of time

21. Limited only by imagination…
aggregate generateWithRelativeTime selectMany
all groupBy sequenceEqual
amb skip
groupByUntil skipLast
any groupJoin skipUntil
asObservable skipWhile
average ignoreElements
interval start
buffer startWith
join subscribe
bufferWithCount
bufferWithTime materialize subscribeOn
max sum
bufferWithTimeOrCount switchLatest
catchException maxBy take
combineLatest merge takeLast
concat mergeObservable takeLastBuffer
concatObservable min takeUntil
contains minBy takeWhile
count multicast then
create throttle
never throwException
createWithDisposable
defaultIfEmpty observeOn timeInterval
onErrorResumeNext timeout
defer timer
delay publish using
dematerialize publishLast when
distinct range where
disinctUntilChanged refCount window
doAction repeat windowWithCount
elementAt windowWithAbsoluteTime
elementAtOrDefault replay windowWithRelativeTime
empty retry zip
generate returnValue
generateWithAbsoluteTime sample
scan
select

22. Creation operators
create*
empty
fromArray
generate*
never
range
repeat
returnValue

23. Standard operators
distinct
distinctUntilChanged
groupBy
select
selectMany
skip*
take*
where

24. Aggregation operators
aggregate
all
any
contains
count
min
max
scan

25. Error handling operators
catchException
finallyAction
onErrorResumeNext
retry
throwException
using

26. Complex Event operators
buffer*
groupJoin
join
window*
sample

27. Orchestration operators
combineLatest
concat
forkJoin
merge
skipUntil
switchLatest
takeUntil
zip

28. Time based operators
delay
interval
throttle
timeout
timeInterval
timer
timeStamp

29. What?
• RxJS is…
• a set of types representing asynchronous data streams
• a set of operators over asynchronous data streams
• a set of types to parameterize concurrency
RxJS = Observables + LINQ + Schedulers

30. The Role of Schedulers…
Many
implementations
• Key questions:
Cancellation
• How to run timers?
• Where to produce events? d = scheduler.schedule(
function () {
• Need to synchronize with the UI?
// Asynchronously
// running work
• Providing one answer: },
• Schedulers introduce concurrency 1000);
• Operators are parameterized by schedulers Optional time
• Provides test benefits as well

31. var scheduler = new TestScheduler();
var input = scheduler.createColdObservable(
onNext(300, "Cascadia"),
onNext(400, "JS"),
onCompleted(500));
var results = scheduler.startWithCreate(function () {
input.select(function (x) { return x.length; })
});
results.messages.assertEqual(
onNext(300, 8),
onNext(400, 2), Testability is King!
onCompleted(500));

32. Start using it now
Node.js
> npm install rx
NuGet
> Install-Package RxJS
Open Source
http://rx.codeplex.com/

33. What’s Next?
• Ongoing work
• Documentation
• Tutorials
• Where’s the vision?
• Scaling
• Distributed
• Merge with Node.js Streams

34. Cross the Streams…
Matthew Podwysocki
@mattpodwysocki
matthewp@microsoft.com

35. Credits
• Cross the Streams -
https://oshea12566.wordpress.com/2012/02/20/jeep-meeting-and-
trail-ride/
• NES Controller - http://en.wikipedia.org/wiki/File:NES-controller.jpg