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
370
Flux + React
Oursky Limited
June 23, 2015
Tweet
Share
More Decks by Oursky Limited
See All by Oursky Limited
UI Automation
oursky
1
480
SSH Can
oursky
1
300
HTTP/2
oursky
0
330
watchOS2
oursky
0
310
Common QA issues
oursky
0
190
Complex is better than complicated
oursky
0
270
Clean code again
oursky
3
360
KiriKiri x O2 x NVLMarker
oursky
0
220
git_workflow.pdf
oursky
0
280
Other Decks in Programming
See All in Programming
型で語るカタ
irof
0
590
技術同人誌をMCP Serverにしてみた
74th
1
680
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.3k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
290
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
12k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
310
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
750
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
5
710
フロントエンドのパフォーマンスチューニング
koukimiura
5
1.9k
効率的な開発手段として VRTを活用する
ishkawa
0
160
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Adopting Sorbet at Scale
ufuk
77
9.5k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
A designer walks into a library…
pauljervisheath
207
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Typedesign – Prime Four
hannesfritz
42
2.7k
Automating Front-end Workflow
addyosmani
1370
200k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Writing Fast Ruby
sferik
628
62k
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