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
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
390
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
Patched fetch did not work
quramy
4
380
Developer Joy == Developer Productivity (really!)
hollycummins
1
220
Swiftコードバトル必勝法
toshi0383
0
170
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
660
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
はじめてみよう量子プログラミング
itokoichi01
0
210
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
210
2024 컴포즈 정원사
jisungbin
0
150
Featured
See All Featured
Become a Pro
speakerdeck
PRO
22
4.9k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
GraphQLとの向き合い方2022年版
quramy
43
13k
Facilitating Awesome Meetings
lara
49
5.9k
Designing the Hi-DPI Web
ddemaree
278
34k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
The Invisible Side of Design
smashingmag
296
50k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Scaling GitHub
holman
458
140k
How to train your dragon (web standard)
notwaldorf
85
5.6k
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