Embrace Reactive Programming with RxJS in React.js and Vue.js applications

Transcript

1. Embrace Reactive Programming with RxJS in React & Vue June 1st, 2018 @ AmsterdamJS By @fahad19 from @TravixEng
2. What’s to come? • Learn to think in data streams • Why RxJS is valuable to us • How React & Vue are reactive in a similar way • Benefits of combining RxJS with React & Vue • How to use it in production?
3. WHAT is REACTIVE PROGRAMMING?
4. Reactive programming is programming with asynchronous data streams André Staltz
5. WHAT is a DATA STREAM?
7. Number of people in this room
11. Marble diagram: ASCII art • a, b, c, d are emitted values • X is an error • | (pipe) is the ‘completed’ signal • ---> is the timeline
12. Count: ---100---99---100-|-> Time: ---1m----5m---20m----
13. OBSERVABLES
14. Observables • It’s a new type in JavaScript (not accepted yet) • Used for modelling push-based data sources (intervals, sockets, etc) • Think streams, which can keep emitting values multiple times • They are lazy (nothing happens until you subscribe) • They can be cancelled • They are compositional (think higher-order functions) TC39 Proposal: https://github.com/tc39/proposal-observable
15. Observable: example of creating
16. Observable: example of subscribing
17. Observable: implementations • zen-observable: https://github.com/zenparsing/zen-observable • RxJS v5+: https://github.com/ReactiveX/RxJS
18. Rx: Reactive Extensions
19. Rx: Reactive Extensions • An API for asynchronous programming with Observable streams • Cross-platform: JS, Java, .NET, Swift, and more • Functional: clean input/output functions over Observable streams More on http://reactivex.io/
20. RxJS v5+ • Rx for JavaScript • v5 is an implementation the TC39 proposal for Observables • RxJS is more than just the TC39 proposal • Lots of operators to compose your Observables More on http://reactivex.io/rxjs/
21. RxJS v5+ • Functions for creating Observable streams • Functions for combining multiple streams together • Operators for transforming streams More on http://reactivex.io/rxjs/
22. RxJS: Makes hard things easy • Real time apps with sockets • Complex SPAs • Cancellation of streams • Handling failures with retry logic • Composition More on http://reactivex.io/rxjs/
23. Visualize operators in a marble diagram
24. RxJS operators in action
25. Subscribe
26. Other Types • Subject: Both Observable + Observer • BehaviorSubject: Subjects, with initial value More on http://reactivex.io/rxjs/
27. Subjects
28. COMPONENTS
29. React.js Vue.js
30. PROPS
31. PROPS as a STREAM
35. Express props as an Observable
37. Example: Interval component (base)
38. I want something easy
39. Benefits of this separation • Functional and concise • Easy to read • Separation between logic and presentation • Components become stateless • Easier to unit test
40. How does it all connect?
41. Existing solutions • https://github.com/redux-observable/redux-observable • https://github.com/recyclejs/recycle • https://github.com/vuejs/vue-rx • https://github.com/johnlindquist/vue-streams
42. Limitations • Bound to a single Store’s subscription in all components • Can only generate new props stream during Component’s initial mount • Cannot access receiving props as a stream and react to it
43. proppyjs.com proppyjs.com
46. Connecting Observable to Components
47. Stream in => Stream out
48. Advanced use cases supported • Access to incoming props stream from parent • Global dependencies from any component ◦ Configuration ◦ Theme ◦ Redux store, etc • Server side rendering
49. THANKS! Ask any questions @fahad19