voronianski / flux-comparison

:pencil: Practical comparison of different Flux solutions

Flux Comparison by Example

Similar app implemented with different Flux solutions including Facebook's, Yahoo's and others.

Usage

Clone this repo and run npm install inside it.

Before checking any of the included solutions you will need to:

0. Go to solution folder (e.g. cd facebook-flux, cd redux, etc.)
1. Run npm install to install dependencies of a specific app
2. Run npm start to build js resources with Browserify
3. Open index.html in the browser

Demo

Select several products from Flux Online Shop and add them to cart. Open browser console and click Checkout button, you'll see payload with products that you just "bought".

http://labs.voronianski.dev/flux-comparison

You may find few notes about all implementations on my blog.

Discussion on HackerNews - https://news.ycombinator.com/item?id=8989495.

Examples

The list of Flux related implementations used in this demo.

Ready

• Facebook Flux
• Fluxible by Yahoo
• Reflux
• Alt
• Flummox
• Marty.js
• McFly
• Lux
• Material Flux
• Redux
• Redux + Flambeau
• Nuclear.js
• Fluxette
• Fluxxor
• Freezer
• Fluxury

Next

You're welcome to create issues with suggestions or even make your own pull-requests (but before please take a look on contributing guidelines).

Resources

Libraries

• https://github.com/facebook/flux
• http://fluxible.io
• https://github.com/spoike/refluxjs
• https://github.com/goatslacker/alt
• https://github.com/kenwheeler/mcfly
• https://github.com/acdlite/flummox
• https://github.com/LeanKit-Labs/lux.js
• https://github.com/azu/material-flux
• http://martyjs.org
• https://github.com/gaearon/redux
• https://github.com/BurntCaramel/flambeau
• https://optimizely.github.io/nuclear-js
• https://github.com/edge/fluxette
• https://github.com/BinaryMuse/fluxxor
• https://github.com/arqex/freezer
• https://github.com/FunctionFoundry/fluxury

Articles

• http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html
• http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited
• http://spoike.ghost.io/deconstructing-reactjss-flux
• https://medium.com/@dan_abramov/the-evolution-of-flux-frameworks-6c16ad26bb31

Non React.js examples

The flux demo app was also implemented by enthusiasts without React.js but with another view layer:

• Riot + RiotControl
• flux-riot demo
• idom-redux-todomvc-app (incremental-dom + redux)
• Polymer with Reflux
• Vuex
• @ngrx: Redux implemention for Angular

Contributing

See CONTRIBUTING.md.

---

MIT Licensed

flux-comparison's Issues

Suggestion: nuclear.js

https://github.com/optimizely/nuclear-js
Quite robust implementation of Flux as a ready-to-use framework.

Suggestion: a series of Youtube videos walking new users through the code

I think this would make a very nice addition to the code itself. For new users it might be a bit difficult to understand exactly what is responsible for which part of the process and how data moves through the application. One way to illuminate this is by recording the screen and walking through the code, explaining things as you go along. It would take a bit of time to do, though—but I figured I'd make the suggestion anyway, in case you're interested in a challenge.

import error in flummox example error

shouldn't this be
https://github.com/voronianski/flux-comparison/blob/master/flummox/js/Flux.js#L4

import {AppActions} ....

https://github.com/voronianski/flux-comparison/blob/master/flummox/js/actions/Actions.js#L6

@acdlite

mkdir build

Please create the build directory with npm start or modify the doc to add a mkdir build step or it fails with

leszek@leszek-desktop:~/flux/flux-comparison/facebook-flux$ npm start
> @ start /home/leszek/flux/flux-comparison/facebook-flux
> ../node_modules/watchify/bin/cmd.js . -o build/bundle.js -v -d


events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: ENOENT, open 'build/.bundle.js'

npm ERR! @ start: `../node_modules/watchify/bin/cmd.js . -o build/bundle.js -v -d`
npm ERR! Exit status 8
npm ERR! 
npm ERR! Failed at the @ start script.
npm ERR! This is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ../node_modules/watchify/bin/cmd.js . -o build/bundle.js -v -d
npm ERR! You can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 3.16.0-29-generic
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "start"
npm ERR! cwd /home/leszek/flux/flux-comparison/facebook-flux
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! code ELIFECYCLE
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /home/leszek/flux/flux-comparison/facebook-flux/npm-debug.log
npm ERR! not ok code 0

Shared package.json does not reflect individual dependencies

Currently each project has its own package.json, but really all dependencies are in the top-level package.json. Is this by design? Do you plan to change this?

Fluxxor not mentioned

