Not Particularly Meaningful

    isojs

    0.0.21 • Public • Published

    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

    Install

    npm i isojs

    DownloadsWeekly Downloads

    3

    Version

    0.0.21

    License

    Apache License Version 2.0

    Last publish

    Collaborators

    • dustin-h