Separating code for different clients

Hello!

I’ve got a Meteor app that I want to make mobile versions of. I already have a web version, which is more than half a meg js+css, and I do not want to add any more heft to that. I would rather not create an entirely new meteor app just for an android/ios version. Is there a way to separate out the code for the clients?

Any ideas? How do people usually do this? I am sure Meteor must offer some way to solve this very obvious and glaring issue, otherwise using Meteor for mobile apps just does not make sense.

Can someone from MDG answer this? I think this is a rather huge problem for Meteor if there isn’t a solution.

What’s keeping you from just using the same codebase for mobile as well? You can use Meteor.isCordova to target mobile and of course there are ways using the user agent to tell if it’s android or ios, so you can adjust code or css classes depending on the platform.

The design of the app is completely different on Android. So there will be a lot of CSS and JS added for mobile. I do not want to send this code down to browser as it will take up a lot of bandwidth and slow down the loading of the page. That is my main concern. I can use .isCordova but that is a different thing than what I’m concerned about here.

So your concern is the code for mobile will be included in the web version right? Honestly that shouldn’t impact your page load much, unless we’re talking 10000’s of lines of code for the mobile version or similar.

A possible solution is to lazy load resources as necessary, but if you’re so concerned about resources creating a separate app might be a better solution: https://atmospherejs.com/numtel/lazy-bundles

I already have a web version, which is more than half a meg js+css, and I do not want to add any more heft to that

I don’t know the solution, but why are you worried about half a meg ? Just curious.

Most of my users are gonna be on low bandwidth connections with high latency, and the page takes around 10 seconds to load right now. I have done my analysis, and it is the fetching of resources from the server which is taking up most of that time, so the half meg is the problem.

My own code won’t be that much for sure to start off, but the libraries I might include, like Ionic, and other mobile specific libraries could add up to quite a lot, since libraries built for mobile will not be as concerned about size as ones built for web. Thanks for the lazy bundles link, it is not compatble with Meteor > 1.1 though, it seems.

see this demo repo
you can move out your common code into shared local pacakges.

you may need to set the PACKAGE_DIRS env if you put local packages outside the app folder like this demo repo.

Thanks for the link. I don’t believe this is the optimal solution though, as creating two different apps is the last thing I want to do.

My solution has been to use webpack via https://github.com/thereactivestack/meteor-webpack which means I can use webpack’s codesplitting.

I’d like it even better if I could have multiple entry points but that approach doesn’t seem to be compatible with meteor yet.

Yeah, doesn’t seem to have an entry point for mobile. What about React Native apps? How do I separate code for that? A “cordova” folder would be a really great option with Meteor.