Reactive Programming and React
@fdecampredon
ReactJS Paris - 18/02/2016
Slide 2
Slide 2 text
Qu’est-ce que la
Reactive programming ?
Slide 3
Slide 3 text
Qu’est-ce que la Reactive programming ?
Réactif ?
Slide 4
Slide 4 text
React !== Reactive Programming
Slide 5
Slide 5 text
Qu’est-ce que la Reactive programming ?
Slide 6
Slide 6 text
Un peu compliqué …
Slide 7
Slide 7 text
« In the Interactive pattern, module X
defines which other modules X affects.
In the Reactive pattern, module X
defines which other modules affect X.»
André Staltz @andrestaltz
Slide 8
Slide 8 text
Interactive vs Reactive
Interactive Reactive
Slide 9
Slide 9 text
Dans la programmation interactive, on expose les
modules de notre application « into the wild »
Slide 10
Slide 10 text
Reactive programming
avec RxJS
Slide 11
Slide 11 text
RxJS
• Observable
• Operators
• Scheduler
Slide 12
Slide 12 text
Observable
« Pushed Based Collection »
Slide 13
Slide 13 text
« The idea of futures
value — Maybe »
Paul Taylor @trxcllnt
Slide 14
Slide 14 text
Observable
SINGLE MULTIPLE
PULL Value Array
PUSH Promise Observable
Slide 15
Slide 15 text
Observable
Une « Promise » qui « push » de multiples values
Slide 16
Slide 16 text
« Observable is a function that,
when invoked, returns 0 - ∞ values
between now and the end of times »
Paul Taylor @trxcllnt
Slide 17
Slide 17 text
Operators
Transforme notre
« Push based collection »
Slide 18
Slide 18 text
Operators
Transforme notre « push based collection »
comme on transforme un array
Slide 19
Slide 19 text
Operators
Slide 20
Slide 20 text
« A scheduler controls when a
subscription starts and when
notifications are published »
RxJS Doc
Schedulers
Slide 21
Slide 21 text
Schedulers
Contrôle quand les valeurs sont « pushed »
Slide 22
Slide 22 text
Tout peut devenir un Observable !
Dom events Http request
Slide 23
Slide 23 text
Back to React
Slide 24
Slide 24 text
Events management
avec React
Slide 25
Slide 25 text
A simple React component :
What’s happening ?
User click on the button
`onButtonClick` handler
State update
Re-rendering
Slide 26
Slide 26 text
Angular version
User click on the button
`onButtonClick` handler
State update
Re-rendering
What’s happening ?
Slide 27
Slide 27 text
Backbone version :
User click on the button
`onButtonClick` handler
State update
Re-rendering
What’s happening ?
Slide 28
Slide 28 text
It’s all the same
Slide 29
Slide 29 text
C’est parce que c’est
simple !
Slide 30
Slide 30 text
A naive drag implementation
Slide 31
Slide 31 text
Vraiment ?
Slide 32
Slide 32 text
Problèmes…
• Logique fragmentée
• Des états intermédiaires de partout
• La Relation entre l’état du composant et
les « user inputs » n’est pas explicite.
Slide 33
Slide 33 text
RxJS + React = <3
Slide 34
Slide 34 text
Drag with RxJS
State
Slide 35
Slide 35 text
• Cohérent: Toute la logique au même endroit
• Les états intermédiaires deviennent
implicites
• On exprime de manière claire la relation
entre l’état du composant et les « user
inputs »
Avantages
Slide 36
Slide 36 text
React + RxJS à la mano
Slide 37
Slide 37 text
Ca marche, mais c’est un peu
verbeux …
Slide 38
Slide 38 text
rx-react
A collection of helpers for
working with React and RxJS
Slide 39
Slide 39 text
rx-react:
• « FuncSubject »: Callable subject
• « StateStreamMixin »: Bind l’état d’un component au
valeur « pushed » par un Observable
• And more …
Slide 40
Slide 40 text
« FuncSubject »: Callable Subject
• Un Sujet et une Fonction
• Invoquer la function == invoquer la
méthode « onNext »
• Utilisé comme Event handler,
méthode de lifecycle, référence…
Slide 41
Slide 41 text
« StateStreamMixin »
Bind l’état d’un composant
à un observable
• Quand le composant est « monté » la
méthode `getStateStream`est appelée
• Chaque fois que l’observable push une
valeur l’état est mis à jour
• La Subscription est automatiquement
nettoyée quand le composant est
« unmounted »
Slide 42
Slide 42 text
rx-react with ES6 class
• RxReact.Component implemente le
`StateStreamMixin` (entre autre …)
• Malheureusement basé sur
l’héritage :/
Slide 43
Slide 43 text
react-rx-component
by Andrew Clark @acdlite
« Create smart components
using RxJS observables »
Slide 44
Slide 44 text
react-rx-component
• Un Higher order « smart »
component implémente la logique
• Un « dumb » component
transforme les props en virtual
dom
Slide 45
Slide 45 text
Let’s Flux
Slide 46
Slide 46 text
Classic flux store :
• Le dispatcher « push » des
actions dans le temps
• Les Stores agrégent les actions
et « push » les résultats
intermédiaires
• Ça vous dit quelque chose ?
Slide 47
Slide 47 text
Et si Flux n’était qu’une
association d’Observable ?
Slide 48
Slide 48 text
Flux store as observable
• le dispatcher est un
observable
• Une store n’est que le résultat
d’une opération « scan » sur le
dispatcher
• Lest composants peuvent
bind leurs états aux stores.