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
500
Going Reactive with React
fdecampredon
November 04, 2015
Tweet
Share
More Decks by fdecampredon
See All by fdecampredon
Introduction à GraphQL
fdecampredon
0
930
Reactive Programming et React
fdecampredon
3
140
Introduction à ReactJS
fdecampredon
0
53
Other Decks in Technology
See All in Technology
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
2
270
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
330
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
170
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
270
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
850
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
2
180
20241220_S3 tablesの使い方を検証してみた
handy
4
610
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
560
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
400
サーバレスアプリ開発者向けアップデートをキャッチアップしてきた #AWSreInvent #regrowth_fuk
drumnistnakano
0
200
10分で学ぶKubernetesコンテナセキュリティ/10min-k8s-container-sec
mochizuki875
3
350
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Agile that works and the tools we love
rasmusluckow
328
21k
Speed Design
sergeychernyshev
25
670
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Being A Developer After 40
akosma
87
590k
Building an army of robots
kneath
302
44k
Typedesign – Prime Four
hannesfritz
40
2.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Making Projects Easy
brettharned
116
5.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Building Adaptive Systems
keathley
38
2.3k
GitHub's CSS Performance
jonrohan
1030
460k
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/