From MVC to Flux (v3)

Explaining the motivation behind Facebook's Flux by
- outlining problems with MVC when scaling to larger apps
- describing how to restrict general MVC and how to arrive at Flux eventually
- share own impression/experience when working with Flux and give a short overview of common Flux libraries

Transcript

1. From MVC to Flux Special Malte Visit Google Presentation, 05. June 2015
 by Julian Viereck
2. Hi! Julian Viereck
 @jviereck • Open Source since 2009 • Studies CS @ ETHZ • Marathon Runner,
 Swimmer • 2013: Google Intern in Munich • Next: Facebook Internship
3. https://www.twitter.com/BenLesh/status/ 593096424016842752
4. “Flux, Flux, Flux: 
 Definitely a hot topic but I heard it is
 hard to get your head around it” - by a Zurich web developer
5. Flux Principle for building scaleable, 
 dynamic data,
 applications.
7. Flux: Solves fundamental software development issue.
8. Flux: Solves fundamental software development issue.
9. - Edsger Dijkstra “The art of programming is the art 
 of organizing complexity, […]
 and avoiding its bastard chaos 
 as effectively as possible.”
10. APP =
11. APP = “M” “V” “C”
12. APP = “M” “V” “C” Data Controller View
13. APP = “M” “V” “C” Data Controller View
14. APP = “M” “V” “C” Data Controller View ?
15. APP = What’s the problem? “M” “V” “C” Data Controller View
16. APP = What’s the problem? “M” “V” “C” Data Controller View
17. Data Controller View Data Controller View Data Controller View What’s the problem? “M” “V” “C” APP =
18. Data Controller View Data Controller View Data Controller View What’s the problem? APP = “M” “V” “C”
19. Data Controller View Data Controller View Data Controller View Spaghetti 
 App = What’s the problem? “M” “V” “C”
20. Data Controller View Data Controller View Data Controller View Spaghetti 
 App = ① Many different paths 
 What’s the problem? “M” “V” “C”
21. Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths 

22. Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths 

23. Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths 

24. Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths ② Cascading updates /
 Side effects
25. Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths ② Cascading updates /
 Side effects
26. Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths ② Cascading updates /
 Side effects
27. Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App App Complexity
28. Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App Large App App Complexity
29. Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App Large App App Complexity Manageable by
 Developer
30. http://animalia-life.com/ Scaling in Nature Not Scaleable Scaleable www.informatiquegifs.com/, Insects Mammals vs
31. http://animalia-life.com/ Scaling in Nature circulatory system veins and arteries Not Scaleable Scaleable www.informatiquegifs.com/, Insects Mammals vs
32. http://animalia-life.com/ Scaling in Nature circulatory system veins and arteries Not Scaleable Scaleable www.informatiquegifs.com/, Insects Mammals unrestricted restricted vs
33. What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App Large App App Complexity Manageable by
 Developer What’s the solution?
34. What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App Large App App Complexity Manageable by
 Developer Large App =
 3 x Small App What’s the solution?
35. What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App Large App App Complexity Manageable by
 Developer Large App =
 3 x Small App What’s the solution?
36. What’s the problem? ① Many different paths ② Cascading updates /
 Side effects Small App Large App App Complexity Manageable by
 Developer Large App =
 3 x Small App What’s the solution? How?
37. How to keep a city clean?
38. How to keep a city clean? By passing a law to disallow littering.
39. How to keep a city clean? By passing a law to disallow littering. Enforce the law. - and -
40. How to keep a city clean? By passing a law to disallow littering. Enforce the law. - and - NOTE: Better way - teach everyone benefits of not littering and life in a better world :)
41. Let’s talk about Flux.
42. Data Controller View Data Controller View Spaghetti 
 App
43. Data Controller View Data Controller View Spaghetti 
 App Flux App ?
44. Data Controller View Data Controller View Spaghetti 
 App FLUX RestrictionS ① Information flows in one direction ② Only Single Action at any point in time Flux App ?
