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
490
Going Reactive with React
fdecampredon
November 04, 2015
Tweet
Share
More Decks by fdecampredon
See All by fdecampredon
Introduction à GraphQL
fdecampredon
0
920
Reactive Programming et React
fdecampredon
3
130
Introduction à ReactJS
fdecampredon
0
53
Other Decks in Technology
See All in Technology
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
複雑なState管理からの脱却
sansantech
PRO
1
150
AI前提のサービス運用ってなんだろう?
ryuichi1208
8
1.4k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
230
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
620
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
組織成長を加速させるオンボーディングの取り組み
sudoakiy
2
190
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
Featured
See All Featured
Music & Morning Musume
bryan
46
6.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Designing for Performance
lara
604
68k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
For a Future-Friendly Web
brad_frost
175
9.4k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Why Our Code Smells
bkeepers
PRO
334
57k
Teambox: Starting and Learning
jrom
133
8.8k
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/