New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Which Flux implementation should I use? #22

Closed
koistya opened this Issue Oct 2, 2014 · 75 comments

Comments

Projects
None yet
@koistya
Member

koistya commented Oct 2, 2014

Relay by Facebook + examples

img img img img
npm

redux by Dan Abramov

img img img img
npm

flux by Facebook + examples

img img img img
npm

alt by Josh Perez + examples

img img img img
npm

reflux by Mikael Brassman + examples

img img img img
npm

flummox (deprecated) by Andrew Clark

img img img img
npm

fluxible by Yahoo

img img img img
npm

fluxxor by Brandon Tilley + examples

img img img img
npm

marty.js by James Hollingworth + examples

img img img img
npm

fynx by Alan Plum

img img img img
npm

McFly by Ken Wheeler + example

img img img img
npm

DeLorean.js by Fatih Kadir Akın + examples

img img img img
npm

fluxify by Javier Márquez

img img img img
npm

Comparison: https://github.com/voronianski/flux-comparison

@koistya koistya added the question label Oct 2, 2014

@koistya koistya closed this Oct 2, 2014

@ChaosD

This comment has been minimized.

Show comment
Hide comment
@ChaosD

ChaosD Nov 3, 2014

This is closed but i still like reflux for its simplicity

ChaosD commented Nov 3, 2014

This is closed but i still like reflux for its simplicity

@koistya

This comment has been minimized.

Show comment
Hide comment
@koistya

koistya Nov 3, 2014

Member

@ChaosD It seems like Reflux misses some important characteristics of the Flux architecture: Can you dispatch actions in a predefined order with Reflux? Make sure that all the actions are dispatched synchronously (the next action dispatching does not start before finishing dispatching of a previous one)? Can a single action creator / method dispatch more than one action at a time (a couple of different actions)?

Member

koistya commented Nov 3, 2014

@ChaosD It seems like Reflux misses some important characteristics of the Flux architecture: Can you dispatch actions in a predefined order with Reflux? Make sure that all the actions are dispatched synchronously (the next action dispatching does not start before finishing dispatching of a previous one)? Can a single action creator / method dispatch more than one action at a time (a couple of different actions)?

@ChaosD

This comment has been minimized.

Show comment
Hide comment
@ChaosD

ChaosD Nov 4, 2014

Be warned, I most certainly cannot answer your questions in a satisfying way because I'am just getting started with react.
I like the simplicity because it seems to streamline the whole process a bit more (maybe too much for you) and makes it easier for me to get started with. What i got so far is, that its possible to order your "dispatching", quoting the readme here:

waitFor is replaced in favor to handle serial and parallel data flows:

  • Aggregate data stores (mentioned above) may listen to other stores in serial
  • Joins for joining listeners in parallel

I could not find anything about action creators dispatching multiple actions but since actions dispatch themselves, i imagine you could simply call multiple actions to get what you need. I'am not quite sure if I got you right here but i cannot imagine a situation where this might be required. Could you elaborate?

These articles seem to address some of your concerns and helped me a lot understanding reflux:

ChaosD commented Nov 4, 2014

Be warned, I most certainly cannot answer your questions in a satisfying way because I'am just getting started with react.
I like the simplicity because it seems to streamline the whole process a bit more (maybe too much for you) and makes it easier for me to get started with. What i got so far is, that its possible to order your "dispatching", quoting the readme here:

waitFor is replaced in favor to handle serial and parallel data flows:

  • Aggregate data stores (mentioned above) may listen to other stores in serial
  • Joins for joining listeners in parallel

I could not find anything about action creators dispatching multiple actions but since actions dispatch themselves, i imagine you could simply call multiple actions to get what you need. I'am not quite sure if I got you right here but i cannot imagine a situation where this might be required. Could you elaborate?

These articles seem to address some of your concerns and helped me a lot understanding reflux:

@koistya koistya reopened this Nov 4, 2014

@ChaosD

This comment has been minimized.

Show comment
Hide comment
@ChaosD

ChaosD Nov 5, 2014

Have you reopened this issue for further discussion or are you already considering reflux? I'd love to hear your opinion about it because I'am also about to make this decision.

ChaosD commented Nov 5, 2014

