voronianski / flux-comparison

:pencil: Practical comparison of different Flux solutions
https://labs.voronianski.dev/flux-comparison/
2.79k stars 214 forks source link

Adds freezer-js example #66

Closed arqex closed 9 years ago

arqex commented 9 years ago

Hi. Thanks for this project, it is really helpful to let us decide what framework should we use for our next project :)

I have added an example of your app using Freezer.

Freezer is an immutable data structure, not a flux framework in itself, but it allows to get an unidirectional dataflow in a flux alike way. With Freezer the app has all the state in one big data structure (like redux), and all its nodes trigger events on update. Updates refresh the whole app state, reusing the structure nodes that has not been changed (a la immutable.js), so we can listen to changes in the top of the structure, re-rendering our app from top to bottom.

It is possible to create flux alike apps with Freezer and no frameworks because it has an open event system. Instead of calling actions we can trigger custom events, that accepts any number of parameters.

// State is the Freezer object
State.trigger('products:addToCart', product);

A dispatcher is not needed either, you can listen to those events directly in the Freezer object.

State.on('products:addToCart', function (product) {
    // Update the app state here...
});

Listener methods update the state, and they are called reactions. It is nice to organizing them by their domain, like if they were flux stores, but with the difference that all the data is stored in one place. In the shopping cart I have just used one domain, products, so I have created a ProductsReactions file.

If you need to coordinate state updates, you can trigger new events when a reaction finishes, or listen to changes in specific nodes, no need of waitFor.

This is all what it takes to understand flux apps with Freezer. No complex concepts like observers, reducers, payloads or actionCreators. Just events and almost no boilerplate code.

I hope you like it and accept the PR :)

Cheers, Javi

voronianski commented 9 years ago

@arqex thanks this solution looks nice! :+1: I've added some minor lint fixes and merged this in - https://github.com/voronianski/flux-comparison/commit/f1791f96e81199259ec6083636df991e790757a0 thanks once more :wink:

arqex commented 9 years ago

Thanks! I am glad you liked it :)