Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactive Programming et React
Search
fdecampredon
February 18, 2016
Technology
3
130
Reactive Programming et React
http://www.meetup.com/fr-FR/ReactJS-Paris/
fdecampredon
February 18, 2016
Tweet
Share
More Decks by fdecampredon
See All by fdecampredon
Introduction à GraphQL
fdecampredon
0
910
Going Reactive with React
fdecampredon
1
490
Introduction à ReactJS
fdecampredon
0
51
Other Decks in Technology
See All in Technology
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
初心者に Vue.js を 教えるには
tsukuha
5
390
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
690
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
180
Forget efficiency – Become more productive without the stress
ufried
0
110
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
240
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
3.9k
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
560
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.7k
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
A designer walks into a library…
pauljervisheath
202
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Making Projects Easy
brettharned
115
5.9k
GraphQLとの向き合い方2022年版
quramy
43
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Embracing the Ebb and Flow
colly
84
4.4k
Transcript
Reactive Programming and React @fdecampredon ReactJS Paris - 18/02/2016
Qu’est-ce que la Reactive programming ?
Qu’est-ce que la Reactive programming ? Réactif ?
React !== Reactive Programming
Qu’est-ce que la Reactive programming ?
Un peu compliqué …
« 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
Interactive vs Reactive Interactive Reactive
Dans la programmation interactive, on expose les modules de notre
application « into the wild »
Reactive programming avec RxJS
RxJS • Observable • Operators • Scheduler
Observable « Pushed Based Collection »
« The idea of futures value — Maybe » Paul
Taylor @trxcllnt
Observable SINGLE MULTIPLE PULL Value Array<Value> PUSH Promise<Value> Observable<Value>
Observable Une « Promise » qui « push » de
multiples values
« Observable is a function that, when invoked, returns 0
- ∞ values between now and the end of times » Paul Taylor @trxcllnt
Operators Transforme notre « Push based collection »
Operators Transforme notre « push based collection » comme on
transforme un array
Operators
« A scheduler controls when a subscription starts and when
notifications are published » RxJS Doc Schedulers
Schedulers Contrôle quand les valeurs sont « pushed »
Tout peut devenir un Observable ! Dom events Http request
Back to React
Events management avec React
A simple React component : What’s happening ? User click
on the button `onButtonClick` handler State update Re-rendering
Angular version User click on the button `onButtonClick` handler State
update Re-rendering What’s happening ?
Backbone version : User click on the button `onButtonClick` handler
State update Re-rendering What’s happening ?
It’s all the same
C’est parce que c’est simple !
A naive drag implementation
Vraiment ?
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.
RxJS + React = <3
Drag with RxJS State
• 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
React + RxJS à la mano
Ca marche, mais c’est un peu verbeux …
rx-react A collection of helpers for working with React and
RxJS
rx-react: • « FuncSubject »: Callable subject • « StateStreamMixin
»: Bind l’état d’un component au valeur « pushed » par un Observable • And more …
« 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…
« 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 »
rx-react with ES6 class • RxReact.Component implemente le `StateStreamMixin` (entre
autre …) • Malheureusement basé sur l’héritage :/
react-rx-component by Andrew Clark @acdlite « Create smart components using
RxJS observables »
react-rx-component • Un Higher order « smart » component implémente
la logique • Un « dumb » component transforme les props en virtual dom
Let’s Flux
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 ?
Et si Flux n’était qu’une association d’Observable ?
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.
• React n’est pas …. Réactif :D • La «
Reactive programming » c’est simple ! (Ou presque) • RxJS + React = <3 Conclusion
François de Campredon @fdecampredon https://github.com/fdecampredon/ Questions ? rx-react: https://github.com/fdecampredon/rx-react/ react-rx-component:
https://github.com/acdlite/react-rx-component/ RxJS: https://github.com/Reactive-Extensions/RxJS