Have you reopened this issue for further discussion or are you already considering reflux? I'd love to hear your opinion about it because I'am also about to make this decision.

@ChaosD

This comment has been minimized.

Show comment
Hide comment
@ChaosD

ChaosD Nov 5, 2014

I just studied the flux docs again and it seems that you are right. if you want to stick to flux as close as possible, reflux might not be the best bet. Fluxxor is new to me, thanks for pointing me there. I will definitely check it out.

ChaosD commented Nov 5, 2014

I just studied the flux docs again and it seems that you are right. if you want to stick to flux as close as possible, reflux might not be the best bet. Fluxxor is new to me, thanks for pointing me there. I will definitely check it out.

@ChaosD

This comment has been minimized.

Show comment
Hide comment
@ChaosD

ChaosD Nov 7, 2014

I played a bit with Fluxxor and it convinced me. It is really better if you do not want to be led astray from the Flux pattern.
What do you think about McFly?

Maybe it is time to rename the issue... ;)

ChaosD commented Nov 7, 2014

I played a bit with Fluxxor and it convinced me. It is really better if you do not want to be led astray from the Flux pattern.
What do you think about McFly?

Maybe it is time to rename the issue... ;)

@f

This comment has been minimized.

Show comment
Hide comment
@f

f Nov 7, 2014

Contributor

Try https://github.com/deloreanjs/delorean which we build and it's too
simple.
7 Kas 2014 09:05 tarihinde "ChaosD" notifications@github.com yazdı:

I played a bit with Fluxxor and it convinced me. It is really better if
you do not want to be led astray from the Flux pattern.
Have you seen McFly? http://kenwheeler.github.io/mcfly/


Reply to this email directly or view it on GitHub
#22 (comment)
.

Contributor

f commented Nov 7, 2014

Try https://github.com/deloreanjs/delorean which we build and it's too
simple.
7 Kas 2014 09:05 tarihinde "ChaosD" notifications@github.com yazdı:

I played a bit with Fluxxor and it convinced me. It is really better if
you do not want to be led astray from the Flux pattern.
Have you seen McFly? http://kenwheeler.github.io/mcfly/


Reply to this email directly or view it on GitHub
#22 (comment)
.

@ChaosD

This comment has been minimized.

Show comment
Hide comment
@ChaosD

ChaosD Nov 7, 2014

@f , in what way Delorean is different to the previously mentioned? How does it handle the concerns @koistya mentioned with reflux?

Btw, I really love how so many Back To The Future themed libs pop up so fast! :D

ChaosD commented Nov 7, 2014

@f , in what way Delorean is different to the previously mentioned? How does it handle the concerns @koistya mentioned with reflux?

Btw, I really love how so many Back To The Future themed libs pop up so fast! :D

@koistya koistya changed the title from Flux vs. Reflux to What Flux implementation to use? Flux, Reflux, Fluxxor, McFly, DeLorean... Nov 7, 2014

@koistya koistya changed the title from What Flux implementation to use? Flux, Reflux, Fluxxor, McFly, DeLorean... to Which Flux implementation to use? Flux, Reflux, Fluxxor, McFly, DeLorean... Nov 7, 2014

@ChaosD

This comment has been minimized.

Show comment
Hide comment
@ChaosD

ChaosD commented Dec 2, 2014

A nice summary can be found here:
https://reactjsnews.com/the-state-of-flux/

@patrick-fls

This comment has been minimized.

Show comment
Hide comment
@patrick-fls

patrick-fls Dec 16, 2014

I personally settled for Fluxxor. I think it's the perfect blend between vanilla flux and reduced boilerplate and you can further reduce it with custom mixins. If the project ever dies, it would be easy to migrate. It's a non negligible advantage if you're in react for the long term.

patrick-fls commented Dec 16, 2014

I personally settled for Fluxxor. I think it's the perfect blend between vanilla flux and reduced boilerplate and you can further reduce it with custom mixins. If the project ever dies, it would be easy to migrate. It's a non negligible advantage if you're in react for the long term.

@frankleng

This comment has been minimized.

Show comment
Hide comment
@frankleng

frankleng Jan 29, 2015

Contributor

