Meteor.js - How to implement different templates on a cross-platform app

Question

I'd like to build a cross-platform app iOS app, Android app, and web app (using Meteor up.

According to this post on Medium.com :

Just because your app runs cross-platform doesn’t mean it feels cross-platform. Your app also needs a ‘cross-platform’ UI.

This post presents us Meteoric as an answer to this problem, which is basically Meteor + Ionic. I like the idea behind it, but I'm not sure about the utility (for me) to use a framework for it (Ionic).

What I'd like is to simply be able to swap templates depending on the platform I'm building for.

An example would be more speaking. Let's say I have a templates.html file:

<template name="template_ios">
   <h1>This is my iOS template</h1>
</template>

<template name="template_android">
   <h1>This is my Android template</h1>
</template>

<template name="template_web">
   <h1>This is my Web template</h1>
</template>

Then when I run meteor run ios I'd like to use the template_ios. When I run meteor run android then my template would be template_android. And when I run mup deploy then it would use template_web

---

I'm thinking about a solution, but I feel it's not proper / optimized.

To me, the server code should be the same anyway.

I would have a client folder for each platform, containing templates for the targeted platform. I would then have to swap template folders before any build.

But this operation could be misleading.

My ultimate goal is to have only one code for all platforms, in order to easily maintain and update the app.

Does anyone has a clue how to achieve this? Every idea is welcome.

Answer 1

As the commenter wrote this is a recurring question.

One option is to use a cordova only package and a Web only package.

Another option is to start a whole new app for the cordova app that shares server and other common code using symlinks with the web app. I like this approach more because it means I can debug both apps as regular Web apps. One thing you lose is hot reload when you publish your cordova app like this, but packages have been created to take care of this problem.

I think what we really need is a solution on Meteor's end and I'm hoping we'll get this soon.

Also, with regard to iOS vs android code, meteoric (ionic framework packaged for meteor) deals with it using the isAndroid template helper.