isoJS

Renders ReactJS apps isomorphic on node.js.

isojs renders ReactJS apps isomorphic on the server and the client without changing something in the app.

Most important features:

• render React apps with async api calls isomorphic on node.js
• free choice of Flux implementation (or just React)
• no need to define data fetching on serverside
• sync state from server rendered app to client

What it does:

• guesses which data needs to get fetched on the server based on the react-router route and previous requests
• fetches all data at the same time
• renders the React app and synchronous respond to superagent requests with the data fetched before
• sends the rendered app including the latest state of each component back to the client
• runs your React app on the client (if javascript is enabled)

How looks a classic architecture?

• You build a React app
• You load your data via superagent
• You build a REST API-Server for your data loading (no need to be node.js)
• You create an isoJS-Server which handles all front-facing requests

Get Started:

To get startet just fork the isojs-demo-app.

Usage

Installation:

npm install isojs

Server:

On the server-side you only need to define where your routes component is and on which url your data API can be reached.

var isojs = require('isojs');
 
var config = {
    routesPath: './Routes.js',
    getApiServerAddress: function(){
        return 'http://localhost:8080/';
    }
};

With this config you can use the app-builder to create a new server and use it in your express app. (needs to be root!). To ensure, that the server-side part of isojs is available, call setServer().

isojs.checkLocation.setServer();
var isoJSapp = isojs.appBuilder(config);
app.use(isoJSapp());

Client:

A basic component that loads data and holds state looks like that:

var React = require('react');
var superagent = require('superagent');
var isojs = require('isojs');
 
var Blog = React.createClass({
    mixins: [isojs.loadMixin, isojs.stateMixin],
 
    isojsInitialState: function(){
        return { title: '', content: '' };
    },
 
    loadBlogPost: function(id){
        superagent
        .get('/blog/getpost/'+id)
        .use(isojs.superagentPlugin)
        .end(function(err, res){
            this.setState(JSON.parse(res.text));
        }.bind(this));
    },
 
    componentDidMount: function(){
        this.loadBlogPost(this.props.id);
    },
 
    render: function() {
        return (
            <div>
                <h1>{this.state.title}</h1>
                <div>{this.state.content}</div>
            </div>
        );
    }
});
 

The Routes.js file defines all routes of your app with react-router.

var React = require('react');
var Route = require('react-router').Route;
 
var BlogPost = require('./components/BlogPost.react');
 
var routes = (
    <Route name="main" path="/">
        <Route path="/blogpost/:id" name="blogpost" handler={BlogPost}/>
    </Route>
);
 
module.exports = routes;

What changed compared to a default ReactJS app?

• Use the isojs.loadMixin mixin in all data loading components
• Use the isojs.stateMixin mixin in all components using state
• Use superagent to load your data
• Use the isojs.superagentPlugin plugin to enable isomorphic rendering of this request

Performance Note:

To be able to render your app as fast as possible try to map your route params to your api calls. Do not convert them in any way.

Do:

:id and :time are placeholders for some kind of id and a timestamp

React-Router URL	API Calls
/blog/:id	/loadpost/:id
/blog?id=:id	/loadpost/:id
/blog/:id	/loadpost?id=:id
/blog/:id?time=:time	/loadpost?id=id&time=:time

Do NOT !!!!:

React-Router URL	API Calls
/blog/:id/:time	/loadpost/:id/[:time/2]

[:time/2] intents to describe the calculated half of :time

Apache License Version 2.0