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
330
Flux + React
Oursky Limited
June 23, 2015
Tweet
Share
More Decks by Oursky Limited
See All by Oursky Limited
UI Automation
oursky
1
430
SSH Can
oursky
1
250
HTTP/2
oursky
0
290
watchOS2
oursky
0
220
Common QA issues
oursky
0
150
Complex is better than complicated
oursky
0
230
Clean code again
oursky
3
310
KiriKiri x O2 x NVLMarker
oursky
0
160
git_workflow.pdf
oursky
0
240
Other Decks in Programming
See All in Programming
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.4k
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
660
Snowflakeで眠ったデータを起こそう!
estie
0
130
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
try! Swift Tokyo 初参加報告LT
hinakko2
0
230
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.6k
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
1.1k
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
550
使ってみよう Azure AI Document Intelligence
kosmosebi
2
340
Featured
See All Featured
A Tale of Four Properties
chriscoyier
152
22k
Facilitating Awesome Meetings
lara
43
5.6k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
6.9k
4 Signs Your Business is Dying
shpigford
176
21k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Optimising Largest Contentful Paint
csswizardry
11
2.4k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Web development in the modern age
philhawksworth
203
10k
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