Building a hybrid Meteor Cordova app: share experiences?

mobile
70

@daveeel could you give me some tips or sample code for rendering templates, please!
@davethe0nly could you give us some sample code. Not your app code. Just transition code maybe. please! I am newbie with this.

71

Honestly fancy UI transition are not my priority since the app is used in house for the moment and even in the future, it’s on the bottom of my bucket list.

Although, if you want transitions, there are probably packages for both routers (use flow, it’s superior as of now). The F7 native ones are probably of the table since they use the inbuilt router (correct me if I’m wrong).

72

Hi all,

Just wanted to share a recent experience with building a cordova app that needed to connect with an existing Meteor backend. Initially I had created a package only architecture to serve different UI’s to both the browser and to cordova.

This started to get quite sluggish, so I re-assessed and moved my cordova application into a separate project entirely, and used a couple of techniques to connect this app with the main Meteor application.

In order to benefit from hot code pushes once the cordova app is in production, both applications would have to be hosted independently with their own URL, but the Cordova app would need to be hooked into the backend of the master app (via DDP).

Both apps are built with React, and the mobile app using using Redux as a client side data store.

The main components are as follows:

So in reality this manifested in a series of setup steps on the client side of the cordova app.

The first is to connect via DDP to the master app, I placed this inside client/lib/bootstrap.js

[]: client/lib/bootstrap.js

const remote = 'https://app-dashboard.modulus.bz'

And then pass this connection down to instantiate new instances of the collections that you know already exist inside the master application:

[]: client/lib/bootstrap.js

Meteor.users = new Mongo.Collection('users', { connection: remote })
Messages = new Mongo.Collection('messages', { connection: remote })

So now we have our core data connected with our master app, the next step is to subscribe to that data, and make sure that we are receiving any updates that happen to occur to that data. We’ll put all this inside a Tracker.autorun function, living inside a Meteor.startup block on the client to enable reactivity, as well as passing any callbacks to handle that change of data (in this case, alerting our store that data has changed):

[]: client/lib/startup.js

Tracker.autorun(() => {
  // Subscribe to users
  remote.subscribe('users')

  // Subscribe to messages, and fire an update action when things change
  remote.subscribe('messages', () => {
    store.dispatch(updateMessages())
  })
})

As well as this, the cordova app needed to call a couple of server methods in the master application. A main feature was messaging, so I need to be able to call the ‘insertMessage’ method on the server.

This is very similar to subscribing to collections, instead of using Meteor.call, we use remote.call:

For example:

remote.call('insertMessage', 'Hi Ryen :D', Meteor.userId(), (error, result) => {
  if (error) {
    // However you want to handle error state
    alert(error)
  } else {
    // However you want to handle success
    dispatch(insertMessageSuccess())
  }
})

With this in place I can be happy pushing new UI changes in the cordova app up to the server, and know that they will be hot reloaded into the production app whilst still having access to all the data and methods on the server.

Hope that helps somebody!

2 Likes
73

You really should take a look at this: Touch2s / Demo

@dinos did a great job solving this puzzle:

  • Framework7 (new in Touch2S)
  • Use TrackerReact (new in Touch2S)
  • Include the simple To-Do app example
  • ES6 modules
  • Meteor
  • React.js
  • react-router with server-side-rendering (SSR only runs on meteor run –-production! You can disable it by editing server/entry.js)
  • Webpack (bundle your app / assets and send them to Meteor)
  • Hot-reload with no page refresh in development mode
  • Optimize your code in production mode
  • Give access to NPM by using packages.json
2 Likes
74

Thanks @fabiodr, the demo is so smooth, now checking the code :sunny:

1 Like
75

I am just holding my breath a little bit for Meteor 1.3 and hot-module replacement to may drop webpack to simplify the stack… but it works well for small applications.

I updated TrackerReact and is now fully Meteor 1.3 compatible. Let’s see about Webpack - 90% of the code could be handled directly by meteor now. Thanks to modules and npm support.

PS: There is an efficient solution for smooth Routing, it’s just not implemented yet.

2 Likes
76

I took a look at the code today. Yes, I don’t hope it could be simpler in structure. I did fight with webpack loader config today as I use livescript. That would be great if Webpack could be removed in future.

77

