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
Going Reactive with React
Search
fdecampredon
November 04, 2015
Technology
1
440
Going Reactive with React
fdecampredon
November 04, 2015
Tweet
Share
More Decks by fdecampredon
See All by fdecampredon
Introduction à GraphQL
fdecampredon
0
820
Reactive Programming et React
fdecampredon
3
130
Introduction à ReactJS
fdecampredon
0
47
Other Decks in Technology
See All in Technology
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
650
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
100
データベース02: データベースの概念
trycycle
0
160
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
380
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
220
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
120
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
14k
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
230
require(ESM)とECMAScript仕様
uhyo
3
640
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.4k
Featured
See All Featured
Code Review Best Practice
trishagee
55
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
YesSQL, Process and Tooling at Scale
rocio
164
13k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
A better future with KSS
kneath
231
16k
Rails Girls Zürich Keynote
gr2m
91
13k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
How to train your dragon (web standard)
notwaldorf
73
5.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Transcript
Going Reactive with React @fdecampredon Full-stack developper at Fadio IT
(http://www.fadio.it) Reactive2015 conference, November 4th 2015
1. React Changes Everything 2. What about Event Management ?
3. Event management with RxJS 4. React + RxJS 5. Other fields of Application Plan
React Changes Everything
Template => JSX
MVC => FLUX
REST => GraphQL
CSS => Inline Styles
And much more !
But what about Event Management ?
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 ?
Event management has not changed so much with React
Is it fine ?
A naive drag implementation
Problems… • Fragmented logic • Intermediate state hell • Relationship
between user input and Component state is not clearly established
Can we do better ?
RxJS to the rescue !
RxJS: Reactive Extensions for JavaScript • Observable: Push based Collection
• Operators: Array like operators (map, filter, flatMap, etc …) • Scheduler: Controls when a subscription starts and when notifications are published.
Counter component with RxJS State
Drag with RxJS State
• Coherence: all the logic at the same place •
Implicit intermediate state • Express the relationship between state and user input in a declarative way Advantages
React + RxJS: How to
Manually
Fine but a little verbose
rx-react : A collection of helpers for working with React
and RxJS
rx-react: • « FuncSubject »: Callable subject • « StateStreamMixin
»: Bind component state to an observable • And more …
« FuncSubject »: Callable Subject • Subjects that can be
used as callback • Calling the function is the same as calling `onNext` • Designed to be event handler or lifecycle method.
« StateStreamMixin » Bind the State of a component to
an observable • On mount the `getStateStream` method is called • Component state is bound to the returned observable • Subscription is automatically disposed on unmounting
rx-react with ES6 class • RxReact.Component implements the `StateStreamMixin` •
Need to find a better pattern to avoid inheritance
react-rx-component by @aciditte « Create smart components using RxJS observables
»
react-rx-component • Higher order « smart » component implement the
logic • « dumb » component merely return elements for given props
Other fields of application
Pre-computation of events
Pre-computation of events • Simple slider component • Designed to
be a « controlled » component • We implement the « onChange » Event without any state
Flux
Classic flux store : • Dispatcher « push » actions
over time • Store aggregate actions and « push » intermediate results • Does it reminds you something ?
Flux store as observable • Dispatcher is an observable •
A store is just the result of the « scan » operator applied Dispatcher • Component can just bind their state to the Store observable
Animations
Animation • Define the `stream` of state that will control
the animation • A bit similar to Flash « timeline » • Easing function by Paul Taylor: https://github.com/trxcllnt/rxjs-easing
• React changes Everything • But not Event Management •
We can do better ! • RxJS + React: perfect match Summary
François de Campredon - Fadio IT @fdecampredon https://github.com/fdecampredon/ Questions ?
rx-react: https://github.com/fdecampredon/rx-react/ react-rx-component: https://github.com/acdlite/react-rx-component/