isojs

2019-08-20

Renders reactJS apps isomorphic on node.js without big app changes.

isoJS

Renders ReactJSapps isomorphic on node.js.

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

##Most important features:

  • render Reactapps with async api calls isomorphic on node.js
  • free choice of Fluximplementation (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-routerroute and previous requests
  • fetches all data at the same time
  • renders the Reactapp and synchronous respond to superagentrequests with the data fetched before
  • sends the rendered app including the latest state of each component back to the client
  • runs your Reactapp on the client (if javascript is enabled)

###How looks a classic architecture?

  • You build a Reactapp
  • 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.jsfile 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.loadMixinmixin in all data loading components
  • Use the isojs.stateMixinmixin in all components using state
  • Use superagentto load your data
  • Use the isojs.superagentPluginplugin 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: :idand :timeare placeholders for some kind of id and a timestamp

React-Router URLAPI 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

HomePage

https://github.com/dustin-H/isojs

Repository

https://github.com/dustin-H/isojs.git


上一篇:node-jsx
下一篇:mis
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章
暂无相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部