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
320
Flux + React
Oursky Limited
June 23, 2015
Tweet
Share
More Decks by Oursky Limited
See All by Oursky Limited
UI Automation
oursky
1
430
SSH Can
oursky
1
250
HTTP/2
oursky
0
290
watchOS2
oursky
0
210
Common QA issues
oursky
0
150
Complex is better than complicated
oursky
0
230
Clean code again
oursky
3
300
KiriKiri x O2 x NVLMarker
oursky
0
160
git_workflow.pdf
oursky
0
230
Other Decks in Programming
See All in Programming
document.write再考
brn
5
2.5k
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
370
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
840
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
130
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
15
2.9k
Why 1 + 1 = 2 in Swift?
1plus4
1
240
LPIXEL×CADDi_kaerururu
kaerururu
3
300
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
1.4k
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
160
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
390
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Designing the Hi-DPI Web
ddemaree
275
33k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Happy Clients
brianwarren
91
6.3k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
BBQ
matthewcrist
78
8.7k
RailsConf 2023
tenderlove
0
510
Teambox: Starting and Learning
jrom
126
8.4k
Git: the NoSQL Database
bkeepers
PRO
421
63k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
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