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
Developer Joy - The New Paradigm
hollycummins
1
370
Leading Effective Engineering Teams in the AI Era
addyosmani
7
610
オンデバイスAIとXcode
ryodeveloper
0
130
Pythonに漸進的に型をつける
nealle
1
120
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.5k
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
390
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
650
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.5k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Mobile First: as difficult as doing things right
swwweet
225
10k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Become a Pro
speakerdeck
PRO
29
5.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
The Invisible Side of Design
smashingmag
302
51k
How to Ace a Technical Interview
jacobian
280
24k
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