Integrating NativeScript, React Native, and Cordova (through WebPack)

I’ve been looking at what it would take to build an app on Meteor with either Svelte Native (which uses NativeScript) or React Native. I looked at a number of third party connectors like asteroid - these seem like the easiest way to set up, but maybe not the best because they are in various states of abandoned decay, and they are not the core code. I wanted to see if I could use the Meteor code directly, since that would get me first-class support.

Svelte Native and React Native use WebPack to build their bundles. So the strategy I’ve been using is to use meteor-import-webpack-plugin (this webpack4 branch in particular), which basically uses a meteor project that you put in a subfolder as an organ donor to pull out the packages you need. The way it’s put together has a few limitations (and a bug I needed to fix on Windows).

The first limitation I already mentioned. I wanted to be able to stick a full meteor web project as a sub-module in the project, and pull out the packages I need directly from that, and share some of the imports code - data connectors and the like. But it doesn’t really work that way. The plugin pulls in all of the meteor packages from the meteor project at once, rather than cherry picking just the ones you import in the native project. Many of those assume a DOM, and will throw various errors.

That’s the second limitation. Much of the Meteor code assumes it’ll run in a browser, and tries to access various windows and document APIs like location and load event stuff. These were relatively easy to polyfill, and some of the packages could just be removed. I’m still working through this, as there are now some packages failing on some missing DOM objects (specifically, modules tries to insert some styles into the head of document, which is not there).

Another tool I’ll probably end up taking a look at is ardatan:webpack.

Broadly speaking, I like the idea of this approach, though I still need to prove the idea. I’d like to see a way to pull Meteor packages, and modules from a Meteor project, linked in as a sub-module (or even just a sub-folder in the git repo) into a parent project which uses another build system. It might actually be possible to iterate from meteor-imports-webpack-plugin to get it to only pull in the packages and modules we need (or maybe ardatan:webpack already does that?) I think this will work for NativeScript and React Native. I also wonder whether it could work for Cordova, and maybe shows a way to move forward with Cordova, without having the Meteor abstraction on top of it.

In this way, it should be possible to create a standard to do this with third party packaging systems, in some kind of officially supported way -as long as it’s not too hacky. Changes in core would be minimal - we’d just have to add some hooks to allow the DOM assumptions to be mitigated.

Some of this is vague, but what do you think?

3 Likes

I ended hitting a wall in this, because so much of Meteors client core assumes a browser context. For React Native there is a meteor client pilyfill which does the trick to smooth that all over, but there is nothing similar for NativeScript/SvelteNative. It’s also kind of a pain to get it all working together with WebPack.

What would be ideal would be something Ben Newman recently described, which would be a new build target for Meteor, where Meteor’s build tool does the bundle build itself for React Native (Metro) or NativeScript. This way we can even have hot code push in production like we do for Cordova. That’s be slick, and I wonder if effort would be better spent on something like that than hobbling these tools together.

1 Like