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

MVC Diagram

Source http://fluxxor.com/what-is-flux.html

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

FLUX Diagram

Source http://fluxxor.com/what-is-flux.html

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 - Diagram

Source http://fluxxor.com/what-is-flux.html

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