one more to consider...
https://github.com/arqex/fluxify

Contributor

frankleng commented Jan 29, 2015

one more to consider...
https://github.com/arqex/fluxify

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Jan 30, 2015

I don't see compelling reason why to use Dispatcher. I prefer Reflux, it's simpler and cleaner.

hipertracker commented Jan 30, 2015

I don't see compelling reason why to use Dispatcher. I prefer Reflux, it's simpler and cleaner.

@irium

This comment has been minimized.

Show comment
Hide comment
@irium

irium commented Feb 1, 2015

I'm personally using https://github.com/goatslacker/alt

@koistya koistya changed the title from Which Flux implementation to use? Flux, Reflux, Fluxxor, McFly, DeLorean... to Which Flux implementation to use? Feb 1, 2015

@honkskillet

This comment has been minimized.

Show comment
Hide comment
@honkskillet

honkskillet Feb 4, 2015

FWIW, a bunch of the links to the npm packages (from the images) go to the wrong packages.

honkskillet commented Feb 4, 2015

FWIW, a bunch of the links to the npm packages (from the images) go to the wrong packages.

@mridgway

This comment has been minimized.

Show comment
Hide comment
@mridgway

mridgway Feb 5, 2015

If the goal is for the application to be isomorphic, you should look into our Fluxible library. We're using store instances instead of singletons to avoid concurrency issues that you'd see on the server when doing isomorphic.

mridgway commented Feb 5, 2015

If the goal is for the application to be isomorphic, you should look into our Fluxible library. We're using store instances instead of singletons to avoid concurrency issues that you'd see on the server when doing isomorphic.

@koistya

This comment has been minimized.

Show comment
Hide comment
@koistya

koistya Feb 5, 2015

Member

@mridgway, but that adds complexity... Have you tried the other way around - keep using singletons, but make sure that each server-side rendering operation (HTTP request) uses a separate JavaScript execution environment?

Member

koistya commented Feb 5, 2015

@mridgway, but that adds complexity... Have you tried the other way around - keep using singletons, but make sure that each server-side rendering operation (HTTP request) uses a separate JavaScript execution environment?

@koistya koistya changed the title from Which Flux implementation to use? to Which Flux implementation should be used? Feb 5, 2015

@mridgway

This comment has been minimized.

Show comment
Hide comment
@mridgway

mridgway Feb 5, 2015

You have two options if you want to use a separate environment: use a separate node process for rendering each request or using node's vm module. Neither of these options will give you very good scalability.

We haven't found that it adds that much complexity at all. In fact, it makes it easier to test stores because you don't have to worry about side effects between tests. You can see an implementation of Fluxible in our flux-examples or our docs site.

mridgway commented Feb 5, 2015

You have two options if you want to use a separate environment: use a separate node process for rendering each request or using node's vm module. Neither of these options will give you very good scalability.

We haven't found that it adds that much complexity at all. In fact, it makes it easier to test stores because you don't have to worry about side effects between tests. You can see an implementation of Fluxible in our flux-examples or our docs site.

@koistya

This comment has been minimized.

Show comment
Hide comment
@koistya

koistya Feb 5, 2015

Member

@mridgway what about rendering React app directly with V8 without Node's overhead?

Member

koistya commented Feb 5, 2015

@mridgway what about rendering React app directly with V8 without Node's overhead?

@goatslacker

This comment has been minimized.

Show comment
Hide comment
@goatslacker

goatslacker Feb 8, 2015

Contributor

I came to post about this exact thing and found this discussion.

alt gives you lots of flexibility in terms of isomorphism, you can keep your stores as singletons without using vm or you can take the fluxible approach and create instances of flux and pass it around your react components using context.

The case for alt:

  • Actually flux. It doesn't deviate from the flux architecture and uses flux's dispatcher.
  • Isomorphic. Both creating instances or keeping stores as singletons.
  • Terse, lessens the overhead (no constants, switch statements, no writing own dispatcher) but still has all the benefits of those (code grepability, able to listen to global dispatcher)
  • Has some nice features (bootstrap / snapshots) which allow you to save the entire application state and then reload it later. This is great for debugging.
Contributor

goatslacker commented Feb 8, 2015

