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
300
HTTP/2
oursky
0
330
watchOS2
oursky
0
310
Common QA issues
oursky
0
190
Complex is better than complicated
oursky
0
270
Clean code again
oursky
3
360
KiriKiri x O2 x NVLMarker
oursky
0
220
git_workflow.pdf
oursky
0
280
Other Decks in Programming
See All in Programming
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
NPOでのDevinの活用
codeforeveryone
0
840
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
ふつうの技術スタックでアート作品を作ってみる
akira888
1
850
VS Code Update for GitHub Copilot
74th
2
650
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
Discover Metal 4
rei315
2
140
効率的な開発手段として VRTを活用する
ishkawa
0
140
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
150
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Typedesign – Prime Four
hannesfritz
42
2.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
Being A Developer After 40
akosma
90
590k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Balancing Empowerment & Direction
lara
1
430
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Designing for Performance
lara
610
69k
Unsuck your backbone
ammeep
671
58k
How to train your dragon (web standard)
notwaldorf
95
6.1k
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