From MVC to Flux

Creating large scale applications using an MVC approach leads often to non manageable applications. In this talk I first show why scaling an application and maintaining an application using MVC is challenging and then later show how Flux, a new application design principle from Facebook, solves these problems by introducing restrictions, that turn out to lead to a modular, scaleable application by default.

Transcript

1. From MVC to Flux MunichJS Meetup, 13. May 2015
 by Julian Viereck
2. Hi! Julian Viereck
 @jviereck • Open Source since 2009 • Study CS @ ETHZ • Swimmer & 
 Marathon Runner • Summer: Facebook Intern
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. - Edsger Dijkstra “The art of programming is the art 
 of organizing complexity, […]
 and avoiding its bastard chaos 
 as effectively as possible.”
9. APP = What’s the problem? “M” “V” “C” Data Controller View ?
10. Data Controller View Data Controller View Data Controller View What’s the problem? “M” “V” “C” APP =
11. Data Controller View Data Controller View Data Controller View Spaghetti 
 App =
    Many different paths 
 What’s the problem? APP = “M” “V” “C”
12. Data Controller View Data Controller View Data Controller View “M” “V” “C” Spaghetti 
 App = What’s the problem?
    Many different paths 

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

14. 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
15. 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
16. 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
17. http://animalia-life.com/ Scaling in Nature circulatory system veins and arteries Not Scaleable Scaleable www.informatiquegifs.com/, Insects Mammals unrestricted restricted vs
18. 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?
19. 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 :)
20. Let’s talk about Flux.
21. 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 ?
22. Data Controller View Data Controller View Goal:
    Information flows in one direction
23. Data Controller View ? ? ? Goal:
24. Data Controller View Goal:
25. Data Controller View Data Controller View ? Goal:
26. Data Controller View Data Controller View ? Goal:
27. Data Controller View Data Controller View Goal: ?
28. Data Controller View Data Controller View Goal: Finished: Information flows only in one direction.
29. Data Controller View Data Controller View Data Controller View Data Controller View
30. 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
31. Data Controller View Data Controller View Store View Store View Data Controller View Data Controller View
32. 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!
33. 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
34. 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
35. Flux App Store View Store View Action Dispatcher Data Controller View Data Controller View Spaghetti 
 App
36. Let’s talk about Details.
37. Store View Store View Action Dispatcher View Action
 Creator Dispatcher onInteraction on
 Change .get() Store Store
38. .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” } } { type: “FILE_REQ_SUCCESS”, payload: { fileName: “foo.js”,
 content: “I <3 MJS!” } } No Promises in actions! Performs
 XHR request XHR response
39. 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
40. FileTree Example https://github.com/jviereck/flux_file_tree_example/ :onToggle Dispatcher createListDir
 Action(“/scripts”) FSStore
41. 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
43. Store View Store View Action Dispatcher Record Replay
44. 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!
45. 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
46. $ npm install flux Store View Store View Action Dispatcher Q: What do you get?
47. $ npm install flux Store View Store View Action Dispatcher Q: What do you get?
48. 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
49. 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 … …
50. 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
51. 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
52. Julian Viereck
 @jviereck
 +JulianViereck Thanks! Any questions?