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
820
Going Reactive with React
fdecampredon
1
430
Introduction à ReactJS
fdecampredon
0
47
Other Decks in Technology
See All in Technology
"好き"との生活/Regularly update profile with GitHub Actions
judeeeee
0
150
オーナーシップを持つ領域を明確にする
konifar
11
2.6k
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
200
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
The CloudCompare project by Dr. Daniel Girardeau-Montaut
kentaitakura
0
510
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
340
転移学習とドメイン適応の基礎
kmatsui
2
570
テストプロセスで大事にしていること #jasstnano
makky_tyuyan
0
130
Hands-on / Kaname Frusawa / Cloud Compare Users Meetup 2024 at University of Tokyo on April 17
paraworld
2
470
アプリがつくるNOT A HOTELブランド
hokuts
1
450
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
240
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
Featured
See All Featured
Clear Off the Table
cherdarchuk
83
310k
A Philosophy of Restraint
colly
196
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.5k
Rails Girls Zürich Keynote
gr2m
91
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Producing Creativity
orderedlist
PRO
336
39k
Making Projects Easy
brettharned
108
5.5k
GitHub's CSS Performance
jonrohan
1023
450k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Design by the Numbers
sachag
274
18k
Being A Developer After 40
akosma
56
580k
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