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
530
Going Reactive with React
fdecampredon
November 04, 2015
Tweet
Share
More Decks by fdecampredon
See All by fdecampredon
Introduction à GraphQL
fdecampredon
0
1k
Reactive Programming et React
fdecampredon
3
160
Introduction à ReactJS
fdecampredon
0
57
Other Decks in Technology
See All in Technology
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
2k
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
200
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
200
三視点LLMによる複数観点レビュー
mhlyc
0
230
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
190
ClaudeCodeにキレない技術
gtnao
1
860
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
660
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The Invisible Side of Design
smashingmag
301
51k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing for Performance
lara
610
69k
KATA
mclloyd
30
14k
Building Applications with DynamoDB
mza
95
6.5k
Making Projects Easy
brettharned
116
6.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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/