Javascript host environment documentation

[aackerman]

What I was lost on earliest attempting to get started with react-native was understanding the host environment. It's not Node, it's not a browser, it appears to be a raw VM context, with a whole bunch of polyfills. When I tried to require Bluebird, I ran into errors, likely due to assumptions made about APIs provided by the host environment.

Also, it would be important to know how third-party libs can run tests in the same type of environment to fix these issues.

Thanks.

[jaygarcia]

I agree that there could be some better documentation around this. For example, the "light" implementation of the CommonJS module system, should be documented, if it's not already.

(stuff is moving so quickly, it's hard for me to keep track of it all)

[daviskoh]

+1

[sahrens]

We always need more docs!

For testing in the full environment, check out the "Testing" section of the documentation - we have a harness for integration testing that should help you do what you want.

On Mar 27, 2015, at 7:38 AM, Davis Koh @daviskoh notifications@github.com wrote:

+1

—
Reply to this email directly or view it on GitHub.

[amasad]

@aackerman can you list the issues you ran into by trying to use Bluebird? Maybe we can fix those quickly.

[aackerman]

I can give more detailed info about the issue with bluebird later tonight, but in the mean time, having installed bluebird with npm install bluebird and var Promise = require('bluebird'); in index.ios.js will throw and error.

[vjeux]

Can you give the exact error?

Also note that there's a Promise global already existing in React Native

[aackerman]

It looks like a clear issue with bluebird from what I can tell.

The block in bluebird looks like this.

} else if (typeof MutationObserver !== "undefined") {
    schedule = function(fn) {
        var div = document.createElement("div");
        var observer = new MutationObserver(fn);
        observer.observe(div, {attributes: true});
        return function() { div.classList.toggle("foo"); };
    };
    schedule.isStatic = true;
} else if (typeof setTimeout !== "undefined") {

It's clearly throwing an error because the DOM is not available, but it's interesting that MutationObserver is available, otherwise it could not have made it into the block. The authors of bluebird probably didn't expect to be running in an environment that is neither node nor the browser.

@vjeux as you said a Promise implementation does exist already, and what I really wanted just simply fetch, so the bluebird issue is completely secondary to understanding the host environment.

I'll make a ticket on the bluebird repo to let them know about this particular issue, but at this point I don't think it needs to be a priority for anybody.

[vjeux]

Yeah, all those feature detection needs to be carefully considered when running in a different environment. The implementation of Promise that we have is using setImmediate that has been implemented to run before we hand back the process to obj-c

[vjeux]

By the way, fetch is there by default. It has a much nicer api than xhr :)

[petkaantonov]

MutationObserver is supposed to observe DOM elements, it doesn't make sense to expose one without the other. Also, there is not a single mention of MutationObserver in this entire repo so I am not sure how I would even fix it - what am I supposed to observe with it?

[vjeux]

This is where we mangle with the global environment. We should probably do delete GLOBAL.MutationObserver; (if we can).
https://github.com/facebook/react-native/blob/master/Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js#L117

One issue if we do this is that it's now going to use setTimeout(0), which is going to do a round trip to native for every single call. Since when you are using promises, you tend to chain a lot of then, it's going to be much slower than needed. It really needs to use setImmediate.

[petkaantonov]

I can add setImmediate check after the MutationObserver check, np :)

[vjeux]

Okay perfect. I'm trying to remove MutationObserver right now, I'll report back in 2 minutes

[vjeux]

Bingo, it's working, it now falls through the setTimeout check. I'm sending an internal diff, it'll be updated in the next version.