Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Flux

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

Julian Viereck

April 01, 2015
Tweet

More Decks by Julian Viereck

Other Decks in Programming

Transcript

  1. Hi! Julian Viereck
 @jviereck • Study CS @ ETHZ •

    Do Web stuff, not Web Dev • Open Source since 2009 • Train for Zurich Marathon • Summer: Facebook Intern
  2. “Flux, flux, flux: 
 Definitely a hot topic but I

    heard it is
 hard to get your head around it”
  3. - Edsger Dijkstra, 
 “The art of programming is the

    art 
 of organizing complexity, […]
 and avoiding its bastard chaos 
 as effectively as possible.”
  4. APP = Data Controller View What’s the problem? Large App

    Small App How complicated? “M” “V” “C”
  5. 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
  6. 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
  7. http://animalia-life.com/ Scaling in Nature circulatory system veins and arteries Not

    Scaleable Scaleable www.informatiquegifs.com/, Insects Mammals unrestricted restricted vs
  8. 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
  9. 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 ?
  10. 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
  11. Store View Store View Data Controller View Data Controller View

    Open Issue: How to prevent cascading updates? Solution: Express updates explicit via Actions
  12. 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
  13. 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?
  14. 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
  15. 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
  16. “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!
  17. 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
  18. 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 … …
  19. 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
  20. 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
  21. 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