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
440
SSH Can
oursky
1
260
HTTP/2
oursky
0
300
watchOS2
oursky
0
250
Common QA issues
oursky
0
170
Complex is better than complicated
oursky
0
240
Clean code again
oursky
3
320
KiriKiri x O2 x NVLMarker
oursky
0
180
git_workflow.pdf
oursky
0
250
Other Decks in Programming
See All in Programming
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
マルチモジュールにおけるテスト最適化
fxwx23
0
210
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
110
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
170
Why Prism?
kddnewton
4
1.7k
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
Kotlin 2.0 and Beyond
antonarhipov
2
150
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
560
はじめてみよう量子プログラミング
itokoichi01
0
160
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
270
Featured
See All Featured
Done Done
chrislema
180
16k
Building Adaptive Systems
keathley
36
2.1k
Designing for humans not robots
tammielis
248
25k
For a Future-Friendly Web
brad_frost
174
9.3k
Design by the Numbers
sachag
277
19k
Making Projects Easy
brettharned
113
5.8k
Writing Fast Ruby
sferik
623
60k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
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