Nap + React

[cristiano-belloni]

Hello guys,
I started a spike on using React with Resourceful some time ago. I haven't had time to finish it, but I'll add some gists here based on it. It should be very easy to adapt it to Nap.

[cristiano-belloni]

Here's the gist: https://gist.github.com/janesconference/b620ba8c3763f4a64d4c

It contains two files: the resource where I call the component (which is an editable table, adapted from Stefanov's book) and the component itself, with its interface. I was experimenting with what happens when you store a reference of the react component and apply it to two different nodes.

The component is quite simple, I didn't split it up / use contexts / do anything fancy with it.

[cristiano-belloni]

Also, d3 in React: http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/.

I especially like the part when he uses d3 instead of JSX.

[mstade]

Oh hey, not sure how I missed this issue but this is great work chief! I'll definitely look at incorporating this into a tutorial asap!

[cristiano-belloni]

Cool! When the sprint allows me, we're planning to spike #14 also. So we're going to have a collection of tutorials :)

(it'd be cool if we could publish them as articles and spread the word on hackernews, echojs and all the other usual outlets - we could even open a Medium account for that, seems to be very popular)

[mstade]

I'd be somewhat averse to doing that right now actually, and would rather wait a bit till we have a larger body of content and particularly stuff that more accurately describes the rationale behind nap. It probably doesn't matter that much, but it's just that I'd rather not risk adding noise at a moment when really we should just hunker down and produce content and evolve nap accordingly. I'd say give it some time before starting to beat the drums.

[mstade]

By the way, React 0.14 introduces a simpler syntax for stateless components, which should really rhyme well with nap I think. I especially think this offers the opportunity to provide almost soundbite (gistbite?) style mini-tutorials or examples to show how to use nap with React. What d'ya think?

[mstade]

I also think a powerful (albeit perhaps a bit contrived) example would be to show an example where a resource view is represented using different techniques and even different technology, yet other representations like raw data stay the same. I.e. imagine your example where simply by changing the class of the node you're viewing things into you might render using d3 instead of react, and the consumer (and even other representations of the very same resource) is none-the-wiser.

[cristiano-belloni]

Yep, that's the fundamental point, imho: the separation between the view/render layer and the business / data layer. The view layer as a blackbox with a function as the simplest possible entry-point.

I think it would be really illuminating to have three examples side-by-side: we render the same component with d3, react and virtual-dom (that we currently support), and the resource layer doesn't change.