Flux Implementations

Tiago Rodrigues

@trodrigues

JS/Frontend developer at contentful.com

Warning!!

Opinions ahead!

Also, ES6!

What the Flux?

  • Application architecture
  • Patterns for dealing with data
  • One way data flow
  • No official implementation

What the Flux?

Components

  • Views
  • Stores
  • Actions
  • Dispatcher

Dispatcher

  • Usually a singleton
  • Listens to actions (events)
  • Registers callbacks which respond to actions

Views

  • React.js view/controllers
  • Get data from Stores
  • Use that data to set view state
  • Fire Actions with metadata

Stores

  • Manage application data and state
  • Not a model: can contain many models
  • Can contain app state
  • Should be concerned with a single domain
  • Listen to actions which mutate its data
  • Fire change events when state is changed
  • Stores listen to each other via waitFor

Stores

var TodoStore = {
  __proto__: EventEmitter.prototype,
  
  _todos: [],

  getAll: function() {
    return this._todos;
  },

  emitChange: function() {
    this.emit('change');
  },

  addChangeListener: function(callback) {
    this.on('change', callback);
  }
};

...

Stores

...

AppDispatcher.register(function(action) {

  switch(action.actionType) {
    case TodoConstants.TODO_CREATE:
      TodoStore._todos.push(action.text);
      TodoStore.emitChange();
      break;
  }
});

Actions

  • Simple helper methods
  • Trigger events to dispatcher with metadata

Actions

var TodoActions = {

  create(text) {
    AppDispatcher.dispatch({
      actionType: TodoConstants.TODO_CREATE,
      text: text
    });
  }

};

Data flow

Flux implementations

  • Simple implementations
  • Reactive implementations
  • Frameworks

http://fluxxor.com/

  • Simple implementation
  • Watcher mixins
  • Verbose

http://acdlite.github.io/flummox

  • Simple implementation
  • Watcher mixins and components
  • Simpler actions

http://goatslacker.github.io/alt/

  • Simple implementation
  • Watcher mixins
  • Lifecycle methods
  • Bootstrap/snapshot mechanism

https://github.com/kenwheeler/mcfly

  • Simple implementation
  • Watcher mixins
  • Very close to original concept
  • Little documentation

https://github.com/jmreidy/fluxy

  • Simple implementation
  • Close to original implementation
  • Bundles mori
  • Lifecycle methods

http://deloreanjs.com/

  • Simple implementation
  • Close to original implementation
  • Not only React focused

http://martyjs.org/

  • Close to original implementation
  • Data fetching helpers
  • Lifecycle methods
  • Verbose action/constant declaration
  • Good documentation

http://www.tuxedojs.org/

  • Close to original implementation
  • Animation helpers
  • Bundled router
  • Component helpers
  • Good docs

http://fluxible.io/

  • Very focused on shared client/server usage
  • Makes use of contexts
  • Plugin system

https://github.com/elierotenberg/nexus-flux

  • Simpler API
  • Very focused on shared client/server usage
  • Different data transports

https://github.com/spoike/refluxjs

  • Inspired by FRP
  • Stores and Actions are listenable
  • Helper mixins
  • Smaller API

https://github.com/fdecampredon/rx-flux

  • Uses RxJS at its core
  • Stores and Actions are observables
  • Smaller API

Resources

  • https://facebook.github.io/flux
  • http://pixelhunter.me/post/110248593059/flux-solutions-compared-by-example
  • https://github.com/enaqx/awesome-react
  • https://github.com/mikechau/react-primer-draft
  • http://www.reactiflux.com/

Thank you!

Made with Slides.com