Riot: Compatible with redux?

[weepy]

There's alot of buzz around Redux. I just wanted to point that out. Be good to show they are compatible?

[nippur72]

Perhaps one of the existing TodoMVC can be adapted to work with Redux.

[willvedd]

I'm also interested in seeing if they mesh.

[nippur72]

as a step to getting closer to it, I've modified my fork of TodoMVC adopting a full flex-like architecture.

It doesn't use redux yet, but I guess now it's a matter of just plugging it, changing the store and the actions.

BTW, as I was writing the flux-like part of the code, I developed an interesting pattern (inspired by RiotControl) I think I'm gonna use in place of external flux-like frameworks:

• no dispatcher, just the store and the actions
• communication between store and UI is made via riot.observable (.trigger, .on)
• the store sends just one notification event ("update")
• the store holds also the actions that act on it
• action-events are wrapped around functions (mostly to get TypeScript intellisense).
• app data/state stored in a plain javascript object

The only thing I miss is treating store data as immutable objects.

[shrunyan]

We've began integrating Redux into our Riot applications at zesty.io. Currently we've only done some simple sync actions and the reddit async example from the redux docs. So far though I really like how the two have come together.

https://github.com/zesty-io/app-skeleton

Any feed back would be appreciated. Still experimenting with the combination to see how it will scale.

[weepy]

Did you need to write a riot version of react-redux bindings ?

[shrunyan]

@weepy no I just passed the store through opts to each child component. A module similar to react-redux which binds the store to each component would be highly desirable. It's something I'm looking into. Need to get more familiar with redux first.

[dcorb]

+1

[anaibol]

++1!

[nilpath]

+1

[nikek]

+1, would be very nice!

[GianlucaGuarini]

Hi guys I was just curious: I was asking myself why a dev that wants to use riotjs maybe because it's small, performant and smart or maybe because of its simple philosophy would use redux ( 9 chapters doc! ) that together with the the polyfills required ( Promise - fetch ) is bigger the whole riot framework?
Maybe I am a bit naive ( or I am used to think too much ) but I would like to know what are the killer features you are looking for that you can't handle in your apps with a bit of javascript

[nilpath]

@GianlucaGuarini where did you get that the polyfills are required? on their repo it says that it doesn't have any dependencies and also that it is small, in fact, smaller than the riotjs framework.

You can use Redux together with React, or with any other view library.
It is tiny (2kB) and has no dependencies.

- https://github.com/rackt/redux#redux

Also, just because the docs have 9 chapters doesn't mean that their philosophy isn't simple either. I like the concepts behind flux for data management and I think that the concepts introduced with redux is quite solid as well. That said, it's true that it might not be a necessary tool to be used in all projects, for small applications it's probably overkill to use something like redux or flux.

But to answer your question, for me as a developer, I think two killer features in redux are:

• data flow management
• recording of state for debugging / error reports / logging

[GianlucaGuarini]

@GianlucaGuarini where did you get that the polyfills are required?

In their example. This means that if I would like to test it the library is not enough

It is tiny (2kB) and has no dependencies.

It is 5kb check yourself but it's really small anyway
@nilpath thanks for your clear reply but I am not yet convinced or maybe I am too dumb to understand it :smile_cat: . If I'd need a reactive framework I would rely on Bacon.js, for all the rest riot-observable is enough for me. I am curious to see if any of you guys will make riot-redux to check the concrete benefits of this approach

[nilpath]

In their example. This means that if I would like to test it the library is not enough

Unless you want to write xmlhttp request by hand you would need to use some sort of library for that right? In this case they use native fetch and promises with polyfills, but you could use something like jQuery as well, which might be overkill for just making AJAX calls.

It is 5kb check yourself but it's really small anyway

it's 2.3kb when gzipped :smile:

@GianlucaGuarini: yeah I might be the best person to argue to why redux should be the one and only way to handle data and events. I believe more in being able to select and use the tools I feel solves the problems I have. Maybe it's true for you, that those tools are Bacon.js and riot-observable but that might not be true for everyone.

