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
260
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
250
Other Decks in Programming
See All in Programming
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.2k
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
Outline View in SwiftUI
1024jp
1
110
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
830
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
230
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
150
Realtime API 入門
riofujimon
0
110
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.6k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Fireside Chat
paigeccino
32
3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
GitHub's CSS Performance
jonrohan
1030
460k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
KATA
mclloyd
29
13k
A designer walks into a library…
pauljervisheath
202
24k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.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