Comparing MVC and FLUX. Is it worth to use Flux everywhere?

1. FLUX

2. What’s FLUX?
• application architecture for building user interface
• created by Facebook
• very useful for React.js as it uses immutable data
structures

3. But first… MVC recap

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

5. TodoMVC as an
example app

6. MVC - Step by step

7. MVC - Step by step

8. MVC - Step by step

9. 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

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

11. MVC Diagram once again
Source http://fluxxor.com/what-is-flux.html

12. FLUX - Step by step

13. FLUX - Step by step

14. FLUX - Step by step

15. FLUX - Step by step

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

17. FLUX - more scalable
Source http://fluxxor.com/what-is-flux.html

18. 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

19. 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)

20. FLUX - Antipatterns?
• Store as a singleton?
• AppDispatcher as a singleton?
• View has an AppDispatcher as a dependency?
• View has Store as a dependency?

21. FLUX - is not an antipattern
• FLUX is just an architecture
• Singletons could be easly removed by introducing
additional layers

22. FLUX - Frameworks
• Fluxxor - http://fluxxor.com/
• Delorean - http://deloreanjs.com/
• Dispatcher - https://github.com/facebook/flux
• and many more… created each day…

23. Is it worth to use?

24. YES!
Or at least some parts of it…

25. Worth to use
• Dispatcher
• Extensibility
• Unambiguous events
• Actions