45. Data Controller View Data Controller View Goal: ① Information flows in one direction
46. Data Controller View ? ? ? Goal:
47. Data Controller View Goal:
48. Data Controller View Data Controller View Goal:
49. Data Controller View Data Controller View ? Goal:
50. Data Controller View Data Controller View ? Goal:
51. Data Controller View Data Controller View Goal:
52. Data Controller View Data Controller View ? Goal:
53. Data Controller View Data Controller View Goal:
54. Data Controller View Data Controller View Goal: ?
55. Data Controller View Data Controller View Goal:
56. Data Controller View Data Controller View Goal: Finished: Information flows only in one direction.
57. Data Controller View Data Controller View Data Controller View Data Controller View
58. Data Controller View Data Controller View
59. Data Controller View Data Controller View ObservationS
60. Data Controller View Data Controller View ObservationS • Controller only controls the data
61. Data Controller View Data Controller View ObservationS • Controller only controls the data • Data only controls the views
62. Data Controller View Data Controller View ObservationS • Controller only controls the data • Data only controls the views 㱺 Introduce Stores = App State +
 Business Logic Controller + Data
63. Data Controller View Data Controller View ObservationS • Controller only controls the data • Data only controls the views 㱺 Introduce Stores = App State +
 Business Logic 㱺 Store Controller + Data
64. Data Controller View Data Controller View Data Controller View Data Controller View
65. Data Controller View Data Controller View Store View Store View Data Controller View Data Controller View
66. Store View Store View Data Controller View Data Controller View
67. Store View Store View Data Controller View Data Controller View App Flipper Game!
68. Store View Store View Data Controller View Data Controller View App Flipper Game!
69. Store View Store View Data Controller View Data Controller View App Flipper Game!
70. Store View Store View Data Controller View Data Controller View Open Issue: How to prevent cascading updates? App Flipper Game!
71. Store View Store View Data Controller View Data Controller View Open Issue: How to prevent cascading updates? Solution: Express updates explicit via Actions,
 add Gate Keeper App Flipper Game!
72. Store View Store View Solution: Express updates explicit via Actions,
 add Gate Keeper
73. Store View Store View Solution: Express updates explicit via Actions,
 add Gate Keeper Action Action
74. Store View Store View Dispatcher Solution: Express updates explicit via Actions,
 add Gate Keeper Action Action
75. Store View Store View Dispatcher Solution: Express updates explicit via Actions,
 add Gate Keeper ② Only Single Action at any point in time
 (asserted by Dispatcher Implementation) FLUX RestrictionS Action Action
76. Flux App RestrictionS ① Information flows in one direction ② Only Single Action at any point in time Store View Store View Action Dispatcher
77. Flux App RestrictionS ① Information flows in one direction ② Only Single Action at any point in time Store View Store View Action Dispatcher Server
78. Flux App RestrictionS ① Information flows in one direction ② Only Single Action at any point in time Store View Store View Action Dispatcher Server Action
79. Flux App RestrictionS ① Information flows in one direction ② Only Single Action at any point in time Store View Store View Action Dispatcher Q:
 Do you want
 to write tests
 for this? Server Action
80. Flux App Store View Store View Action Dispatcher Data Controller View Data Controller View Spaghetti 
 App
81. Let’s talk about Details.
82. Store View Store View Action Dispatcher View Dispatcher Store Store
83. Store View Store View Action Dispatcher View Dispatcher on
 Change Store Store
84. Store View Store View Action Dispatcher View Dispatcher on
 Change .get() Store Store
85. Store View Store View Action Dispatcher View Dispatcher on
 Change .get() Store Store
86. Store View Store View Action Dispatcher View Dispatcher onInteraction on
 Change .get() Store Store
87. Store View Store View Action Dispatcher View Action
 Creator Dispatcher onInteraction on
 Change .get() Store Store
88. .get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store
89. .get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store Performs
 XHR request
90. .get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store Action { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } Performs
 XHR request
91. .get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store Action { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } Performs
 XHR request
92. .get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } Performs
 XHR request
93. .get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } Performs
 XHR request
94. .get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } Performs
 XHR request
95. .get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } Performs
 XHR request XHR response
