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
原則から考える保守しやすいComposable関数設計
moriatsushi
3
500
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
710
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
160
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
150
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
hideakiaoyagi
1
180
AI技術トレンド勉強会 #1MCPの基礎と実務での応用
nisei_k
1
240
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
490
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
150
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
380
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
9
2.2k
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
2
390
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
belongadmin
3
170
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
GitHub's CSS Performance
jonrohan
1031
460k
GraphQLとの向き合い方2022年版
quramy
46
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Facilitating Awesome Meetings
lara
54
6.4k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Why Our Code Smells
bkeepers
PRO
337
57k
Scaling GitHub
holman
459
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Building Applications with DynamoDB
mza
95
6.5k
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