Flux
-
Upload
lukasz-kuzynski -
Category
Engineering
-
view
244 -
download
3
Transcript of Flux
FLUX
What’s FLUX?
• application architecture for building user interface
• created by Facebook
• very useful for React.js as it uses immutable data structures
But first… MVC recap
TodoMVC as an example app
MVC - Step by step
MVC - Step by step
MVC - Step by step
MVC in React.js
• React.js doesn’t need very granular „change:*” events since it rerenders the whole app
• It’s better to prepare all the data and then notify the view layer
• React.js prefers immutable data for the best performance
MVC Diagram once again
Source http://fluxxor.com/what-is-flux.html
FLUX - Step by step
FLUX - Step by step
FLUX - Step by step
FLUX - Step by step
FLUX - more scalable
Source http://fluxxor.com/what-is-flux.html
MVC - „is not so scalable”*
Image source http://fluxxor.com/what-is-flux.html * According to http://www.infoq.com/news/2014/05/facebook-mvc-flux
FLUX - additional concepts
• No cascading actions - AppDispatcher forbids to call 2 actions at the same time (!!!)
• It’s possible to define the order of Store handlers
• Might be hard - depends on implementation
• Application is extensible out of the box (AppDispatcher)
FLUX - Antipatterns?
• Store as a singleton?
• AppDispatcher as a singleton?
• View has an AppDispatcher as a dependency?
• View has Store as a dependency?
FLUX - is not an antipattern
• FLUX is just an architecture
• Singletons could be easly removed by introducing additional layers
FLUX - Frameworks
• Fluxxor - http://fluxxor.com/
• Delorean - http://deloreanjs.com/
• Dispatcher - https://github.com/facebook/flux
• and many more… created each day…
Is it worth to use?
YES!Or at least some parts of it…
Worth to use
• Dispatcher
• Extensibility
• Unambiguous events
• Actions