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
910
Reactive Programming et React
fdecampredon
3
130
Introduction à ReactJS
fdecampredon
0
51
Other Decks in Technology
See All in Technology
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
610
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
APIテスト自動化の勘所
yokawasa
7
4.1k
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.5k
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
460
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
550
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
450
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
330
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.4k
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
300
Featured
See All Featured
A designer walks into a library…
pauljervisheath
202
24k
4 Signs Your Business is Dying
shpigford
180
21k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Unsuck your backbone
ammeep
668
57k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Code Review Best Practice
trishagee
64
17k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Faster Mobile Websites
deanohume
304
30k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
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/