Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Flux + React
Oursky Limited
June 23, 2015
Programming
1
270
Flux + React
Oursky Limited
June 23, 2015
Tweet
Share
More Decks by Oursky Limited
See All by Oursky Limited
oursky
1
400
oursky
1
230
oursky
0
230
oursky
0
130
oursky
0
110
oursky
0
190
oursky
3
270
oursky
0
110
oursky
0
180
Other Decks in Programming
See All in Programming
matyo91
1
150
kulkarniankita09
0
270
sgeengineer
1
200
wafuwafu13
1
170
ganchan11
0
170
cc4966
1
110
samjulien
0
420
techharmony
0
180
dqneo
0
150
chimerast
0
350
rockname
1
330
devinjeon
2
880
Featured
See All Featured
addyosmani
495
110k
addyosmani
1346
200k
lemiorhan
628
47k
myddelton
109
11k
imathis
479
150k
kneath
220
15k
morganepeng
21
1.3k
brad_frost
157
6.5k
nonsquared
81
3.4k
holman
288
130k
sferik
613
55k
morganepeng
95
14k
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