96. .get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } { type: “FILE_REQ_SUCCESS”, payload: { fileName: “foo.js”,
 content: “I <3 MJS!” } } Performs
 XHR request XHR response
97. .get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } { type: “FILE_REQ_SUCCESS”, payload: { fileName: “foo.js”,
 content: “I <3 MJS!” } } Performs
 XHR request XHR response
98. .get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } { type: “FILE_REQ_SUCCESS”, payload: { fileName: “foo.js”,
 content: “I <3 MJS!” } } Performs
 XHR request XHR response
99. .get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } { type: “FILE_REQ_SUCCESS”, payload: { fileName: “foo.js”,
 content: “I <3 MJS!” } } Performs
 XHR request XHR response
100. .get() Store View Store View Action Dispatcher Store View Action
 Creator Dispatcher onInteraction on
 Change Store { type: “FILE_REQ_BEGIN”, payload: { fileName: “foo.js” } } { type: “FILE_REQ_SUCCESS”, payload: { fileName: “foo.js”,
 content: “I <3 MJS!” } } No Promises in actions! Performs
 XHR request XHR response
101. Restrictions 㱺 Modular apps enforced naturally
 㱺 Avoid common error sources Practical Rules ③ Stores are updated only via Actions ④ Views refresh on Store’s changeEvent ⑤ Views query data via Store’s getter functions FLUX RestrictionS ① Information flows in one direction ② Only Single Action at any point in time
102. FileTree Example
103. FileTree Example https://github.com/jviereck/flux_file_tree_example/
104. FileTree Example https://github.com/jviereck/flux_file_tree_example/
105. FileTree Example https://github.com/jviereck/flux_file_tree_example/ :onToggle createListDir
 Action(“/scripts”)
106. FileTree Example https://github.com/jviereck/flux_file_tree_example/ :onToggle createListDir
 Action(“/scripts”)
107. FileTree Example https://github.com/jviereck/flux_file_tree_example/ :onToggle Dispatcher createListDir
 Action(“/scripts”)
108. FileTree Example https://github.com/jviereck/flux_file_tree_example/ :onToggle Dispatcher createListDir
 Action(“/scripts”) FSStore
109. FileTree Example https://github.com/jviereck/flux_file_tree_example/ :onToggle Dispatcher createListDir
 Action(“/scripts”) FSStore
110. FileTree Example https://github.com/jviereck/flux_file_tree_example/ :onToggle Dispatcher createListDir
 Action(“/scripts”) FSStore
111. React Container-Component <FileTreeControler> </FileTreeControler> <FileTreeEntry name=“foo” path=“…” isExpanded=true isFolder=true /> FS-Store FT-Store Dispatcher Action https://medium.com/@learnreact/container- components-c0e67432e005 :onToggle
113. Store View Store View Action Dispatcher Record
114. Store View Store View Action Dispatcher Record Replay
115. Single Action Show Stopper
116. Single Action Show Stopper Only Single Action at the time:
117. Single Action Show Stopper Only Single Action at the time: • Prevent may common coding patterns
118. Single Action Show Stopper Only Single Action at the time: • Prevent may common coding patterns • Solution not always obvious
119. Single Action Show Stopper Only Single Action at the time: • Prevent may common coding patterns • Solution not always obvious BUT: Flux was always right in my experience! Take it as a sign that you try
 to build a part in your app
 that is not modular!
120. Single Action Show Stopper Only Single Action at the time: • Prevent may common coding patterns • Solution not always obvious BUT: Flux was always right in my experience! Helpful question to ask:
 “If I add this, is it still easy to write contained tests?”
 “Create smaller actions and dispatch them sequential?” Take it as a sign that you try
 to build a part in your app
 that is not modular!
121. Single Action Show Stopper View Action
 Creator A :onExpand
122. Single Action Show Stopper View Action
 Creator A Cascading Updates! View Action
 Creator B :onExpand :onInitialRender
123. Single Action Show Stopper View Action
 Creator A Cascading Updates! Fix View Action
 Creator B :onExpand :onInitialRender