Hi, I went through all the examples and the blog post, however, I've seen nobody mentioned Fluxxor. Just asking if there was a specific reason for it or it was simply overlooked/forgotten.

Suggestion: arda

Looks like arda isn't mentioned yet.

https://github.com/mizchi/arda

Idea: create a separate folder comparing the isomorphic flux implementations

Fluxible, reflux, and alt are doing isomorphic that I know of, and others are adding it too. There should be a separate folder or perhaps this is outside of the scope of this repo and there should be a different project that deals with these comparisons. We can use the same app.

Suggestion: Meteor.js

This talk shows how it's a lot easier to get started with Meteor.js and React, vs. picking a Flux implementation. One key moment is at 5:48.

Suggestion: Tuxedo.js example

Ordered by stars
TuxedoJS
fynx
ReactFlux

Suggestion: Fluxy example

https://github.com/jmreidy/fluxy

I'll try to take a crack at this but wanted it out there if others wanted to do it.

Facebook Relay

As i understand, Relay technically isnt a full Flux implementation. (but are there any?)
It was first presented by Facebook at React.js Conf (January 2015).

This FAQ says its heavily inspired by Flux but simpler.
https://gist.github.com/wincent/598fa75e22bdfa44cf47

Perhaps its worth comparing here too?

Suggestion: Vuex

https://vuejs.org/v2/guide/state-management.html#Official-Flux-Like-Implementation
https://vuex.vuejs.org/

Suggestion: Fynx

https://github.com/foss-haas/fynx

Suggestion: Cerebral

www.christianalfoni.com/cerebral/
https://github.com/christianalfoni/cerebral

Breaks on watchify

Hi!

All of the demos fails for me at npm start.

npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.2.1
npm ERR! npm v3.3.8
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @ start: ../node_modules/.bin/watchify . -o build/bundle.js -v -d
npm ERR! spawn ENOENT

Any ideas?

Suggestion: FluxThis

https://github.com/addthis/fluxthis

https://fluxthis.io/#/docs/about

Update Flummox example

Hey, @acdlite don't you want to update Flummox example with latest API changes (e.g. FluxComponent etc.), thanks! 😉

Ripple Example

Would be nice have a comparison example for Ripple too, can send a PR if you want.

Ripple is an extension to the Flux paradigm (closer to the new Relay in scope):

Ripple vs Flux

Ripple shares key architectural concepts with Flux, such as the single dispatcher, data-flow programming (unidirectional), and views updating when the associated data changes, etc. However, Ripple is an extension to the Flux paradigm, in that the dispatcher will not update only the data/views on the current page, but on all other clients too. Ripple introduces much less proprietary concepts (everything is a resource) and the API aims to embrace standards rather than invent new ones.

https://github.com/pemrouz/ripple

See also the React quick example to get started: https://github.com/pemrouz/ripple-examples

How to lint the code?

The contributing guide suggests using ESLint, and there's a .eslintrc in the project root, but eslint is not in devDependencies. After adding it there and running it, I got (literally) over 9000 violations:

Should we remove the section on using ESLint from Contributing, as well as .eslintrc? It seems to do more harm than good at this point. :-)

Suggestion add Redux

It seems really good flux implementation Redux

Indicate deprecated libraries

Flummox and Marty are recommending that their users migrate to other solutions.

babel dependency is out of date (and lux.js has moved forward)

In package.json:

  "dependencies": {
    "babel-runtime": "^4.7.3",
...and...
  "devDependencies": {
    "babel": "^4.7.3",

When running npm install:

npm ERR! peerinvalid The package babel does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected]

Lux has moved forward: LeanKit-Labs/lux.js@11c6ecc

Suggestion: Show error handling

To make the examples complete and more realistic, I think error handling should be demonstrated. I'm struggling to come up with a good pattern for error handling myself.

Suggestion: bloody-flux

https://github.com/bloodyowl/flux this looks interesting... (outside perspective)

comparison overview table

Before looking at the details and implementation exampled I'd be interested in a general overview of the compared libraries. Just some basic strengths and weaknesses to get a general idea which one suits most for my situation. Some metrics like code complexity, size, popularity etc. would be nice too.
What do you think?

McFly?

https://github.com/kenwheeler/mcfly

Suggestion: lux.js

see http://www.smashingmagazine.com/2015/06/qualities-of-good-flux-implementations/

sh: browserify: command not found

When running npm run build in any of the flux implementation folders. The npm scripts field does not seem to add modules in the root folder's node_modules to it's path. I'm getting around this now by installing stuff globally, but that's ugly.