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
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
Catch Up: Go Style Guide Update
andpad
0
170
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
130
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
770
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
920
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
590
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
YesSQL, Process and Tooling at Scale
rocio
173
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Become a Pro
speakerdeck
PRO
29
5.5k
Producing Creativity
orderedlist
PRO
347
40k
Building an army of robots
kneath
306
46k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Cost Of JavaScript in 2023
addyosmani
53
9k
Embracing the Ebb and Flow
colly
88
4.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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