Going Reactive with React
@fdecampredon
Full-stack developper at Fadio IT (http://www.fadio.it)
Reactive2015 conference, November 4th 2015
Slide 2
Slide 2 text
1. React Changes Everything
2. What about Event Management ?
3. Event management with RxJS
4. React + RxJS
5. Other fields of Application
Plan
Slide 3
Slide 3 text
React Changes
Everything
Slide 4
Slide 4 text
Template => JSX
Slide 5
Slide 5 text
MVC => FLUX
Slide 6
Slide 6 text
REST => GraphQL
Slide 7
Slide 7 text
CSS => Inline Styles
Slide 8
Slide 8 text
And much more !
Slide 9
Slide 9 text
But what about Event
Management ?
Slide 10
Slide 10 text
A simple React component :
What’s happening ?
User click on the button
`onButtonClick` handler
State update
Re-rendering
Slide 11
Slide 11 text
Angular version
User click on the button
`onButtonClick` handler
State update
Re-rendering
What’s happening ?
Slide 12
Slide 12 text
Backbone version :
User click on the button
`onButtonClick` handler
State update
Re-rendering
What’s happening ?
Slide 13
Slide 13 text
Event management has
not changed so much
with React
Slide 14
Slide 14 text
Is it fine ?
Slide 15
Slide 15 text
A naive drag implementation
Slide 16
Slide 16 text
Problems…
• Fragmented logic
• Intermediate state hell
• Relationship between user input and Component
state is not clearly established
Slide 17
Slide 17 text
Can we do better ?
Slide 18
Slide 18 text
RxJS to the rescue !
Slide 19
Slide 19 text
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.
Slide 20
Slide 20 text
Counter component with RxJS
State
Slide 21
Slide 21 text
Drag with RxJS
State
Slide 22
Slide 22 text
• Coherence: all the logic at the same place
• Implicit intermediate state
• Express the relationship between state and user input
in a declarative way
Advantages
Slide 23
Slide 23 text
React + RxJS:
How to
Slide 24
Slide 24 text
Manually
Slide 25
Slide 25 text
Fine but a little
verbose
Slide 26
Slide 26 text
rx-react :
A collection of helpers for
working with React and RxJS
Slide 27
Slide 27 text
rx-react:
• « FuncSubject »: Callable subject
• « StateStreamMixin »: Bind component state to an
observable
• And more …
Slide 28
Slide 28 text
« 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.
Slide 29
Slide 29 text
« 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
Slide 30
Slide 30 text
rx-react with ES6 class
• RxReact.Component implements
the `StateStreamMixin`
• Need to find a better pattern to
avoid inheritance
Slide 31
Slide 31 text
react-rx-component
by @aciditte
« Create smart components
using RxJS observables »
Slide 32
Slide 32 text
react-rx-component
• Higher order « smart »
component implement the logic
• « dumb » component merely
return elements for given props
Slide 33
Slide 33 text
Other fields of application
Slide 34
Slide 34 text
Pre-computation
of events
Slide 35
Slide 35 text
Pre-computation of events
• Simple slider component
• Designed to be a « controlled »
component
• We implement the « onChange »
Event without any state
Slide 36
Slide 36 text
Flux
Slide 37
Slide 37 text
Classic flux store :
• Dispatcher « push » actions
over time
• Store aggregate actions and
« push » intermediate results
• Does it reminds you
something ?
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
Animations
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
• React changes Everything
• But not Event Management
• We can do better !
• RxJS + React: perfect match
Summary
Slide 42
Slide 42 text
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/