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
380
Flux + React
Oursky Limited
June 23, 2015
Tweet
Share
More Decks by Oursky Limited
See All by Oursky Limited
UI Automation
oursky
1
490
SSH Can
oursky
1
310
HTTP/2
oursky
0
340
watchOS2
oursky
0
320
Common QA issues
oursky
0
200
Complex is better than complicated
oursky
0
280
Clean code again
oursky
3
360
KiriKiri x O2 x NVLMarker
oursky
0
230
git_workflow.pdf
oursky
0
290
Other Decks in Programming
See All in Programming
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3k
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
940
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
860
CSC305 Lecture 01
javiergs
PRO
1
400
Le côté obscur des IA génératives
pascallemerrer
0
120
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
CSC509 Lecture 05
javiergs
PRO
0
290
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Facilitating Awesome Meetings
lara
56
6.6k
For a Future-Friendly Web
brad_frost
180
9.9k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Building an army of robots
kneath
306
46k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Site-Speed That Sticks
csswizardry
11
880
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