Flummox

[acdlite]

Hi! This adds an example using Flummox.

Right before I was originally to submit this pull request, I noticed @goatslacker submitted PR #14 with an isomorphic alt demo, which is a fantastic idea, so I've also included my version of that.

It didn't feel right to me to create an entirely separate directory, though, since it's really just one extra file server.js. But I will update the PR if you want me to separate it.

It'd be cool if we could add a more complex demo that works with React Router (or similar). I started one for Flummox at https://github.com/acdlite/flummox-isomorphic-demo, but it'd be great if we could set up a separate repo like this one to show off isomorphism.

[acdlite]

@voronianski Updated to remove the isomorphic part. It was just one extra file :)

[acdlite]

Oops wrong button! Haha

[voronianski]

@acdlite please, could you use 4 indents style as common for the repo - https://github.com/voronianski/flux-comparison/blob/master/.jshintrc#L28

[acdlite]

Sure, thing! Sorry about that.

Are there submission guidelines somewhere?

[voronianski]

@acdlite also save all dependencies into global package.json

MacBook-Pro-Dmitri:flux-samples dmitri$ npm install flummox --save
npm WARN package.json flux-samples@0.1.0 No repository field.
flummox@2.2.1 node_modules/flummox
├── eventemitter3@0.1.6
└── 6to5-runtime@3.3.12
MacBook-Pro-Dmitri:flux-samples dmitri$ cd flummox/
MacBook-Pro-Dmitri:flummox dmitri$ npm start

> @ start /Users/dmitri/github/flux-samples/flummox
> ../node_modules/watchify/bin/cmd.js . -o build/bundle.js -v -d

Error: Cannot find module '6to5-runtime/helpers' from '/Users/dmitri/github/flux-samples/flummox/js'
Error: Cannot find module '6to5-runtime/helpers' from '/Users/dmitri/github/flux-samples/flummox/js'
Error: Cannot find module '6to5-runtime/core-js' from '/Users/dmitri/github/flux-samples/flummox/js'
Error: Cannot find module '6to5-runtime/helpers' from '/Users/dmitri/github/flux-samples/flummox/js/components'
Error: Cannot find module '6to5-runtime/helpers' from '/Users/dmitri/github/flux-samples/flummox/js/actions'
Error: Cannot find module '6to5-runtime/regenerator' from '/Users/dmitri/github/flux-samples/flummox/js/actions'
Error: Cannot find module '6to5-runtime/core-js' from '/Users/dmitri/github/flux-samples/flummox/js/actions'
Error: Cannot find module '6to5-runtime/helpers' from '/Users/dmitri/github/flux-samples/flummox/js/stores'
Error: Cannot find module '6to5-runtime/core-js' from '/Users/dmitri/github/flux-samples/flummox/js/stores'
Error: Cannot find module '6to5-runtime/helpers' from '/Users/dmitri/github/flux-samples/flummox/js/stores'
Error: Cannot find module '6to5-runtime/core-js' from '/Users/dmitri/github/flux-samples/flummox/js/stores'
Error: Cannot find module '6to5-runtime/helpers' from '/Users/dmitri/github/flux-samples/flummox/js/components'
Error: Cannot find module '6to5-runtime/helpers' from '/Users/dmitri/github/flux-samples/flummox/js/components'
Error: Cannot find module '6to5-runtime/core-js' from '/Users/dmitri/github/flux-samples/flummox/js/utils'
Error: Cannot find module '6to5-runtime/helpers' from '/Users/dmitri/github/flux-samples/flummox/js/utils'

[voronianski]

@acdlite the guidelines are in .jshintrc file.. I have linter in Sublime which throws warnings when something doesn't fit the file. I advice to use it :)

Also one more helper for following guidelines is .editorconfig https://github.com/voronianski/flux-comparison/blob/master/.editorconfig it's also easy to introduce that in your IDE - http://editorconfig.org/

[acdlite]

@voronianski Great! I think I've addressed everything you mentioned. Let me know if there's anything else I need to do to.

[voronianski]

@acdlite thanks but your example still doesn't work as expected -

We wait for productStore (https://github.com/voronianski/flux-comparison/pull/15/files#diff-18ee05a323338f3afa42f1594b8d04bcR23) to continue with data manipulation in cartStore. ProductStore decreases the inventory. However in your example after checkout 2 iPads in console.log response I have 1 inventory which is wrong (should be 0).

Notice Sold Out and inventory:

[acdlite]

Hmm, I'll look into it

[acdlite]

Ah it's because I'm doing defensive copying in ProductStore to protect against mutations, but in the other examples, the product is being mutated in place. FWIW, I think this is anti-Flux, but I will update to conform.

[acdlite]

@voronianski Updated!

[voronianski]

@acdlite yes, I see a lot of Object.assign in your code.. you are free to use defensive copying but the aim of the demo is to show how 2 different stores could interact with each other.

[acdlite]

@voronianski To me, it seems against the spirit of Flux for two stores to receive different "values" from the dispatcher because a different one mutated it first.

[voronianski]

@acdlite merged

[acdlite]

@voronianski Awesome, thanks!

[voronianski]

@acdlite regarding your comment:

To me, it seems against the spirit of Flux for two stores to receive different "values" from the dispatcher because a different one mutated it first.

For me this feels ok when you have 2 standalone UI blocks which deal with actually the same data. The second widget needs updated data to continue the flow.

[acdlite]

@acdlite Yeah, I agree it's a useful approach in practice. In my opinion, though, dispatcher payloads should be thought of not as data, but as messages that describe data. The dispatcher should send the exact same message to every store. Waiting for another store to respond to a message first is fine, but stores should be isolated — there should be no dependencies between stores.

Check out Pete Hunt's talk on "Full Stack Flux". He describes stores as essentially map-reduce functions: the state of a store at any time can be determined solely by the set of all messages ever sent by the dispatcher.

https://www.youtube.com/watch?v=KtmjkCuV-EU

[voronianski]

@acdlite thanks for sharing this video, very nice one 👍

I agree that stores should be standalone and Pete suggests to broad the domain if 2 stores rely on each other. However practically it's sometimes useful just to wait for and know that there's such an option.

[voronianski]

@acdlite another note is that I really like Flummox API and approach with isomorphism!

Just one question - what about data fetching on server and client? For example I have action receiveProducts which fires API utils - on the client it will make request with superagent and on the server with request, should I handle this manually?

[goatslacker]

You can use superagent on both client and server.

[acdlite]

@voronianski Yep, @goatslacker's right, superagent works on the server and the client. It's really great.

For data fetching to work in a more complex application, you need some sort of routing library. For instance, React Router provides the access to all the matching handlers for a request, so you can define static functions on them that perform your data fetching actions before rendering. You can see an example here:

https://github.com/acdlite/flummox-isomorphic-demo/blob/master/src/server/routes/views/appIndex.js

Also, I'm glad you like the Flummox API! It's very new still, hence the lack of comprehensive docs, but hopefully I'll have time this weekend to flesh everything out.

[acdlite]

@voronianski I've started documenting the API, if you're interested: https://github.com/acdlite/flummox/tree/master/docs/api