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
160
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
1k
Going Reactive with React
fdecampredon
1
530
Introduction à ReactJS
fdecampredon
0
57
Other Decks in Technology
See All in Technology
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
microCMSではじめるAIライティング
himaratsu
0
120
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
210
ゼロからはじめる採用広報
yutadayo
3
1k
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
2
880
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
300
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
1.1k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
140
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
150
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
1.4k
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
640
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Rails Girls Zürich Keynote
gr2m
95
14k
Embracing the Ebb and Flow
colly
86
4.7k
Building Adaptive Systems
keathley
43
2.7k
Designing Experiences People Love
moore
142
24k
Navigating Team Friction
lara
187
15k
Building an army of robots
kneath
306
45k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Code Review Best Practice
trishagee
69
19k
A Modern Web Designer's Workflow
chriscoyier
695
190k
RailsConf 2023
tenderlove
30
1.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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