Isomorphic JS - httpRequest client side only

Question

Question about store data population in isomorphic flux apps. (I'm using react, alt, iso and node but theory applies to other examples)

I have a flux 'store' (http://alt.js.org/docs/stores/) that needs to get data from an api:

getState() {
   return {
       data : makeHttpRequest(url)
   }
}

and as the user navigates through the SPA, more data will be loaded via http requests.

I want this app to be isomorphic so that I can render the apps full html including latest data server side and return it to the user for fast initial page load.

react.renderToString() lets me render the app as html, and I can seed the data using alt&iso like:

storeData = { "MyStore" : {"key" : "value"}}; // set data for store
alt.bootstrap(JSON.stringify(storeData || {})); // seed store with data

var content = React.renderToString(React.createElement(myApp)); // render react app to html

The problem is that I will see errors when running the js server side as the store will want to make a http request which it wont be able to do (as xmlhttprequest wont exist in node)

Whats the best way to solve this problem?

The only solution I can think of would be to wrap the httprequest from the store with:

var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');

    ...

    if (ExecutionEnvironment.canUseDOM) {
        // make http request
    } else {
        // do nothing
    }

Any better ideas? Thanks in advance.

Answer 1

I would recommend hooking into your Ajax library or XMLHttpRequest directly if you are running serverside. Just shim it with code that supplies data directly from your database or application.

A quick example:

var noop= function(){}

window.XMLHttpRequest= function(){
    console.log("xhr created", arguments);
    return {
        open: function(method, url){
            console.log("xhr open", method, url);
            // asynchronously respond
            setTimeout(function(){
                // pull this data from your database/application
                this.responseText= JSON.stringify({
                    foo: "bar"
                });
                this.status= 200;
                this.statusText= "Marvellous";
                if(this.onload){
                    this.onload();
                }
                // other libs may implement onreadystatechange
            }.bind(this), 1)
        },
        // receive data here
        send: function(data){
            console.log("xhr send", data);
        },
        close: noop,
        abort: noop,
        setRequestHeader: noop,
        overrideMimeType: noop,
        getAllResponseHeaders: noop,
        getResponseHeader: noop,
    };
}

$.ajax({
    method: "GET",
    url: "foo/bar",
    dataType: "json",
    success: function(data){
        console.log("ajax complete", data);
    },
    error: function(){
        console.log("something failed", arguments);
    }   
});

http://jsfiddle.net/qs8r8L4f/

I whipped this up in the last 5 minutes mostly using the XMLHTTPRequest mdn page

However if you are using anything not directly based on XMLHttpRequest or explicitly node aware (like superagent) you will probably need to shim the library function itself.

Other work to do on this snippet would be implementing errors and different content types.