50 Shades of Flux

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?

E13498af38db5a5ab97f89fdc500b5af?s=128

Ilya Pukhalski

August 28, 2015
Tweet

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.

  8. None
  9. None
  10. None
  11. None
  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
  35. None
  36. None
  37. — Want to contribute? — todoflux.com — github.com/todoflux/todoflux — @todoflux

  38. Thanks! todoflux.com @pukhalski