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
350
Flux + React
Oursky Limited
June 23, 2015
Tweet
Share
More Decks by Oursky Limited
See All by Oursky Limited
UI Automation
oursky
1
450
SSH Can
oursky
1
280
HTTP/2
oursky
0
310
watchOS2
oursky
0
280
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
190
git_workflow.pdf
oursky
0
260
Other Decks in Programming
See All in Programming
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
9
2.4k
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
280
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
770
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
360
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点
eiganken
1
440
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
150
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
28
4.1k
Alba: Why, How and What's So Interesting
okuramasafumi
0
210
ATDDで素早く安定した デリバリを実現しよう!
tonnsama
1
1.9k
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
940
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
1.2k
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
930
Featured
See All Featured
Navigating Team Friction
lara
183
15k
Being A Developer After 40
akosma
89
590k
Making Projects Easy
brettharned
116
6k
For a Future-Friendly Web
brad_frost
176
9.5k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
How GitHub (no longer) Works
holman
312
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
Code Reviewing Like a Champion
maltzj
521
39k
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