native addons: extending React with JXcore node.JS

[jsbee]

Jxcore runs node.js apps on iOS and almost everywhere else. There is a sample Cordova plugin project here . This sample project is much like a proof of concept. I would like to work on a possible React addon.

I've checked most of the source codes. It's not that tricky to bring node.js support into React apps using jxcore's native interface. But instead of making this effort on a fork, I would like to do it as an addon. Is it possible to develop native addons for React? Otherwise please consider this as a feature request.

[vjeux]

it seems like jxcore is handling packaging js files and the js vm. Those are very integrated in React Native and seem pretty hard to plug and play at first glance. Can you tell us more about why you want to use jxcore? Do you have some use cases in mind?

[notduncansmith]

If JXCore allows us to run Node.js code that wouldn't otherwise be possible to run in React Native (e.g. PouchDB), that would unlock thousands of libraries for use in RN projects and would obviously be a huge gain for the project. Determining whether that would in fact be the case, and whether it's worth the implementation effort, is another question of course, and one that would have to be answered at least in part by the React Native core team.

[jsbee]

it seems like jxcore is handling packaging js files and the js vm. Those are very integrated in React Native and seem pretty hard to plug and play at first glance.
@vjeux Why use JS engine from JXcore? We just need a bridge between JXcore and React-Native. JXcore instance only take a part for an application using node.js related stuff. I don't think it would require much change on react-native.

If JXCore allows us to run Node.js code that wouldn't otherwise be possible to run in React Native (e.g. PouchDB), that would unlock thousands of libraries for use in RN projects and would obviously be a huge gain for the project.

@notduncansmith That's what I'm after. I couldn't find the link yet but a guy from Microsoft recently made a benchmark (PouchDB, JXcore) on iPhone 6 using PouchDB benchmark. I can say that the result was remarkable. He simply run the benchmark on iPhone that was originally designed for Desktop.

[vjeux]

This is the first time I've ever heard of JXCore and I still am not quite sure what it exactly does but if the interface is asynchronous and you can run it from obj-c, then it is possible to make a plugin for it: http://facebook.github.io/react-native/docs/nativemodulesios.html#content

[ktrzeciaknubisa]

Hi guys,

couldn't find the link yet but a guy from Microsoft recently made a benchmark

@jsbee did you mean this one?: Looking at JXCore’s perf

This is the first time I've ever heard of JXCore and I still am not quite sure what it exactly does

@vjeux JXcore is a fork of node.js, but brings much more to the table. For example it can be compiled not only against V8 engine, but also SpiderMonkey, which opens the way to run node.js app on iOS devices (as @jsbee mentioned). Also runs on Android, if we speak about mobiles. Besides, no matter where it runs, it gives to the user wide range of new features, like multitasking (tasks running on different threads/instances within single process), packaging (which you have already noticed) - a single jx package, which can hold entire node solution can be executed as it would be a .js file.

[urbien]

Integration of jxcore with React Native is a fantastic way to launch jxcore project into the stratosphere. There is an unbounded interest in React Native. Our own initial React Native app on iOS shows that this is all we have been dreaming of since iPhone came out and never managed to achieve with the phonegap and 1000 tricks to make HTML5 work like native. I personally spent many years on my life on that. React Native is great compromise and works amazingly well.
Yet we develop most of our modules in node now, and node-webkit is just not working on mobiles. Hence JXcore. JXcore + React Native is heaven to us.
Specifically we need net and dgram modules working in React Native + JXcore. Why? Because we are developing P2P apps, specifically, bitcoin + bittorrent and ethereum + bittorrent apps.

There is a way to wrap native iOS modules in React Native

@jsbee may be you can join forces with this guy?

We will also need a LevelDown polyfill for React Native's AsyncStorage

[frantic]

Do you want to (a) use JXcore as runtime for React Native or (b) just communicate with JXcore from React Native running on JSC?

For (a), it should be pretty easy to do. See RCTJavaScriptExecutor protocol, basically it's 3 async functions you need to implement, that boil down to something like:

eval(code: string, callback: (result_json: string) => void)

See list of runtimes we currently support.

For (b) - it's even easier, you can just expose a native module.

[urbien]

@frantic after giving it some thought, I think for our project needs we will just use browserify and implement nodejs modules like dgram and net ourselves using Native Module iOS facility React Native provides and will create a levelDB (levelup/leveldown) polyfill on top of AsyncStorage. We used the same approach successfully with Chrome Apps. If you know of anyone working on these 3 modules, please connect us! If you know of a group that cares for Node development under React Native, please share a link.

[brentvatne]

Did anyone manage to get this working? Can we see it on Github anywhere?

[urbien]

@brentvatne As stated in my prior comment, we proceeded to implement a subset of node.js modules in React Native iOS environment.

• AsyncStorage as a leveldown module and a small wrapper for level apps.
• a UDP module compatible with Node.js Dgram
• forked and adjusted FS module on top of level API
• adapted DNS module to Node compliant API
• adapted uTP module that works on top of UDP module to provide Node.js's NET module semantics for reliable transport, as an equivalent to TCP.
• had to add socket multiplexing for NAT traversal support (ask me more about it)
• adapted rUDP module, but it does not provide NET module API.

We had to overcome an issue with React Native packager. Another problem with it was that it does not support replacing core node.js modules with browserified versions of it. We used react-native-webpack-server to overcome this problem and we still had to hack our way through.

I would love to be able to relay our pain to React Native devs so that the npm can be made to work well in React Native. Despite the difficulties we love React Native and are committing all our resources to make this a premier development environment for distributed apps (Dapps). This includes Bitcoin, Ethereum, Bittorrent, DHT access on mobile from React Native environment.

[urbien]

unresolved issue is with a good source of randomness, see the issue we opened for it
Can anyone help?

[jacobbubu]

@urbien , can you share something more about how to combine browserify and react-native-webpack-server together?

[urbien]

@mvayngrib was doing actual work on that, I will ask him to describe it. Main problems were with replacing node core modules with their specific browserified versions. I do not think we achieved a 100% kosher result since as far as I recall, there is not way to specify anything but a 'browser' target, so you can't provide a 'react-native' version of a core module and a 'chrome-app' version of it, which is what we needed.

[mvayngrib]

@jacobbubu, @urbien react-native-webpack-server will let you use all the node core lib shims mapped in node-libs-browser out of the box.

If you want to use others, like fs, dgram, dns, net, and maybe some others, you can use my fork of node-libs-browser, or create your own fork. My devDeps in package.json look something like:

  ...
  "node-libs-browser": "git://github.com/mvayngrib/react-native-node-libs",
  "react-native-webpack-server": "^0.2.0",
  ...

I've opened an issue with the node-libs-browser guys on how to make this switcheroo more elegant, but they haven't responded yet.

Edit: If you're specifically interested in using browserify (as I was initially), you'll need to do some research on how to hook thinks up to the react-native system - at which url to serve the bundle, etc. You'll need beefy instead of webpack-dev-server, babelify instead of babel-loader.

As for combining browserify and react-native-webpack-server, that sounds like a painful prospect. Better study react-native-webpack-server's internals and see if you can adjust it to work for browserify.