Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
50 Shades of Flux Ilya Pukhalski
Slide 2
Slide 2 text
@pukhalski
Slide 3
Slide 3 text
— 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
Slide 4
Slide 4 text
— 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
Slide 5
Slide 5 text
— 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
Slide 6
Slide 6 text
View Model Controller Input
Slide 7
Slide 7 text
The concept is pretty simple. On the paper.
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
The flow inside the MVC pattern is not well defined. Compare ASP.NET, Cocoa and RoR MVC implementations.
Slide 13
Slide 13 text
MVC Epidemic
Slide 14
Slide 14 text
MVC MVVM MVP MVI PM MVA MMVC PAV ...and many more
Slide 15
Slide 15 text
MVC MVVM MVP MVI VCV MVA MMVC PAV ...and many more
Slide 16
Slide 16 text
— 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
Slide 17
Slide 17 text
How did we survive?
Slide 18
Slide 18 text
— Experience: the knowledge about the disease from our neighbours — TodoMVC and similar projects and publications — Evolution — Flux
Slide 19
Slide 19 text
Flux
Slide 20
Slide 20 text
Flux is the application architecture with unidirectional data flow.
Slide 21
Slide 21 text
Components, that produce actions, that change the app state within the stores, that update components with the new state.
Slide 22
Slide 22 text
Action Component Store Input Dispatcher
Slide 23
Slide 23 text
What the Fl*x? What is this hype about?
Slide 24
Slide 24 text
Models, Controllers, Services, Providers, Directives, Factories, Expressions, Dependency Injection...
Slide 25
Slide 25 text
What are you building? A space ship?!
Slide 26
Slide 26 text
As a front-end developer, I want to think in more understandable and applicable abstractions.
Slide 27
Slide 27 text
Data UI Components Events Mediator
Slide 28
Slide 28 text
Data UI Components Events Mediator
Slide 29
Slide 29 text
Data UI Components Events Mediator
Slide 30
Slide 30 text
Data UI Components Events Mediator
Slide 31
Slide 31 text
Data → Stores Components Events → Actions Mediator → Dispatcher
Slide 32
Slide 32 text
Flux Understandable Predictable data flow Strict game rules — — —
Slide 33
Slide 33 text
What about Flux Pandemic?
Slide 34
Slide 34 text
— 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
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
— Want to contribute? — todoflux.com — github.com/todoflux/todoflux — @todoflux
Slide 38
Slide 38 text
Thanks! todoflux.com @pukhalski