It's not impossible to use redux with riotjs today, it's just a bit cumbersome. And like @weepy and @sethyuan mentioned before, it would be nice to have seperate package, something optional, that could make it a bit simpler to use together. If this would be possible to do without have to make changes to riotjs, I don't know, but it would be nice to explore the possibilities.

However, I understand that you, as a maintainer, might have other goals with higher priority to focus on :smile_cat:

If it is possible to implement something like react-redux for riotjs without making big changes, then I don't see why anyone couldn't do it.

[shrunyan]

@GianlucaGuarini

I would like to know what are the killer features you are looking for that you can't handle in your apps with a bit of javascript

I'm personally sold on redux because it makes it easier for me to reason about the state of my apps versus observables. I went through an iteration where I used a dispatcher built on top of observables, inspired by the riot-isomorphic repo.

It was nice but I was still getting confused on communication between stores. Redux reducers just made sense to me with how they encapsulate mutation logic.

Currently there are a few inefficiencies I'm knowingly accepting.

• additional file size
• aggressive updating

File size from the addition of redux I accept because of the reduced cognitive overhead. Polyfill file size for future facing features, i.e. fetch, I accept because I hope to shed that weight in the future once support rounds out.

Aggressive updating I'm accepting once again due to developer easy but I'm hoping can be mitigated with something like a riot-redux module. Personally I'm looking into it in my spare time and trying to wrap my head around the react-redux repo for inspiration.

[GianlucaGuarini]

@shrunyan @nilpath It's great to hear your motivations guys I would be really glad to see a riot-redux implementation to understand pragmatically the features of this approach..ping me when you have found or made something cool

[weepy]

I don't see why you need to see an implementation to understand the
implications of an architectural pattern? That's all redux/flux is. No
doubt one could write something like RiotControl in a redux flavor.

On Tue, 20 Oct 2015 07:16 Gianluca Guarini [email protected] wrote:

@shrunyan https://github.com/shrunyan @nilpath
https://github.com/nilpath It's great to hear your motivations guys I
would be really glad to see a riot-redux implementation to understand
pragmatically the features of this approach..ping me when you have found or
made something cool

—
Reply to this email directly or view it on GitHub
https://github.com/riot/riot/issues/1118#issuecomment-149445595.

[GianlucaGuarini]

I don't see why you need to see an implementation to understand the implications of an architectural pattern?

@weepy this is my personal opinion but I wish someone can demonstrate I am wrong

[nippur72]

In my experience the flux architecture is a natural complement to riot, and I'm using it in all my new projects.

But I don't use _flux_ or _redux_, because I don't like the extra complexity they add.

I just write a store object as a riot.observable() and then code actions, dispatching and all the rest with the riot observable interface. I even get IDE autocompletion because I write actions as methods on the store object.

So to make it brief, I like the idea of flux but riot.observable() is well enough to implement it.

[weepy]

be great if you could post an example ?

On Tue, Oct 20, 2015 at 9:50 AM nino-porcino [email protected]
wrote:

In my experience the flux architecture is a natural complement to riot,
and I'm using it in all my new projects.

But I don't use _flux_ or _redux_, because I don't like the extra
complexity they add.

I just write a store object as a riot.observable() and then code actions,
dispatching and all the rest with the riot observable interface. I even get
IDE autocompletion because I write actions as methods on the store object.

So to make it brief, I like the idea of flux but riot.observable() is
well enough to implement it.

—
Reply to this email directly or view it on GitHub
https://github.com/riot/riot/issues/1118#issuecomment-149481189.

[nippur72]

@weepy see for example todo.ts of my own fork of riotjs-todomvc.

That store has:

• a plain data object, marked readonly to remember you that only the store itself can modify it.
• the store fires just one event (update) that tags can subscribe to.
• actions on the store are called by triggering events+parameter, but to make this more IDE friendly, the store has public methods that do the actual triggering.

So in the end the store exposes:

• a readonly "data" property
• public action methods
• an "update" event.

The only thing I do not implement is data as immutable object, as I feel it's too cumbersome.

In that todomvc example the store was shared by having a global variable, but there could be other ways.

[GianlucaGuarini]

Maybe I could also post an example to show how you can write your tags logic semantically without too much ceremony. Let me know if you are interested

