A state of Flux

Or why Flux exists, why there are so many implementations, and why each seems to either have too much boilerplate or too much magic!

(and some alternatives)

What is Flux?

Why are there so many Flux implementations?

Boilerplate

Magic

Facebook Flux

Fluxible by Yahoo

Reflux

Alt

Flummox

Marty.js

McFly

Lux

Material Flux

Fynx

Fluxxor

Delorean.js

Barracks

Stores

State
Dispatcher Listeners
Event Emitters
State-logic
Business-logic?

Views (react)

Render state

Actions

Dispatch events
Starting/Completed?
Business-logic?

Dispatcher

Single event channel

State is hard.

Can we make it simpler?

Immutable Persistent Data Structures

ClojureScript, Mori, Immutable-js
Cursors (lenses)
shouldComponentUpdate() or PureRenderMixin

Om

ClojureScript
Global App State
Opinionated -- for reusable component

(defn widget [data owner]
  (reify
    om/IRender
    (render [this]
      (dom/h1 nil (:text data)))))

(om/root widget {:text "Hello world!"}
  {:target (. js/document (getElementById "my-app"))})

Reagent

ClojureScript
One App State / Many App States
Aims for a simple API

(defn some-component []
  [:div
   [:h3 "I am a component!"]
   [:p.someclass 
    "I have " [:strong "bold"]
    [:span {:style {:color "red"}} " and red"]
    " text."]])

Omniscient

JavaScript
Modeled after Om
Immstruct (Immutable-js wrapper)

var GreetComponent = component(({guestCursor}) =>
  <div>Hello from {guestCursor.get('name')}</div>).jsx;

const appState = immstruct({name: 'Julia');

appState.on('swap', () =>
    React.render(<AppRoot state={appState} />, domTarget);

const appState = immstruct({name: 'Julia');

appState.on('next-animation-frame', () =>
    React.render(<AppRoot state={appState} />, domTarget);

const appState = immstruct.withHistory({name: 'Julia');

appState.on('next-animation-frame', () =>
    React.render(<AppRoot state={appState} />, domTarget);

appState.cursor('name').update(name => name + '!');

appState.undo();
appState.redo();

Abstracting communication: queues/channels

Core.async (ClojureScript)
js-csp (ES6 Generators)

Michael Trotter

We're hiring! jane.com/dev

frontenddevelopers.org

#region_us_utah

Questions?