Isomorphic ReactJS managed by Elixir

Questions / Help
, ,
1

Hey friends!

My company runs a single page app, and it is a hard requirement that we do isomorphic rendering for our front end.

Our back-end is implemented in Elixir. I was thinking it might be nice to cut out the middle man and use Elixir to isomorphically render our reactjs application on our elixir back-end.

Are there any libraries, conference talks, etc. you can point me to that could be helpful?

Thanks a bunch!

2

Unsure about libraries but it would be pretty easy to do, just setup a Port to a nodejs app that talks over it’s stdin/stdout to your main server, and anytime you need to render out a page then send a JSON of data over stdin and get the page data back (I’d recommend tagging with an ID so you could interlace commands for faster speed if you get nodejs running multicore). It’s the standard BEAM way to talk to external apps like that. :slight_smile:

Now if you want to toss out React and use something else that is better suited, there are tons of options, though it sounds like you might already be tied to react and if you want to ‘isomorphicaly’ use react then a Port is the way to do it, essentially just using react-in-node ‘as’ your template system (no where near as fast as elixir templates, but if you want it ‘isomorphic’ then that’s how to do it). :slight_smile:

2 Likes
3

There is a library that does basically what @OvermindDL1 suggests for server-side React rendering in a pool of nodejs workers orchestrated by Elixir! Check out https://github.com/revelrylabs/elixir_react_render

1 Like
4

Another way to achieve this is to use Node.js server in front of Elixir back-end.

When browser request for index page just returns a fully rendered string, the fetching data just from Elixir back-end. Use isomorphic fetch to make sure the components are also executing well in the Node server. All the API will be called from the browser directly goes to Elixir back-end through Nginx or Ingress etc.

If you are using GraphQL there’s a term named schema stitching, which let you merge back-end schema to the current server.

1 Like
5

Oh that’s cool!

6

Just for information, there is a post abour react_render from the author here…

3 Likes
7

Just chiming in to say that lib does pretty much what @OvermindDL1 said. Having elixir apps supervise node processes makes things so much more pleasant in development and production.

We also have another related lib that is for node interaction in general

https://github.com/revelrylabs/elixir-nodejs

Eventually we will have the react render lib implemented using that one hopefully

4 Likes