[weepy]

I'm interested. .. ^_^

On Tue, Oct 20, 2015 at 11:16 AM Gianluca Guarini [email protected]
wrote:

Maybe I could also post an example to show how you can write your tags
logic semantically without too much ceremony. Let me know if you are
interested

—
Reply to this email directly or view it on GitHub
https://github.com/riot/riot/issues/1118#issuecomment-149511106.

[GianlucaGuarini]

I will see whether this weekend I could build up something for you guys

[nippur72]

One more word about flux and riot: things can be a lot simpler if the main tag of the app acts as a flux store. It doesn't need to be a separate object because a tag is also an observable. That solves also the problem of creating the store instance and passing it to child tags.

[weepy]

ideally I think you'd want to be able to separate the tag from the store -
at least just for testing the app

On Tue, Oct 20, 2015 at 3:23 PM nino-porcino [email protected]
wrote:

One more word about flux and riot: things can be a lot simpler if the main
tag of the app acts as a flux store. It doesn't need to be a separate
object because a tag is also an observable. That solves also the problem
of creating the store instance and passing it to child tags.

—
Reply to this email directly or view it on GitHub
https://github.com/riot/riot/issues/1118#issuecomment-149582866.

[GianlucaGuarini]

@weepy I will make you an example of a basic riot application as soon as we will release riot 2.3.0 because it will include a lot of new features and improvements :v:

[weepy]

Awesome. Look foward to it. I was just looking at Bacon and Rx which are v
interesting
On 25 Oct 2015 8:52 pm, "Gianluca Guarini" [email protected] wrote:

@weepy https://github.com/weepy I will make you an example of a basic
riot application as soon as we will release riot 2.3.0 because it will
include a lot of new features and improvements [image: :v:]

—
Reply to this email directly or view it on GitHub
https://github.com/riot/riot/issues/1118#issuecomment-150967969.

[pablosichert]

Thank you for mentioning my demo! - You might wanna check it out. :point_up:

Just to drop a word on that: I was also appealed by the minimalistic and functional approach of Redux, and therefore used it in my project. This implies that the store needs to get passed down the components, which is no flaw per se - in my opinion.
The only problem I faced right now was thinking about how to subscribe to a specific action only and not triggering on every change of the state. If you got an idea on how to handle that, would appreciate it!

[brtn]

@shrunyan Thanks for the app skeleton, now I am building my app based on yours. Just a question though: can we make the Store a global and use it inside tags? @PabloSichert mentioned passing down it is a solution but making it a global would be a better as it really is global for the app.

[nilpath]

@brtn you could probably expose it as a riot mixin and then include that mixin in your tags instead of sharing it through opts

function reduxStoreMixin(store) {
  // mixin implementation
  this.getStore = function() { 
    return store; 
  };
};

// before mounting
riot.mixin('redux-store', new reduxStoreMixin(storeInstance));

// in your tag
this.mixin('redux-store');
var store = this.getStore();

[brtn]

I will use mixins then, thanks @nilpath

[nilpath]

@brtn no problem you inspired me to do the same! :smiley:

[brtn]

:smile:

[nilpath]

infact, it seems like @ibloat have done exactly this. you can checkout the repo. It's also available on npm.

[pablosichert]

Neat! I also like the subscribe(selector, callback = this.update).

[ibloat]

@nilpath hey thanks for the mention!
Any input and/or feature/pull requests are welcome!
Looking at it three weeks later, the dependence on reselect's 'recomputations' thing is smelly and will hopefully be replaced soon now that 2.3 is out.
When I find the time I will update the sample to implement a TodoMVC as well.

[weepy]

@GianlucaGuarini - hey you mentioned above you might be making a best practice example app. Did you get a chance ?

[GianlucaGuarini]

@weepy I've just started https://github.com/GianlucaGuarini/riot-app-example I will ping you guys when I am done

[weepy]

Nice one! What is it supposed to explain? I was expecting something
involving FR but it seems to be mainly about isomorphism?

On Mon, 30 Nov 2015 07:33 Gianluca Guarini [email protected] wrote:

