flux
TRANSCRIPT
![Page 1: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/1.jpg)
Flux…a Pattern
![Page 2: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/2.jpg)
Prologue
![Page 3: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/3.jpg)
“Sometimes you gotta go back to actually move forward.”
-Matthew McConaughey
![Page 4: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/4.jpg)
A long time ago in a PARC far, far away….
![Page 5: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/5.jpg)
SMALLTALK-80
![Page 6: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/6.jpg)
History
![Page 7: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/7.jpg)
![Page 8: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/8.jpg)
![Page 9: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/9.jpg)
![Page 10: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/10.jpg)
![Page 11: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/11.jpg)
Fast Forward
![Page 12: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/12.jpg)
Rails
![Page 13: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/13.jpg)
Cocoa
![Page 14: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/14.jpg)
Client-side MV* JavaScript Frameworks
![Page 15: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/15.jpg)
The Good Parts
![Page 16: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/16.jpg)
Familiarity
![Page 17: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/17.jpg)
They Makes (Some) Things Simple
![Page 18: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/18.jpg)
Dynamic User Experience
![Page 19: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/19.jpg)
The Not So Good Parts
![Page 20: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/20.jpg)
Lack of Consensus
![Page 21: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/21.jpg)
![Page 22: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/22.jpg)
![Page 23: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/23.jpg)
Much Fowler
So Insightwow
Very Martin
how enterprise
![Page 24: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/24.jpg)
![Page 25: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/25.jpg)
Complex Models
![Page 26: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/26.jpg)
![Page 27: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/27.jpg)
Data Binding Solutions
![Page 28: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/28.jpg)
![Page 29: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/29.jpg)
Framework Support
![Page 30: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/30.jpg)
Compatibility
![Page 31: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/31.jpg)
Templating
![Page 32: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/32.jpg)
Enough Complaining…
![Page 33: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/33.jpg)
What the Flux?
Unidirectional Data Flow
Conceptual Integrity“a system must have a powerful metaphor that is uniformly applied throughout a system“ – Alan
Kay
Move Fast With Stable Infrastructure
Reliability
![Page 34: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/34.jpg)
The Pieces
![Page 35: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/35.jpg)
Views
React Components
Maintain UI State
Respond to changes in Stores
Render data, respond to interaction
Controller-Views
![Page 36: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/36.jpg)
Stores
Maintain Application State
Each Store manages a particular domain within the app
Similar to Models, but manage many objects
Emit change events
![Page 37: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/37.jpg)
Actions
Can be anything that changes the state of your data
User generated events
Server events
Real time updates
Error Handling
![Page 38: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/38.jpg)
Dispatcher
Key to unidirectional data flow
Central Hub/Callback Registry
Manages dependencies between StoreswaitFor(ids)
Keeps State in Stores, closer to the logic that updates that State
![Page 39: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/39.jpg)
The Pattern
![Page 40: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/40.jpg)
Dispatcher
Profile Controller-
ViewProfile Store
Notification Store
Chat Store
Prefs
Pic
Notification Controller-
View
ChatController-
View
Server New Message Action
Pic Changed Action
![Page 41: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/41.jpg)
Action Dispatcher ViewStore
Action
Server
![Page 42: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/42.jpg)
Code
![Page 43: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/43.jpg)
Other Implementations
McFly
Fluxxor
Reflux
![Page 44: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/44.jpg)
Resources
Bill Fisher
Flux GitHub
Chat Tutorial
Flux Overview (with Video)
![Page 45: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/45.jpg)
Presentation Resources
Model View Controller: History, Theory and Usage
MVC: Xerox PARC 1978-79
Model View Controller History
![Page 46: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/46.jpg)
Questions?
![Page 47: Flux](https://reader034.vdocuments.net/reader034/viewer/2022052602/55a2d4c51a28abdb278b478b/html5/thumbnails/47.jpg)
How do we convince people that in programming simplicity and clarity —in short: what mathematicians call "elegance"— are not a dispensable luxury, but a crucial matter that decides between success and failure?
Edsger Dijkstra