50 Shades of Flux

There are now more Flux implementations than MV* frameworks have ever existed.

But what is Flux? Could it be used without React.js? Why is it better than MV* approaches? What are its drawbacks and pitfalls? Should I move on together with Flux or just stay and wait with my lovely MV*-like architecture?

Transcript

1. 50 Shades of Flux Ilya Pukhalski
2. @pukhalski
3. — DHTML — AJAX — Rise of REST and JSON // 2005 — jQuery // 2006 — JavascriptMVC //2007 — Mass drop of IE6 support // 2009-2010 — Rise of SPAs // 2010 — knockout // 2010 — backbonejs // 2010 — AngularJS // 2010 — todomvc // 2012 — React // 2013 — Flux // 2014
4. — DHTML — AJAX — Rise of REST and JSON // 2005 — jQuery // 2006 — JavascriptMVC //2007 — Mass drop of IE6 support // 2009-2010 — Rise of SPAs // 2010 — knockout // 2010 — backbonejs // 2010 — AngularJS // 2010 — todomvc // 2012 — React // 2013 — Flux // 2014
5. — DHTML — AJAX — Rise of REST and JSON // 2005 — jQuery // 2006 — JavascriptMVC //2007 — Mass drop of IE6 support // 2009-2010 — Rise of SPAs // 2010 — knockout // 2010 — backbonejs // 2010 — AngularJS // 2010 — todomvc // 2012 — React // 2013 — Flux // 2014
6. View Model Controller Input
7. The concept is pretty simple. On the paper.
12. The flow inside the MVC pattern is not well defined. Compare ASP.NET, Cocoa and RoR MVC implementations.
13. MVC Epidemic
14. MVC MVVM MVP MVI PM MVA MMVC PAV ...and many more
15. MVC MVVM MVP MVI VCV MVA MMVC PAV ...and many more
16. — AngularJS — Backbone — Ember.js — Cappucino — Spine.js — Echo — Chaplin — Marionette — ExtJS — Enyo — Knockout — Sproutcore — JavascriptMVC — Dojo — Mithril — Knockback — CanJS — Flight — Ampersand — TroopJS — Vue.js — Thorax — Kendo UI — Serenade — Sammyjs — PureMVC — Durandal — bem-mvc — Aura — Natman — Maria — Espresso — EasyMVC
17. How did we survive?
18. — Experience: the knowledge about the disease from our neighbours
 — TodoMVC and similar projects 
 and publications
 — Evolution — Flux
19. Flux
20. Flux is the application architecture with unidirectional data flow.
21. Components, that produce actions, that change the app state within the stores, that update components with the new state.
22. Action Component Store Input Dispatcher
23. What the Fl*x? What is this hype about?
24. Models, Controllers, Services, Providers, Directives, Factories, Expressions, Dependency Injection...
25. What are you building? A space ship?!
26. As a front-end developer, I want to think in more understandable and applicable abstractions.
27. Data UI Components Events Mediator
28. Data UI Components Events Mediator
29. Data UI Components Events Mediator
30. Data UI Components Events Mediator
31. Data → Stores Components Events → Actions Mediator → Dispatcher
32. Flux Understandable Predictable data flow Strict game rules — — —
33. What about Flux Pandemic?
34. — Flux — Reflux — Fluxxor — Alt — Flummox — Fluxible — redux — microcosm — nuclear-js — fluce — McFly — Zero Flux — Catberry — Tuxx — Marty.js — Fluxette — fluxthis — fluxex — Minimal Flux — delorean — fluxify
37. — Want to contribute? — todoflux.com — github.com/todoflux/todoflux — @todoflux
38. Thanks! todoflux.com @pukhalski