@weepy https://github.com/weepy I've just started
https://github.com/GianlucaGuarini/riot-app-example I will ping you guys
when I am done

—
Reply to this email directly or view it on GitHub
https://github.com/riot/riot/issues/1118#issuecomment-160544753.

[GianlucaGuarini]

@weepy It's about logic.. let me finish and you will find in the readme file how I think a riot app should handle its data without too much ceremony

[weepy]

Look forward to it

On Mon, 30 Nov 2015 08:09 Gianluca Guarini [email protected] wrote:

@weepy https://github.com/weepy It's about logic.. let me finish and
you will find in the readme file how I think a riot app should handle its
data without too much ceremony

—
Reply to this email directly or view it on GitHub
https://github.com/riot/riot/issues/1118#issuecomment-160551214.

[sapphiriq]

@weepy I just published a repo with my experiments.
If you want just riot-redux part you can check createComponent function and counter-example tag on usage example.
Maybe with new API of riot.Tag you can achieve something like this without that template in JS code, I don't know :)

[nikek]

@sapphiriq Great experiment and inspiration!
I also played with the mix of redux and riot and it looks pretty minimal and great so far. Please try it out and feedback on this architecture https://github.com/nikek/redux-poc.
There are still a bunch of things I need to think through to make it awesome, like updating the url as if it were a view rendering the route variable. But that mostly has to do with Redux. Riot is very compatible with taking the action-creators / intents (as I like to call them) and run them on user interaction. Then the _smart_ riot components can import the store, subscribe to it and run update. 👍

[andyrj]

I am kind of late to this thread, but I put together a simple riot-redux project as well. Thought I would share, I need to style it but it works well regardless of it's appearance.
https://github.com/andyrj/riot-redux-starter-kit

[danny-andrews]

I put together a little riot mixin that is modeled off of react-redux, albeit a much more slimmed-down version of it. https://github.com/danny-andrews/riot-redux/

[kokujin]

Are there any starter projects that use Gulp instead of Webpack?

[shrunyan]

@kokujin we are using gulp for ours. I haven't updated to the mixin style everyone else is using so be aware our implementation of redux with riot is not optimal.

[GianlucaGuarini]

Hi guys I am happy to announce that my demo app is ready and you can check it here It's polymorphic, it's build using ajax + websockets + HTML5 history api and it retains the state of any app component. I hope it's not too complicated and it could be a valid alternative to redux, flux or whatever you want to use. I need to write a bit more doc but basically you can run it with sudo npm run build && npm run start

[GianlucaGuarini]

Thanks to @avanslaars for his riot-redux video series https://www.youtube.com/watch?v=QuwnbuneAzM I think this bug can be closed because we have accumulated a lot of useful resources regarding this topic. :v:

[rhythnic]

I'm a bit late, but I wanted to offer another take on using riot and redux together. I've been using React+Redux for a couple of months, and I wanted to avoid some things when using Riot+Redux, mainly:

• Importing action creators
• Dispatching asynchronously via Thunk

This architecture uses riot.observable to avoid those issues.

Riot Redux Mixin

[Sendoushi]

I've been using Redux + Riot for a while and here is a code example:

• https://github.com/Sendoushi/code-examples/tree/redux-riot

I still have to update it with the structure I've been using. At least the router isn't the way I'm using it now. I'm using now Page.js as router (why reinvent the wheel right?) and I use it as a module. From my point of view, router should dispatch actions and not the other way around.

Stay tuned, I'll update the code example as soon as possible :)

[RanzQ]

I think redux definitely works with riot, the stack our team is using has a lot of opinionated stuff but feel free to check it for ideas:

https://github.com/CoderCoded/crcd-fullstack/tree/master/web/src/client

I've split the tags inspired by some react guides: components (reusable), containers & routes (use data from store). The router also splits the app with the help of webpack.

Each tag is also a ES6 module so they import the redux stuff they need. A mixin attaches store and each tag takes care of subscribing to updates.

[Sendoushi]

So my code example is kind of outdated but I have a wizard which makes a basic structure for a redux + riot: https://github.com/Sendoushi/yo-frontend-wizard