Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

RxJS and Reactive Programming - Modern Web UI - May 2015

42,485 views

Published on

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

Published in: Technology
  • Be the first to comment

RxJS and Reactive Programming - Modern Web UI - May 2015

  1. 1. RxJS and Reactive Programming Ben Lesh Senior UI Engineer Netflix Edge Tools & Insights @benlesh
  2. 2. Observables
  3. 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. 4. Front End Development Mostly synchronous or asynchronous?
  5. 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. 6. But What Are We Doing With Code? • Handling User Input • Animations • AJAX/JSONP • Web Sockets/SSE • Updating DOM
  7. 7. Most of these things are ASYNC! • Handling User Input • Animations • AJAX/JSONP • Web Sockets/SSE • Updating DOM
  8. 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. 9. Asynchronous values Can be represented as collections!
  10. 10. Collections today We have Iterables
  11. 11. Iterable
  12. 12. Observable is basically an Iterable turned inside-out
  13. 13. RxJS Observables
  14. 14. RxJS Observables (shorter)
  15. 15. RxJS Observables (with error handling)
  16. 16. In fact, this should look familiar…
  17. 17. But Observables handle more than one value, so we need to know when they’re done
  18. 18. Observables Any number of values over any amount of time
  19. 19. SO WHAT? We can represent values over time as a collection… big deal.
  20. 20. Set operations! • Map • Reduce • Filter • Concat • Merge • Zip • FlatMap • Take • Skip
  21. 21. Plus async set operations! • Map • Reduce • Filter • Concat • Merge • Zip • FlatMap • Take • Skip • Buffer • Window • CombineLatest • Scan • FlatMapLatest • WithLatestFrom
  22. 22. Confused Yet? Code Example!
  23. 23. Observables for collections? I have arrays and iterables! Arrays already have map, filter, reduce
  24. 24. Demo day at Netflix!
  25. 25. We hooked it up to prod data and…
  26. 26. So what happened? Too much array map, filter, reduce!
  27. 27. Array functional programming issues • Iterating over arrays at each step • Allocating new arrays at each step • GC’ing those arrays
  28. 28. Array filter, map, reduce
  29. 29. RxJS Observables to the rescue! Stream Processing is nice
  30. 30. Observable Stream Processing • Data is only iterated over once • No intermediary arrays created • Less GC
  31. 31. Observable filter, map, reduce
  32. 32. Problem solved Less array allocation, less GC, less iterating over arrays
  33. 33. RxJS Observables Are about to solve another problem
  34. 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. 35. Basically you had to stay very, very still..
  36. 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. 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. 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. 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. 40. This is nice… • Setup a web socket on subscription • Close the web socket on disposal
  41. 41. Observables can be retried or repeated Simply by subscribing more than once!
  42. 42. Even better! RxJS has operators: retry, retryWhen and repeat
  43. 43. Code Example…
  44. 44. Application Development Is about data flow
  45. 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. 46. RxJS makes this easier to reason about (with practice)
  47. 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. 48. Thinking in streams var c = a + b; // do something with c
  49. 49. Thinking in streams var cStream = Observable.combineLatest(aStream, bStream, (a, b) => a + b); cStream.subscribe(c => { // do something with c });
  50. 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. 51. RxJS entry and exit observable sources for entries do() and subscribe() for exits
  52. 52. The idea is to keep your data flow contained And control those side effects
  53. 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. 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. 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. 56. Questions? Comments? Corrections? @benlesh blesh@netflix.com ben@benlesh.com http://github.com/blesh

×