Introduction to Flux

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. Introduction to Flux Zürich ReactJS Meetup, 1. April 2015
 by Julian Viereck
2. Hi! Julian Viereck
 @jviereck • Study CS @ ETHZ • Do Web stuff, not Web Dev • Open Source since 2009 • Train for Zurich Marathon • Summer: Facebook Intern
3. Flux Principle for building scaleable, dynamic data driven applications.
4. Part I: 
 What is Flux? Part II: Hands on example
5. “Flux, flux, flux: 
 Definitely a hot topic but I heard it is
 hard to get your head around it”
7. Flux: Solves fundamental issue in SW development.
8. - Edsger Dijkstra, 
 “The art of programming is the art 
 of organizing complexity, […]
 and avoiding its bastard chaos 
 as effectively as possible.”
9. APP = Data Controller View What’s the problem? Large App Small App How complicated? “M” “V” “C”
10. Data Controller View Small App Large App How complicated? Data Controller View Data Controller View Spaghetti 
 App = Q:
 Do you want
 to write tests
 for this? How to detect
 crossover? Manageable by Developer
11. HOW? Small App Large App How complicated? Manageable by Developer Data Controller View Data Controller View to write tests
 for this? Large App =
 3 x Small App
12. http://animalia-life.com/ Scaling in Nature circulatory system veins and arteries Not Scaleable Scaleable www.informatiquegifs.com/, Insects Mammals unrestricted restricted vs
13. Small App Large App How complicated? Manageable by Developer Data Controller View Data Controller View to write tests
 for this? Large App =
 3 x Small App Horizontal Scaling Vertical Scaling HOW? Max System
 Performance
14. 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 ?
15. Data Controller View Data Controller View Goal: ① Information flows in one direction
16. Data Controller View ? ? ? Goal:
17. Data Controller View Goal:
18. Data Controller View Data Controller View ? Goal:
19. Data Controller View Data Controller View ? Goal:
20. Data Controller View Data Controller View Goal: ?
21. Data Controller View Data Controller View Goal: Finished: Information flows only in one direction
22. Data Controller View Data Controller View Observation • Controller only controls the data • Data only controls the views 㱺 Introduce Stores = App State +
 Business Logic Controller + = Store Data
23. Store View Store View Data Controller View Data Controller View Open Issue: How to prevent cascading updates? Solution: Express updates explicit via Actions
24. Store View Store View Dispatcher Solution: Express updates explicit via Actions ② Only Single Action at any point in time
 (asserted by Dispatcher Implementation) FLUX RestrictionS Action Action
25. Flux App RestrictionS ① Information flows in one direction ② Only Single Action at any point in time Store View Store View Action Dispatcher Action Q:
 Do you want
 to write tests
 for this?
26. 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 Flux App Store View Store View Action Dispatcher Action
27. 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
28. “Problem” with Single Action 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!
29. 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
30. 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 … …
31. 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
32. 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
33. Summary 1. Flux is not an implementation - it’s a philosophy 1. Data flows one direction 2. One action at the time 2. Your App = “Flux + X” 1. Combine with other library 2. Easy to restructure existing app 3. Flux gives useful guidance - you still can go off-road
34. Hands On Example
35. Julian Viereck
 @jviereck
 +JulianViereck Thanks! Any questions?