React.js Integration

[zoomclub]

The ability for JS-CSP to radically change the way events are handled in user interfaces looks worthy of further investigation. The "Taming User Interfaces" section of the following article introduced this way of using JS-CSP: http://jlongster.com/Taming-the-Asynchronous-Beast-with-CSP-in-JavaScript

Meanwhile React.js only uses the standard event system. I for one would very much like to see more on how JS-CSP can be used to handle events in React components. Are there there any practical examples of this or a React Mixin that can be used for practical application of JS-CSP?

[jlongster]

I'm the author of that blog post and I have plans to heavily research and post more about that area. I've been caught up in fleshing out this project & transducers but soon I hope to get to it. There are definitely some cool things you can do.

[zoomclub]

That is super awesome! Interactivity is what my whole app is about so I'm really looking forward to how JS-CSP can enhance interaction in React. I'm also interested in how alternate controllers like Myo, Leap Motion and the Wacom Stylus could factor and plug into a comprehensive event handling system.

[zoomclub]

Great to see your on the bill for React.js Conf. When they asked for great topics I shot them am email about your work with taming user interfaces. Can't wait to learn more, have a super conference!

[zoomclub]

Awesome presentation at React Conf 2015, lots of possibilities with JS-CSP in React! Can't wait to work more with the examples. I work on Chrome so what do I need to work with your Firefox Process Tab?

Here is the presentation, lots to convey in half an hour, very enlightening:

https://www.youtube.com/watch?v=W2DgDNQZOwo&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr&index=6

[jlongster]

Thanks, it's so hard to do something like this in 30 min. My devtool addon isn't even available in Firefox yet, it's super hacky and I need to fix it up a lot first. I'm going to start focusing on js-csp again the next few weeks so I should make some progress.

[bstro]

@jlongster Enjoyed your CSP talk as well! Any chance you could push up the code you showed in the slides? I'd love to see some of the code from your initial thoughts on using CSP with Flux.

[DjebbZ]

Hi, I did a small presentation on React.js + CSP 2 weeks ago and have a repo to share. Go to branch csp. Agreed, the example is very dumb, but it at least shows the use of channels + transducers to make 2 independent components (read: not in parent-child relationship) communicate. Hope this helps get you started !

https://github.com/DjebbZ/react-meetup-data-flow

-- edit: typos

[csterritt]

Allen Kim put up a really nice minimal take on Flux using js-csp here:

http://codrspace.com/allenkim67/a-simpler-web-architecture-using-flux-csp-and-frp-concepts/

I've been extending it slightly, to great effect.

[casperin]

Small note on the above link. The clickHandler,

clickHandler: function() {
    csp.go(function*(){
        yield csp.put(channel, {actionType: 'incr'});
    });
}

Can be done as

clickHandler: function() {
    csp.putAsync(channel, {actionType: 'incr'});
}

[lucasmreis]

First of all, thanks for js-csp, it's an amazing piece of work!

Clojurescript has a nice React wrapper called Quiescent, and the Quiescent TodoMVC implementation uses CSP in a really clever way.

I experimented with it a little bit in Javascript using js-csp, and wrote about it here: Using CSP As Application Architecture.

I thought it was extremely powerful to think of every part of the application as a running process. This made it very decoupled, and very easy to experiment in the browser console: just puts values on channels and see what happens.

Any input will be welcome!