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
490
SSH Can
oursky
1
310
HTTP/2
oursky
0
340
watchOS2
oursky
0
320
Common QA issues
oursky
0
200
Complex is better than complicated
oursky
0
280
Clean code again
oursky
3
360
KiriKiri x O2 x NVLMarker
oursky
0
230
git_workflow.pdf
oursky
0
290
Other Decks in Programming
See All in Programming
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
640
AkarengaLT vol.38
hashimoto_kei
1
120
Cursorハンズオン実践!
eltociear
2
1.2k
NIKKEI Tech Talk#38
cipepser
0
190
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
チームの境界をブチ抜いていけ
tokai235
0
220
SODA - FACT BOOK(JP)
sodainc
1
8.7k
Pythonに漸進的に型をつける
nealle
1
120
理論と実務のギャップを超える
eycjur
0
180
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
280
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Bash Introduction
62gerente
615
210k
Docker and Python
trallard
46
3.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
The Language of Interfaces
destraynor
162
25k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
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