By the way, I’m just aware that the dead Meteoric package is having a second life here: https://github.com/JoeyAndres/meteor-ionic . It should be most Meteor (Blaze) friendly way for Cordova apps. It seems to be progressing well. Only it’s still depending on Iron Router.

78

Hello,

We are a Web & Mobile apps development company. We have developed 4 mobile apps (Android & iPhone) so far using Meteor + Cordova and we love it. The same code is being used for Web & Mobile and we can deliver so quickly to our clients.

Thanks Meteor. Thanks Cordova.

79

Wow, we would be very interested in your Touch2s with Meteor 1.3 and modules. Looking forward to trying it out when it is ready.

1 Like
80

https://github.com/HedCET/TorrentAlert this is one of the best meteor polymer integration

81

Now that this thread brought together a lot of experiences and samples, what decision could be taken out from it?

I try to make it like a small survey:

  1. If you have to select between Framework7 or Semantic UI - what would you take?

  2. If you use React, is it better to use Material-UI than F7 or Semantic UI?

  3. If you use React and Material-UI, what do you choose to make an IOS (designed) App?

For my personal opinion:

F7 is a great CSS Framework you can use to create hybrid and OS like looking apps.

Semantic-UI is well designed but more “designed-Elements” and “lighter” than Framework7

Material-UI is great (and light) if you do not have to deliver IOS looking apps

Thanks to get some resumes from you.

Cheers
Tom

82

Good idea :slight_smile:

Personally, I am still using Blaze and plain old bootstrap to build guzz.io, with some eclectic elements from Semantic UI and things like Switchery (to mimic iOS switches). I tried out F7, but did not get it to work with Meteor within reasonable time, so I gave up. I like the Material Design concept, but Materialize wasn’t well designed, so I only used some of its SASS elements to get the right colors and such. Plus, I need to support iOS as well, so Material Design would mean double-work. Would love to see a framework that integrates seamlessly into Meteor, though. For guzz.io, which has its own style, it wouldn’t be my first choice, but for more business-oriented apps this would be great.

83

What about Ionic? It is out there for a long time and very robust. It works with Meteor out of the box with Angular, with React (React-Ionic) and with Blaze (Meteoric).

Disclaimer, React-Ionic is my project :slight_smile:

84

I’m working on it but still have a little issue with the animation speed! Check out “webase”

85

I am using Onsen UI and it works great. With the same code I make the iOS ui and the Material UI.

1 Like
86

Thanks for the info about Onsen UI, did now know this, looks promising!

87

I got quite impressive for this movement integrating with F7.
Because after I was trying to use Ionic(Meteoric) and some other Front-End framework, I realize F7 is quite focussing on UI things without data combining.

What I want is just use Blaze.js for front-end framework and integrate mobile UI in it simply.

Does this F7 integration keep going on? or just stopped for Onsen UI or whatever?

88

Hey @waldgeist, I’m trying to build a hybrid Meteor Cordova app (Android only)? I’ve just started to learn Meteor and Cordova, so I don’t know where to start. Could you give me some hints?

89

hi @buiquanghuy23103, I did not do much Cordova-related dev work in the past year, but a good starting point are the Meteor To Do sample app

and the mobile section of the Meteor guide

Be prepared to face some quirks, as the core Meteor team seemed to have some challenges keeping up with the fast pace the mobile world evolved, with a lot of breaking changes inside Cordova itself over time and in iOS in particular, due to changes made by Apple.

In my own Meteor Cordova app, the most challenging parts were the implementation of WebRTC (due to the lack of its support in iOS) and push notifications. And every once in a while, Apple changed the way the icons were maintained, which quite often broke the builds.

Please also note that it’s not easy to create a Cordova app that resembles a somewhat native experience. Initially, I thought that might not be much of an issue (and I wouldn’t have had the time to develop things three times, for Android, iOS and the web), but for most Cordova apps, I can tell right of the first taps that they were built with it. It’s getting better on more recent devices, but still.

You could also research a bit on frameworks built on top of Cordova (like Ionic, not sure if it’s still using Cordova under the hood), but it is (or at least was when I looked the last time) not easy to find instructions about how to get them integrated with Meteor. IIRC, Ionic had its own router, which I could not figure out to work with Meteor when I tried. But things may have changed a lot since I did my own researches.

1 Like