I came to post about this exact thing and found this discussion.

alt gives you lots of flexibility in terms of isomorphism, you can keep your stores as singletons without using vm or you can take the fluxible approach and create instances of flux and pass it around your react components using context.

The case for alt:

  • Actually flux. It doesn't deviate from the flux architecture and uses flux's dispatcher.
  • Isomorphic. Both creating instances or keeping stores as singletons.
  • Terse, lessens the overhead (no constants, switch statements, no writing own dispatcher) but still has all the benefits of those (code grepability, able to listen to global dispatcher)
  • Has some nice features (bootstrap / snapshots) which allow you to save the entire application state and then reload it later. This is great for debugging.
@cluelessjoe

This comment has been minimized.

Show comment
Hide comment
@cluelessjoe

cluelessjoe Mar 27, 2015

Well, there is also Flummox which aims to be idiomatic, modular, testable, isomorphic Flux & with no singletons required.

cluelessjoe commented Mar 27, 2015

Well, there is also Flummox which aims to be idiomatic, modular, testable, isomorphic Flux & with no singletons required.

@koistya koistya closed this Mar 27, 2015

@koistya koistya reopened this Mar 27, 2015

@aaron-goshine

This comment has been minimized.

Show comment
Hide comment
@aaron-goshine

aaron-goshine Apr 25, 2015

I came across this post and thought it was quite interesting, I have read the FLUX docs a while back and the possibilities are endless, however these flavours of flux just add a few tweaks to the Facebook flux minus a few of the core concept. (dispatching order, single point store optimisation, wait-for, and over all granular control)
Moreover the Facebook flux is more tested, more used and Facebook have demonstrated that it is very scalable.

The npm charts that are at the top of this page, is not drawn on the same scale, so comparing them visually will be misleading read the values carefully

aaron-goshine commented Apr 25, 2015

I came across this post and thought it was quite interesting, I have read the FLUX docs a while back and the possibilities are endless, however these flavours of flux just add a few tweaks to the Facebook flux minus a few of the core concept. (dispatching order, single point store optimisation, wait-for, and over all granular control)
Moreover the Facebook flux is more tested, more used and Facebook have demonstrated that it is very scalable.

The npm charts that are at the top of this page, is not drawn on the same scale, so comparing them visually will be misleading read the values carefully

@sompylasar

This comment has been minimized.

Show comment
Hide comment
@sompylasar

sompylasar Nov 16, 2015

@Bartekus

ReferenceError: React is not defined

That's because any JSX expression (<Provider ...>...</Provider> in your case) is transformed to React.createElement() under the hood.

I've circled the addition

That's what you get after JSX:

ReactDOM.render(
  React.createElement(
    /*string/ReactClass type*/ Provider,
    /*[object props]*/ { store: store },
    /*[children ...]*/ {
      component: component,
      appContainer: appContainer,
      () => {
        // ...
      }
    }
  )
)

Is this what you expected to get?

Any ideas as to the best way to wrap whole application state with Provider as per Redux requirement?

https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/client.js#L37

sompylasar commented Nov 16, 2015

@Bartekus

ReferenceError: React is not defined

That's because any JSX expression (<Provider ...>...</Provider> in your case) is transformed to React.createElement() under the hood.

I've circled the addition

That's what you get after JSX:

ReactDOM.render(
  React.createElement(
    /*string/ReactClass type*/ Provider,
    /*[object props]*/ { store: store },
    /*[children ...]*/ {
      component: component,
      appContainer: appContainer,
      () => {
        // ...
      }
    }
  )
)

Is this what you expected to get?

Any ideas as to the best way to wrap whole application state with Provider as per Redux requirement?

https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/client.js#L37

@Bartekus

This comment has been minimized.

Show comment
Hide comment
@Bartekus

Bartekus Nov 16, 2015

@sompylasar
Oh damn, I'm so thick, thank you for pointing the problem out and for the possible solution!
I guess in case of react-starter-kit direct, conversion to redux aint going to be as smooth as I was hoping it to be lol but erikras' example is the best yet so let's see if I can bend react-starter-kit to redux will...

On a side note I'm kinda surprised nobody has converted this kit to redux yet, considering it's part of WebStorm and it now being used in real, high-end development.

