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
340
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
260
HTTP/2
oursky
0
290
watchOS2
oursky
0
240
Common QA issues
oursky
0
160
Complex is better than complicated
oursky
0
240
Clean code again
oursky
3
310
KiriKiri x O2 x NVLMarker
oursky
0
170
git_workflow.pdf
oursky
0
240
Other Decks in Programming
See All in Programming
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
Temporalを取り巻く仕様を整理する
sajikix
0
120
Advanced App Shrinking Techniques
cbeyls
2
150
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
データカタログ運用物語 〜令和6年夏の理想と現実〜
kuro_kurorrr
0
110
유연한 Composable 설계
l2hyunwoo
0
380
CSC307 Lecture 10
javiergs
PRO
0
310
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Building Adaptive Systems
keathley
34
2k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Web development in the modern age
philhawksworth
203
10k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Side Projects
sachag
451
42k
How STYLIGHT went responsive
nonsquared
93
5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
We Have a Design System, Now What?
morganepeng
46
7k
How to train your dragon (web standard)
notwaldorf
79
5.5k
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