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
480
SSH Can
oursky
1
300
HTTP/2
oursky
0
330
watchOS2
oursky
0
320
Common QA issues
oursky
0
190
Complex is better than complicated
oursky
0
280
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
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
AI Ramen Fight
yusukebe
0
120
一人でAIプロダクトを作るならAIにはもっと働いてもらいたい / I want AI to work harder
rkaga
3
310
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
220
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
750
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
370
QA x AIエコシステム段階構築作戦
osu
0
240
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
730
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
520
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Code Reviewing Like a Champion
maltzj
524
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Speed Design
sergeychernyshev
32
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Adopting Sorbet at Scale
ufuk
77
9.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Being A Developer After 40
akosma
90
590k
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