Bartekus commented Nov 16, 2015

@sompylasar
Oh damn, I'm so thick, thank you for pointing the problem out and for the possible solution!
I guess in case of react-starter-kit direct, conversion to redux aint going to be as smooth as I was hoping it to be lol but erikras' example is the best yet so let's see if I can bend react-starter-kit to redux will...

On a side note I'm kinda surprised nobody has converted this kit to redux yet, considering it's part of WebStorm and it now being used in real, high-end development.

@petermoresi

This comment has been minimized.

Show comment
Hide comment
@ryanez

This comment has been minimized.

Show comment
Hide comment

ryanez commented Jan 6, 2016

@jhabdas

This comment has been minimized.

Show comment
Hide comment
@jhabdas

jhabdas commented Jan 6, 2016

@paulmillr

This comment has been minimized.

Show comment
Hide comment
@paulmillr

paulmillr commented Jan 6, 2016

😼

@vedmant

This comment has been minimized.

Show comment
Hide comment
@vedmant

vedmant Jan 10, 2016

I personally use Alt, tried Redx and I didn't like switch statements, constants, too much boilerplate as for me.

vedmant commented Jan 10, 2016

I personally use Alt, tried Redx and I didn't like switch statements, constants, too much boilerplate as for me.

@cusspvz

This comment has been minimized.

Show comment
Hide comment
@cusspvz

cusspvz Jan 25, 2016

@koistya could you please fix the typo by replacing depricated with deprecated ?

cusspvz commented Jan 25, 2016

@koistya could you please fix the typo by replacing depricated with deprecated ?

@Oliboy50

This comment has been minimized.

Show comment
Hide comment
@Oliboy50

Oliboy50 Jan 31, 2016

redux please :)

Oliboy50 commented Jan 31, 2016

redux please :)

@vedmant

This comment has been minimized.

Show comment
Hide comment
@vedmant

vedmant Jan 31, 2016

Switched to redux finally, it's easier when App grows I need to change and access data from different stores, it's easier when it's all single store.

vedmant commented Jan 31, 2016

Switched to redux finally, it's easier when App grows I need to change and access data from different stores, it's easier when it's all single store.

@Dindaleon

This comment has been minimized.

Show comment
Hide comment
@Dindaleon

Dindaleon Jan 31, 2016

Here we are using redux, the best of them all: github.com/Dindaleon/hapi-react-starter-kit

Dindaleon commented Jan 31, 2016

Here we are using redux, the best of them all: github.com/Dindaleon/hapi-react-starter-kit

@heks

This comment has been minimized.

Show comment
Hide comment
@heks

heks Feb 15, 2016

Does anyone have a fork of this kit with redux implemented?

heks commented Feb 15, 2016

Does anyone have a fork of this kit with redux implemented?

@jhabdas

This comment has been minimized.

Show comment
Hide comment
@jhabdas

jhabdas Feb 15, 2016

@heks if not, you should be able to cobble one together using one or more of these: http://habd.as/awesome-react-boilerplates/

jhabdas commented Feb 15, 2016

@heks if not, you should be able to cobble one together using one or more of these: http://habd.as/awesome-react-boilerplates/

@koistya

This comment has been minimized.

Show comment
Hide comment
@koistya

koistya Feb 21, 2016

Member

I'm going to close this one as it's not a real issue or feature request. But feel free to continue the conversation on this thread. You're also welcome to participate in discussions on Gitter, Appear.in, or StackOverflow.

Member

koistya commented Feb 21, 2016

I'm going to close this one as it's not a real issue or feature request. But feel free to continue the conversation on this thread. You're also welcome to participate in discussions on Gitter, Appear.in, or StackOverflow.

@koistya koistya closed this Feb 21, 2016

@rdewolff

This comment has been minimized.

Show comment
Hide comment
@rdewolff

rdewolff Mar 2, 2016

Redux rocks :)

rdewolff commented Mar 2, 2016

Redux rocks :)

@rstormsf

This comment has been minimized.

Show comment
Hide comment

rstormsf commented Aug 16, 2016

@jhabdas

This comment has been minimized.

