You can’t beat a single code-base and not having to provide a separate API for native mobile apps. Development and maintenance is a dream. The best bit is hot-code-push though - from a single deploy I update all my web, iOS and Android clients. No need to update app store releases and lengthy Apple reviews every time. Means you can easily do quick development cycles rather then waiting until you’ve got enough to bother with a new release.
Using a Material Design library (Vuetify) makes it easy to develop UI which looks great and works briliantly on all devices.
I’m using SSR with Vue, and even added pre-caching and critical CSS to make my landing pages extra fast. I don’t use SSR on logged-in routes though, I only use it on my sales pages. As @mullojo says, it increases load on the server. For my logged-in users SSR isn’t really necessary because they probably have all the app.js, css, and even any pre-visited code-split routes cached in their browser or bundled into the apps, so loading is quick. You only really need SSR on certain pages where you want new visitors to get a quick load time. If those pages are static then you can cache it (as I’ve done), if not you can SSR on demand with hydration.
Have fun! (and it is fun - I have zero frustration points with this setup).
Now I’ve read @mullojo’s post a bit more closely, and looked as his demo I’m super impressed with his usage of PWA instead of Cordova!
For a suitable project PWA would definitely be easier than Cordova. However, here’s why I need/use Cordova instead:
Some users just don’t get PWAs. I had “Add to Homescreen” working on Android and iOS long before I had apps, but user’s would still ask if I had apps for Android and iOS, so I built with Cordova just to shut them up
Later I needed to use some Cordova plugins, particularly background gelocation so my app can track Lone Worker safety even when their phone is in their pocket.
I’m pretty sure I’ll eventually add Cordova to my stack for those same reasons Just another reason I love Meteor. I still have to see how more people “handle” the PWA install idea since it is still so new for most people. And Apple has really dragged their feet on PWA “awareness”, but almost any app today should include PWA support as a base design requirement. All the big platforms are quietly adding it.
For most apps I’d definitely recommend PWA over Cordova at this point. Or to put it in other words, I’d look at options beyond PWA only after I have determined that the app at hand absolutely must have some feature that PWA does not support right now and will not in the foreseeable future. Most apps don’t have such requirements. With PWA:
you’ll move really fast, it’s truly the same code running on all platforms
in addition to getting installations on phones, you’ll also get the same feature on desktops - the app will run in a separate window with the browser UI hidden (you can check it out here in the forum, in chrome there’s an install button at the right edge of the url field)
you don’t rely on a very complex system that is Cordova and its integration with Meteor
an often overlooked side effect of PWAs - you will not subject yourself to the pain that is the App/Play store and their control. Deploy code when you want and how often you want.
Like wildhart said, users not “getting” PWAs is a thing. But this can also be mitigated. It is possible to override the browser’s default PWA installation flow (the ‘Add to home screen’ popup) with the beforeinstallprompt event and handle the installation process in your own UI instead.
I agree with this, I’m also pushing for PWAs over Cordova and Native. Once iOS implements notifications, I don’t see a reason at all to go the native for most of the apps.
Here’s a real-world example of life on the other side (without Meteor or Cordova)…
I have a new job (yay!) and I’ve inherited another project - I’m responsible for the node+mongoose backend and Vue frontend, a colleague is responsible for the native iOS app. There are various collections referencing each other by _id, which need to be displayed to the users, and also some calculated fields (e.g one document isActive if it is used by an active document in another collection). Typical stuff.
I have asked to do the reactive joins and computed properties in the client because it’s super easy (particularly using Vue), but heavy lifting for the server, particularly making sure the isActive fields are kept up-to-date.
However, the other dev has asked if we can do all that on the server so he doesn’t have to reproduce the joins/computed fields in swift which doesn’t make it as easy for him. And I see his point.
But jeez, I wish we could use Meteor+(Cordova|PWA) for this project! Write-once-run-anywhere is such a time saver. We’re both having to reproduce ALL the client UI. Gonna try harder on Monday, but I think it’s too late to convert this project to Meteor…
We are dropping Meteor+Cordova in favor of PWA. We started our company with a couple of Meteor + Cordova apps. And after doing some SWOT analysis, we have concluded that us and our users will benefit a lot for choosing PWA over Cordova.
The biggest negative that we will lose is IOS push notifications (as @alawi mentioned) but the benefits of doing PWA for us far outweighs this negative. And we are bullish that iOS will support it before the end of the year.
We also highly recommends SSR (+inline css, +fast-render-like data) especially if you will get a lot of traffic from SEO. Achieving a one-render hydration without data query is amazing
I knew PWA was supported on smartphones – with somewhat limited support on IOS for the time being – but I didn’t know until I read your post that it was supported on OS X desktop. I installed Journalistic. Amazing!
That is an easy answer. Each page in our site has a url. And thus available in search.
We connect property buyers to brokers and agents. Buyers will easily find the properties through a Google/Bing search. It benefits both buyers and sellers. In a cordova app, the app download is a big hurdle.
Also, there is an indirect benefit to users when developers can have more time improving one system than dividing time in maintaining two separate ones.
I’m totally in favor of Meteor+Cordova.
I tried with PWA, and although functionality was the same (I didn’t check PushNotifications, though), final users were asking to get it from the stores. May be in the future where/if final users are more used to PWA (instead of stores) will consider PWA again.
Meteor+Cordova having the Hot Code Push make it also great for quick improvements without waiting for the stores approval/updates.
It depends on the the app you are building and how you plan to market it.
Some of us here are building enterprise apps and there is no need to put in the stores, some running websites and just want to improve the mobile experience.
Now for the consumer apps, yes , this is what the most consumers currently accustomed to, however keep in mind few things:
App stores (Google and Apple) are getting extremely saturated with many VC funded apps and there is a very strong long-tail effect and strong competition on price
PWA installation is in fact better experience then native apps, it is just apple slowing adoption and consumers are not used to it
there are many PWA stores already popping up
you can distribute PWA app in Play and Microsoft stores
the update process is out of the control of the developers, over the air push is a hack that could be stopped anytime
To sum the only reason why PWA is still not mainstream is consumer familiarity and Apple.
So I would encourage developers to go with PWA whenever they can to break the stores dominance and save themselves money and time unless they absolutely need to go to those stores.
I for one can’t wait to get rid of the Play/Apple stores duopoly, we spend large money on these hardwares, we deserve more options.
just today, I tried to run the todos meteor svelte repo on mobile. Because I was thinking svelte should be the best option for mobile since the performance and what is not. However, I could not get the app to work. The app just shows an empty screen in the emulator and even that happened after spending sometime with preparing all of the prerequisites. First, it complained about jdk so I installed the latest version then it complained jdk must be v8 so I tried to find a download link for jdk 8 that is not from the official orcale website cuz I don’t wanna sign up for that crap company then it complained about Android studio not being installed which it was but gave me a choice to install Gradle instead so installed gardle. Basically, I do not think mobile meteor svelte is ready for production. Maybe I missed something important, the prerequisites are normal and no big deal but I hated that I wasted so much time but at the same time that white empty screen is just not a good first impression
Now I would like to try build Mobile App to support Meteor Vue Project.
I am checking React Native, Native Script Vue, Fluter and Meteor Mobile.
But not clear, Bc I am a new bit for Mobile App.
Could you advise???
Hi @theara there are several ways to build a mobile app with Meteor, I’ll list them out for clarity & stick to just Vue as a front end:
Web-app:
PWA (Progressive Web App)
Cordova
Native-app:
Vue Native Script uses React Native under the hood
I would start with the PWA approach because if you designed your app already to work on a mobile phone from a design & responsiveness standpoint, you will have the least amount of work to do.
You can then also use Cordova (aka traditional Meteor Mobile) to get your Vue PWA app into Google & Apple App stores as you can pretty easily add a Cordova version of your existing Web-app too.
You will have to write a 100% new front-end for your app if you go with a route like Vue Native Script and you might only do this because you want to access more of the features that phones support in native apps. In this case Meteor would only be used as your backend and you might want to use a package like Simple DDP. WIth Simple DDP, you can write any type of truly native iOS or Android app, or use Fluter, or React Native directly.
I hope this gives you some of what you are looking for. I’m using Vue + Meteor w/ a PWA to get a desktop installable app and mobile installable app. Check out PWAs because they will probably blow your mind. Check out this Vue PWS mobile app to see an example and learn what the install process is like for users vs. the traditional apps stores.
@mullojo, thank for your reply
Excuse me, I don’t understand Web-App (PWA, Cordova)?
Or it mean that we could build Mobile App from Meteor App directly (Web Viewer)?
A PWA is a version of a Web-App that meets PWA standards, it’s just adding some extra things to your existing app. We’re going to add a PWA section to the Meteor Docs soon.
Cordova is a special build of your Web-App that compiles it to use web viewers from Chrome & Safari to build a “mobile store” app, but it’s still just a Web-App with some extras. Check the Meteor Docs for more on that.
Just another reason I love Meteor. I still have to see how more people “handle” the PWA install idea since it is still so new for most people. And Apple has really dragged their feet on PWA “awareness”, but almost any app today should include PWA support as a base design requirement. All the big platforms are quietly adding it.