Isomorphic React + Flux + REST API

Question

So, I've been fiddle:ing with some isomorphic React + Flux lately and have found some concepts quite confusing to be honest. I've been looking into best practices about how to structure isomorphic apps and are looking for advice.

Suppose you are creating a webapp as well as a mobile app backed by the same REST API. Do you bundle your REST API together with the webapp? I've seen people advocating both bundling and having a separate codebase for the REST API.

Any advice or suggested reading is appreciated!

Answer 1

Let's see if I can help you.

Please keep in mind that Isomorphic Javascript is quite new and it is hard to find clear definitions for every use case.

By definition, if you create a RESTful application you should have a clear separation between server and client:

"A uniform interface separates clients from servers. This separation of concerns means that, for example, clients are not concerned with data storage, which remains internal to each server, so that the portability of client code is improved. Servers are not concerned with the user interface or user state, so that servers can be simpler and more scalable. Servers and clients may also be replaced and developed independently, as long as the interface between them is not altered."

Regarding isomorphic applications, the main benefits are:

• Not having a blank page when the user first enter the site (points for UX)
• Therefore it is SEO friendly
• And you can share one logic between server/client (for example regarding React Components)

This means you should deliver rendered React Components from the server to the client when the user first enters a URL. After that you will keep using your REST API as usual, rendering everything on the client.

If you can, share more details about your case and it will be easier help.

Answer 2

Fluxible (atleast from the examples) does advocate using the service layer inside the application calling it directly from the server and via xhr from the client without duplicating the code https://github.com/gpbl/isomorphic500/blob/master/src/app.js This is an example I followed religiously while building the isomorphic app

Answer 3

I wouldn't recommend you to bundle the REST API in the browser, as you are limited to using browser-compatible modules in your API, and you won't be able to make any direct database calls.

There's a library that makes it so you can build your APIs in an isomorphic fashion, and re-use it in the client and server without bloating or breaking the bundle. This is what we're currently using in a big single-page application.

It's called Isomorphine, and you can find it here: https://github.com/d-oliveros/isomorphine.

Disclaimer: I'm the author of this library.

Answer 4

The idea is very simple. Let's assume you have SPA and a backend wich provides REST API.

SPA (in browser) <====> Backend REST API

in isomorphic case, it is absolutely the same, except you will run your SPA on the server too.

So, it will work like that:

SPA (in browser) <====> Backend REST API
SPA (on server)  <====> Backend REST API

If you have a mobile app then it will be:

SPA (in browser) <====> Backend REST API
SPA (on server)  <====> Backend REST API
Mobile app       <====> Backend REST API

Here is a real isomorphic production application opened by us to the community - https://github.com/WebbyLab/itsquiz-wall . You can just clone it and run.

Here is my post which describes all the ideas behind the app in details.