Show comment
Hide comment
@jhabdas

jhabdas Aug 16, 2016

It's gaining mindshare. Haven't used it myself yet. I'd personally love to explore something a little less clever than Redux. The amount of boilerplate one has to write with Redux, middleware you have to use (i.e. thunk, saga, whathaveyou) can quickly lead to a mind numbing amount of analysis paralysis. That said just pick something and go with it, learn from your mistakes and get better next time. There is and will never be a "correct" answer to this infinite thread.

jhabdas commented Aug 16, 2016

It's gaining mindshare. Haven't used it myself yet. I'd personally love to explore something a little less clever than Redux. The amount of boilerplate one has to write with Redux, middleware you have to use (i.e. thunk, saga, whathaveyou) can quickly lead to a mind numbing amount of analysis paralysis. That said just pick something and go with it, learn from your mistakes and get better next time. There is and will never be a "correct" answer to this infinite thread.

@rstormsf

This comment has been minimized.

Show comment
Hide comment
@rstormsf

rstormsf Aug 16, 2016

@jhabdas 100% agree. I'm really tired seeing so many new JS things these days. RxJS, NG2.0, ES7, JSPM, WebGL, fluxxxxxxxxZ etc, etc. Besides that, we have to be able to stay productive and GSD.

rstormsf commented Aug 16, 2016

@jhabdas 100% agree. I'm really tired seeing so many new JS things these days. RxJS, NG2.0, ES7, JSPM, WebGL, fluxxxxxxxxZ etc, etc. Besides that, we have to be able to stay productive and GSD.

@xgqfrms-GitHub

This comment has been minimized.

Show comment
Hide comment
@xgqfrms-GitHub

xgqfrms-GitHub Jul 21, 2017

react's family!

react
& react-router-dom
& redux
& react-redux
& redux-thunk/redux-saga

xgqfrms-GitHub commented Jul 21, 2017

react's family!

react
& react-router-dom
& redux
& react-redux
& redux-thunk/redux-saga

@jhabdas

This comment has been minimized.

Show comment
Hide comment
@jhabdas

jhabdas Jul 21, 2017

Preact FTW! Wait, no. Inferno. Wait... ::thump::

jhabdas commented Jul 21, 2017

Preact FTW! Wait, no. Inferno. Wait... ::thump::

@valera-rozuvan

This comment has been minimized.

Show comment
Hide comment

valera-rozuvan commented Aug 28, 2017

Simpler redux alternative - dynamo.Js
http://www.medsquared.com.au/blog/simpler-redux-alternative-dynamojs/

@jhabdas

This comment has been minimized.

Show comment
Hide comment
@jhabdas

jhabdas Aug 30, 2017

Thanks for sharing @valera-rozuvan. I worked with Redux and React for 6 months at the Enterprise level and constantly felt myself wasting time trying to create simple interfaces. ⭐️ added

jhabdas commented Aug 30, 2017

Thanks for sharing @valera-rozuvan. I worked with Redux and React for 6 months at the Enterprise level and constantly felt myself wasting time trying to create simple interfaces. ⭐️ added

@langpavel

This comment has been minimized.

Show comment
Hide comment
@langpavel

langpavel Aug 31, 2017

Collaborator

Apollo and Redux or Relay modern or everything else in this order.
Why?
Because of future.

Collaborator

langpavel commented Aug 31, 2017

Apollo and Redux or Relay modern or everything else in this order.
Why?
Because of future.

@jhabdas

This comment has been minimized.

Show comment
Hide comment
@jhabdas

jhabdas Aug 31, 2017

But probably not this Apollo. Or this one.

jhabdas commented Aug 31, 2017

But probably not this Apollo. Or this one.

@valera-rozuvan

This comment has been minimized.

Show comment
Hide comment
@valera-rozuvan

valera-rozuvan commented Nov 17, 2017

@langpavel Do you mean Apollo from this project https://github.com/apollographql/react-apollo ?

@petermoresi

This comment has been minimized.

Show comment
Hide comment
@petermoresi

petermoresi commented Nov 17, 2017

@langpavel

This comment has been minimized.

Show comment
Hide comment
@langpavel
Collaborator

langpavel commented Nov 19, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment