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?
What is Flux?
What is Flux?
What is Flux?
Why are there so many Flux implementations?
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
#region_us_utah
Questions?
A State of Flux
By spicydonuts
