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
290
HTTP/2
oursky
0
320
watchOS2
oursky
0
310
Common QA issues
oursky
0
190
Complex is better than complicated
oursky
0
270
Clean code again
oursky
3
350
KiriKiri x O2 x NVLMarker
oursky
0
220
git_workflow.pdf
oursky
0
270
Other Decks in Programming
See All in Programming
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
910
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.2k
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
310
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
240
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
330
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
XSLTで作るBrainfuck処理系
makki_d
0
210
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
GoのGenericsによるslice操作との付き合い方
syumai
3
680
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
310
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
GitHub's CSS Performance
jonrohan
1031
460k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Faster Mobile Websites
deanohume
307
31k
Producing Creativity
orderedlist
PRO
346
40k
Documentation Writing (for coders)
carmenintech
71
4.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Speed Design
sergeychernyshev
32
1k
Gamification - CAS2011
davidbonilla
81
5.3k
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