Going Reactive with React

Transcript

1. Going Reactive with React @fdecampredon Full-stack developper at Fadio IT (http://www.fadio.it) Reactive2015 conference, November 4th 2015
2. 1. React Changes Everything 2. What about Event Management ? 3. Event management with RxJS 4. React + RxJS 5. Other fields of Application Plan
3. React Changes Everything
4. Template => JSX
5. MVC => FLUX
6. REST => GraphQL
7. CSS => Inline Styles
8. And much more !
9. But what about Event Management ?
10. A simple React component : What’s happening ? User click on the button `onButtonClick` handler State update Re-rendering
11. Angular version User click on the button `onButtonClick` handler State update Re-rendering What’s happening ?
12. Backbone version : User click on the button `onButtonClick` handler State update Re-rendering What’s happening ?
13. Event management has not changed so much with React
14. Is it fine ?
15. A naive drag implementation
16. Problems… • Fragmented logic • Intermediate state hell • Relationship between user input and Component state is not clearly established
17. Can we do better ?
18. RxJS to the rescue !
19. RxJS: Reactive Extensions for JavaScript • Observable: Push based Collection • Operators: Array like operators (map, filter, flatMap, etc …) • Scheduler: Controls when a subscription starts and when notifications are published.
20. Counter component with RxJS State
21. Drag with RxJS State
22. • Coherence: all the logic at the same place • Implicit intermediate state • Express the relationship between state and user input in a declarative way Advantages
23. React + RxJS: How to
24. Manually
25. Fine but a little verbose
26. rx-react : A collection of helpers for working with React and RxJS
27. rx-react: • « FuncSubject »: Callable subject • « StateStreamMixin »: Bind component state to an observable • And more …
28. « FuncSubject »: Callable Subject • Subjects that can be used as callback • Calling the function is the same as calling `onNext` • Designed to be event handler or lifecycle method.
29. « StateStreamMixin » Bind the State of a component to an observable • On mount the `getStateStream` method is called • Component state is bound to the returned observable • Subscription is automatically disposed on unmounting
30. rx-react with ES6 class • RxReact.Component implements the `StateStreamMixin` • Need to find a better pattern to avoid inheritance
31. react-rx-component by @aciditte « Create smart components using RxJS observables »
32. react-rx-component • Higher order « smart » component implement the logic • « dumb » component merely return elements for given props
33. Other fields of application
34. Pre-computation of events
35. Pre-computation of events • Simple slider component • Designed to be a « controlled » component • We implement the « onChange »
 Event without any state
36. Flux
37. Classic flux store : • Dispatcher « push » actions over time • Store aggregate actions and « push » intermediate results • Does it reminds you something ?
38. Flux store as observable • Dispatcher is an observable • A store is just the result of the « scan » operator applied Dispatcher • Component can just bind their state to the Store observable
39. Animations
40. Animation • Define the `stream` of state that will control the animation • A bit similar to Flash « timeline » • Easing function by Paul Taylor:
 https://github.com/trxcllnt/rxjs-easing
41. • React changes Everything • But not Event Management • We can do better ! • RxJS + React: perfect match Summary
42. François de Campredon - Fadio IT @fdecampredon https://github.com/fdecampredon/ Questions ? rx-react: https://github.com/fdecampredon/rx-react/ react-rx-component: https://github.com/acdlite/react-rx-component/