124. Single Action Show Stopper View Action
 Creator A Cascading Updates! Fix View Action
 Creator B View Action
 Creator A :onExpand :onInitialRender :onExpand
125. Single Action Show Stopper View Action
 Creator A Cascading Updates! Fix View Action
 Creator B View Action
 Creator A Action
 Creator B :onExpand :onInitialRender :onExpand
126. $ npm install flux Store View Store View Action Dispatcher Q: What do you get?
127. $ npm install flux Store View Store View Action Dispatcher Q: What do you get?
128. Flux Implementations • FB Flux: https://facebook.github.io/flux/ • Fluxxor: http://fluxxor.com/ • Reflux: https://github.com/spoike/refluxjs • Fluxible: http://fluxible.io/ • Flummox: https://github.com/acdlite/flummox Isomorphic: Work on server as well
129. Flux Implementations https://github.com/gaearon/redux
130. Redux https://github.com/gaearon/redux
131. Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design
132. Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design • Goal: Keep it
133. Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design • Goal: Keep it • simple
134. Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design • Goal: Keep it • simple • modular / separated
135. Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design • Goal: Keep it • simple • modular / separated (e.g. stores are stateless!!!)
136. Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design • Goal: Keep it • simple • modular / separated • functional (e.g. stores are stateless!!!)
137. Redux https://github.com/gaearon/redux • Think about it as lambda calculus for app design • Goal: Keep it • simple • modular / separated • functional • Result: “WTF” 㱺 “MAGIC” 㱺 “TESTABLE!!!” (e.g. stores are stateless!!!)
138. Flux Implementations https://twitter.com/dan_abramov/status/ 606778393212952578
139. (store, actions) -> (components) View Dependency
 Injection FTW
140. View Action
 Creator Dispatcher onInteraction on
 Change .get() Store Store (store, actions) -> (components) View Dependency
 Injection FTW
141. View Action
 Creator Dispatcher onInteraction on
 Change .get() Store Store (state, action) -> (state’) Store (store, actions) -> (components) View Dependency
 Injection FTW
142. View Action
 Creator Dispatcher onInteraction on
 Change .get() Store Store (state, action) -> (state’) Store (store, actions) -> (components) View Dependency
 Injection FTW Where is store state?
143. View Action
 Creator Dispatcher onInteraction on
 Change .get() Store Store (state, action) -> (state’) Store (store, actions) -> (components) View Dependency
 Injection FTW → All in dispatcher! → Hot reloading Where is store state?
144. View Action
 Creator Dispatcher onInteraction on
 Change .get() Store Store (state, action) -> (state’) Store (store, actions) -> (components) View () -> Action 
 () -> (dsptch -> Action)
 () -> ((dsptch, state) -> Action) ActionCreator Dependency
 Injection FTW → All in dispatcher! → Hot reloading Where is store state?
145. Testability <3 Injection https://twitter.com/dan_abramov/status/606778111812845569
146. The following examples are taken 
 from the Readme.md file at: 
 https://github.com/gaearon/redux
151. Handling Derived Data • Idea: • Stores have normalised data • Use a special store to get derived data • Stores consuming actions should NOT work on derived data directly
152. Derived Data https://gist.github.com/gaearon/d77ca812015c0356654f
153. [Reading Recommendation] http://blog.confluent.io/2015/03/04/turning-the-database-inside-out-with-apache-samza/ More about derived data
154. Closing up
155. Flux + X Your App Vanilla JS React.JS Fluxxor Backbone } Flexible / adjustable concept Easy to extend existing code Angular.JS FB Flux Reflux Fluxible Flummox … …
156. What Flux Feels To Me • App structure falls into place naturally • Bundle Data + Controller = Store feels good • Enforcing independent stores useful • Actions encode higher semantic level • Easier to think / reason about App • No interleaving actions / synchronous code • Easier to test Store Store
157. Summary 1. Flux is not an implementation - it’s a philosophy • Data flows one direction • One action at the time 2. Your App: “Flux + X” • Combine with other library • Easy to restructure existing app 3. Flux gives useful guidance - you still can go off-road
158. Julian Viereck
 @jviereck
 +JulianViereck Thanks! Any questions?