An overview of RxJS and Reactive Programming as presented at the Modern Web UI Meetup at Mozilla Mountain View, May 13, 2015

1. RxJS and Reactive Programming
Ben Lesh
Senior UI Engineer
Netflix Edge Tools & Insights
@benlesh

2. Observables

3. Observables
• TC39 proposal to add them to ES2016 (ES7)
• Angular 2 uses them and supports them in a
first class way
• ReactJS will use them and support them in a
first class way
• (Ask me about Ember after :P)

4. Front End Development
Mostly synchronous or
asynchronous?

5. We tend to think synchronously
We write code in blocks that are read top to
bottom, left to right.
If this, then this, else this…

6. But What Are We Doing With Code?
• Handling User Input
• Animations
• AJAX/JSONP
• Web Sockets/SSE
• Updating DOM

7. Most of these things are ASYNC!
• Handling User Input
• Animations
• AJAX/JSONP
• Web Sockets/SSE
• Updating DOM

8. Async in JavaScript
usually looks like this
A function that gets called 0 to N times over time,
generally being passed a value

9. Asynchronous values
Can be represented as collections!

10. Collections today
We have Iterables

11. Iterable

12. Observable
is basically an Iterable turned inside-out

13. RxJS Observables

14. RxJS Observables (shorter)

15. RxJS Observables (with error handling)

16. In fact, this should look familiar…

17. But Observables handle more than one value, so
we need to know when they’re done

18. Observables
Any number of values over any
amount of time

19. SO WHAT?
We can represent values over time as
a collection… big deal.

20. Set operations!
• Map
• Reduce
• Filter
• Concat
• Merge
• Zip
• FlatMap
• Take
• Skip

21. Plus async set operations!
• Map
• Reduce
• Filter
• Concat
• Merge
• Zip
• FlatMap
• Take
• Skip
• Buffer
• Window
• CombineLatest
• Scan
• FlatMapLatest
• WithLatestFrom

22. Confused Yet? Code Example!

23. Observables for collections?
I have arrays and iterables!
Arrays already have map, filter,
reduce

24. Demo day at Netflix!

25. We hooked it up to prod data and…

26. So what happened?
Too much array map, filter, reduce!

27. Array functional programming issues
• Iterating over arrays at each step
• Allocating new arrays at each step
• GC’ing those arrays

28. Array filter, map, reduce

29. RxJS Observables to the rescue!
Stream Processing is nice

30. Observable Stream Processing
• Data is only iterated over once
• No intermediary arrays created
• Less GC

31. Observable filter, map, reduce

32. Problem solved
Less array allocation, less GC, less
iterating over arrays

33. RxJS Observables
Are about to solve another problem

34. Web Socket Connectivity Issues
• If you walked between buildings you lost the
socket connection
• If you closed your lid for too long, you lost the
socket connection
• If the network hiccupped or went down, you lost
the socket connection
• If the server has an issue or restarts, you lose the
socket connection
• If you’re using 4G and your singal gets too low,
you lose the socket connection

35. Basically you had to stay very, very still..

36. Multiplexing Web Sockets
• Connect to the socket
• Send a subscription message for each data
stream you care about
• Group the incoming messages by data stream
• Send an unsubscribe message when you’re
done with a stream
• If all streams are disconnected, close the
socket.

37. Reconnecting Multiplexed
Web Sockets Is A Pain
• Reconnect the socket
• Resend all subscriptions for previously
subscribed streams
• If you’re offline, wait for an online event,
and reconnect
• Add a delay and retry again (exponential)
• What if the user switches views and needs
different data streams during this?

38. Observables Are Lazy
• Execute code upon subscription to set up the
underlying data stream
• Execute code upon disposal to teardown the
underlying data stream

39. So you can do things like
• Setup a web socket on subscription
• Close the web socket on disposal
• Send an AJAX request
• Abort the AJAX request on disposal
• Setup an event listener
• Automatically remove event listeners on
disposal

40. This is nice…
• Setup a web socket on subscription
• Close the web socket on disposal

41. Observables can be
retried or repeated
Simply by subscribing
more than once!

42. Even better!
RxJS has operators:
retry, retryWhen and repeat

43. Code Example…

44. Application Development
Is about data flow

45. How does your data
flow through your app?
• What events cause variables to be produced
• How are those variables used and for what?
• Are you sure you’re containing side-effects?

46. RxJS makes this easier to reason about
(with practice)

47. Thinking in streams
• Imagine every variable (not consts) is a stream
• To get it, you need to figure out where it
comes from
• It could come from other variables, or it could
come from an event
• Figure out your side effects, these are the exit
points for your data flow

48. Thinking in streams
var c = a + b;
// do something with c

49. Thinking in streams
var cStream = Observable.combineLatest(aStream, bStream,
(a, b) => a + b);
cStream.subscribe(c => {
// do something with c
});

50. Data Flow Entry and Exit
Common entry points
• User input
• Network I/O
• Properties set
• Events handled
Common exit points
• State
• Persistence
• View Renders
• Emitting events

51. RxJS entry and exit
observable sources for entries
do() and subscribe() for exits

52. The idea is to keep
your data flow contained
And control those side effects

53. Recap
• Any number of values, any amount of time
• Are lazy, don’t do anything until you subscribe
• Embody the set up and tear down of their
underlying data sources
• Can retry/repeat
• Use do() and subscribe() for side-effects
• Observables were designed from the
beginning to be cancellable

54. Resources
RxJS 2 on GitHub:
https://github.com/Reactive-Extensions/RxJS
Talk Examples:
https://github.com/blesh/rx-talk-may-2015
RxSocketSubject:
https://github.com/blesh/RxSocketSubject
RxJS 3 (coming soon):
https://github.com/ReactiveX/RxJS
Observable Spec:
https://github.com/jhusain/observable-spec
Async Generator Proposal:
https://github.com/jhusain/asyncgenerator

55. Who to follow
@headinthebox – Erik Meijer (Rx)
@jhusain – Jafar Husain (TC39 Observable)
@mattpodwysocki – Matt Podwysocki (RxJS)
@jeffbcross – Jeff Cross (Angular)
@victorsavkin – Victor Savkin (Angular)
@benlesh – (me)
@benjchristensen – Ben Christensen (RxJava)

56. Questions? Comments? Corrections?
@benlesh
blesh@netflix.com
ben@benlesh.com
http://github.com/blesh