Isomorphic React.js example using Vert.x Web?

[Henrik Östman]

Hi!

Can anybody point me to a example for setting up a isomorphic (render server- and clientside) React.js application build upon Vert.x 3.x?

I'm totally new at React.js and doesn't know where to begin. The closest I found is a template engine for React.js, https://github.com/aesteve/vertx-service-registry/tree/master/src/main/java/io/vertx/serviceregistry/engines, but without any examples of how to use it.

How do I create a router that works both serverside and clientside for a multipage application?

Thanks for any help!

// Henrik

[Julien Viet]

Arnaud has done this : https://github.com/aesteve/vertx-react-isomorphic

there are probably other examples.

--
You received this message because you are subscribed to the Google Groups "vert.x" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vertx+un...@googlegroups.com.
Visit this group at https://groups.google.com/group/vertx.
To view this discussion on the web, visit https://groups.google.com/d/msgid/vertx/f2e8a0a7-b9b5-4275-afdb-2d579dfbc5c4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Arnaud Estève]

Hi

Indeed I made some experiments on React rendering on server-side. But nothing worked as I expected it too.

Where could you start ?

First pointer : it implies using ReactDOM.renderToString() to generate the markup, then use it (for example, implementing your own Vertx template engine).

Second pointer : you'll need "imports", like require(). If you separate concerns within multiple files. Vertx has a require implementation using classpathfileresolver iirc. You should use that.

Third pointer : you need to "parse" JSX files (React files with JSX markup language) and transform them into standard JS files (with ReactDOM.div("...") instead of inline markup <div props={} />)

So, the keypoint is to use nashorn JS engine (used by Vert.x) to read/parse/transpile JSX/React files. And iirc I was stuck because some of the syntax used by React (with ? I think it was the with keyword) wasn't recognized at this point.

A ReactTemplateEngine would be a fantastic addition to the Vert.x stack. I think it's doable, but requires a lot of work. I'm following this topic, feel free to share any improvement or thoughts you might have re. this topic.

Good Luck !

[Patrick van Kann]

Seems that other have noticed the JSX/Nashorn issue

https://github.com/facebook/react/issues/3037 

This guy claims to have fixed it with a polyfill whilst getting React and Spring Boot working together

http://winterbe.com/posts/2015/02/16/isomorphic-react-webapps-on-the-jvm/ 

I haven't tested this but I'm also curious to know if an isomorphic (lol) approach is viable with Vertx.

Cheers,

Patrick

[Arnaud Estève]

Last time I checked the SpringBoot + React example (disclaimer : it was months ago), they didn't use JSX transforming (they kinda "cheated" in the GitHub repo). But they may have found a good way to handle this since :)

In my humble opinion, such an approach can be viable, at least it's worth the try. I'm worried about performance though. You mentionned one of my repos earlier in this post (the one of the registry, not using JSX iirc), I had huge performance issues while evaluating JS files. (but there was a huge amount of data to handle... so...).

And also, one key point to keep in mind is that some kind of things won't be possible, by design. For instance, I've seen people using isomorphic/universal rendering with XMLHttpRequest. That means you don't pass an initial set of props to React the first time you render the page, you simply let it make an http request. This is possible with V8/nodejs, this isn't possible with Nashorn.

I'm not sure whether such an approach is common, or if it makes sense, but this is definitely something nashorn will not be able to do. I prefer passing a set of determined props for server-side rendering. Also I'm not sure how to interact with a flux architecture like redux. In a Single Page Application, people will tend to use such an architecture. So the main idea for isomorphic rendering would be to fulfill stores with data coming from the server I guess... Not sure such thing is possible with nashorn.

Injecting data is also a potential pitfall. You have to pass a Map of objects Javascript can understand.

So... Lots of things to dig through in order to answser the "is it viable" question :)

[Arnold Schrijver]

I did a small test yesterday based on some of the input I could find. I posted the result on Github here: https://github.com/aschrijver/vertx-react-example