Building a hybrid Meteor Cordova app: share experiences?

mbrookes · November 5, 2015, 1:27pm

I had reached the same conclusion! I would love to share code and ideas. Do you have anything you can make public by way of example app?

mishoboss · November 5, 2015, 1:29pm

Hi, not yet. I’m still trying to figure out the whole thing. I’m new to all 3 of them - Meteor, React and Framework7. I’m still on a “breaking stuff to see how it works” stage.

korus90 · November 5, 2015, 2:04pm

I would also be very interested in what you come up with so +1 on an example app when you have the time / knowledge!

XTA · November 23, 2015, 11:54am

Hey guys,
did anybody got it running with the F7 router yet? I’m just switched over to iOS development and now seeing that we miss the “swipe back” gesture, which is used by the most of the iOS apps. I could implement one by HammerJS, but that wouldn’t look like the native one.

daveeel · November 23, 2015, 4:52pm

I’m wondering the same question too. Currently I’m building a quiz game prototype. Still using the previous Iron Router + Velocity JS solution. Not sure for what reason the transition operation accumulates class names. So on mobile, transition speed degrades slowly because of that. While the F7 native animation like opening panel is much smooth. Even the SweetAlert animation is fluid. Luckily my app is not that dynamic and is prototype anyway …

etern1ty · February 26, 2016, 6:38am

I know this is an old thread, but any update @XTA, @daveeel on using F7 with meteor?
I plan to make a meteor + F7 app but want to use the material theme instead.
Ive cloned your repo and been running through the code but currently not sure what the best thing to focus on is?

daveeel · February 26, 2016, 8:35am

I’ve tweaked a bit more detail after the public repo. Basically the structure and direction is the same. It works reasonably well with transition on Iron router. The way you might want to focus is to reduce rendering delay on loading templates with data (on route change). If you don’t need to load data on route change, the delay of rendering would be barely noticeable. You could try do predictive subscription to minimise rendering delay.

davethe0nly · February 26, 2016, 10:13am

I’ve just built an app with F7 and Meteor. Using vanilla F7 (this package), just disabled the router and the integration is flawless! It’s a private app, so no code, sorry! But if you guys need anything, hit me up here or via PM!

isdzulqor · February 26, 2016, 6:04pm

@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.

davethe0nly · February 26, 2016, 6:26pm

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).

ryenbeatty · February 26, 2016, 8:24pm

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:

Master app hosted at ‘app-dashboard.modulus.bz’
Master database hosted on Compose
Cordova app hosted at ‘app-mobile.modulus.bz’, connected to the master app over DDP

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!

fabiodr · February 26, 2016, 11:26pm

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

daveeel · February 27, 2016, 3:50am

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

dinos · February 27, 2016, 2:03pm

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.

daveeel · February 27, 2016, 4:17pm

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.

daveeel · February 29, 2016, 9:43am

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.

deligence1 · March 1, 2016, 11:17am

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.

skirunman · March 1, 2016, 9:14pm

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.

linto · March 10, 2016, 5:16am

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

tomfreudenberg · April 29, 2016, 7:29pm

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:

If you have to select between Framework7 or Semantic UI - what would you take?
If you use React, is it better to use Material-UI than F7 or Semantic UI?
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