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 theyre 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 GCing 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 youre 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
youre 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 youre 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 youre 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,
dont 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
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)