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
270
HTTP/2
oursky
0
300
watchOS2
oursky
0
270
Common QA issues
oursky
0
170
Complex is better than complicated
oursky
0
250
Clean code again
oursky
3
330
KiriKiri x O2 x NVLMarker
oursky
0
180
git_workflow.pdf
oursky
0
260
Other Decks in Programming
See All in Programming
Macとオーディオ再生 2024/11/02
yusukeito
0
370
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
イベント駆動で成長して委員会
happymana
1
330
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
受け取る人から提供する人になるということ
little_rubyist
0
250
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.7k
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.5k
距離関数を極める! / SESSIONS 2024
gam0022
0
290
Featured
See All Featured
Speed Design
sergeychernyshev
25
620
Facilitating Awesome Meetings
lara
50
6.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Music & Morning Musume
bryan
46
6.2k
Side Projects
sachag
452
42k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Designing for humans not robots
tammielis
250
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
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