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
Flux + React
Search
Oursky Limited
June 23, 2015
Programming
1
370
Flux + React
Oursky Limited
June 23, 2015
Tweet
Share
More Decks by Oursky Limited
See All by Oursky Limited
UI Automation
oursky
1
480
SSH Can
oursky
1
300
HTTP/2
oursky
0
330
watchOS2
oursky
0
310
Common QA issues
oursky
0
190
Complex is better than complicated
oursky
0
270
Clean code again
oursky
3
360
KiriKiri x O2 x NVLMarker
oursky
0
220
git_workflow.pdf
oursky
0
280
Other Decks in Programming
See All in Programming
PipeCDのプラグイン化で目指すところ
warashi
1
300
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.5k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
Goで作る、開発・CI環境
sin392
0
260
Porting a visionOS App to Android XR
akkeylab
0
680
CDK引数設計道場100本ノック
badmintoncryer
2
480
Model Pollution
hschwentner
1
160
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
470
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
Deep Dive into ~/.claude/projects
hiragram
14
14k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Raft: Consensus for Rubyists
vanstee
140
7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
BBQ
matthewcrist
89
9.7k
4 Signs Your Business is Dying
shpigford
184
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Faster Mobile Websites
deanohume
308
31k
Six Lessons from altMBA
skipperchong
28
3.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Balancing Empowerment & Direction
lara
1
450
Transcript
Flux + React Rick Mak May 2015
One of the pain DOM
Direct DOM = painful = BUG
Age of Backbone Model View
Works Great in small scale
more Model; more View
It is SLOW
Let Optimise it
None
Say Hello to VirtualDOM
Model Virtual DOM DOM Interact with VirtualDOM Data Data Event
Event
setState will trigger render Define your view
React calculate the diff • Set state will mark the
red dot • React will find out the blue dots • Re-render with only the modified dom Source: https://facebook.github.io/react/img/blog/react-diff-tree.png
Fast without spaghetti
Let focus on Logic
State inconsistency Very common in single page webapp
State inconsistency • Server sync not sync with client state
• item missing • duplicate item • State between client not sync • State panic with poor internet
Flux fix that
It is a pattern A pattern enforcing unidirectional data flow
Flux is not framework
View Action Store Dispatcher Server
Unidirectional data flow • Faster debug • Faster on boarding
• Faster iteration • Less cascading effect
Thank you