I am soon to embark on a project that requires the following:
Web site
Mobile web access
Mobile app iOS/Android
The project is a showcase for geographically distributed landmarks and requires basic picture/info display with the possibility for users to comment, upload their own photos, share on social media etc.
Being quite proficient in React, and having gone through some online Meteor courses, I would like to use this platform for some of it’s out-of-box features.
My main dilemma is the mobile app aspect: should I use React native, or go the Cordova pathway, thus reusing chunks of the mobile web app?
My front-end design skills are less than profound so I’ll probably rely on bootstrap for the Desktop/mobile web styling.
Since the client is a non-profit, costs should be kept to a minimum, preferably having a common host server for all platforms.
I’d appreciate the advice of more experienced Meteor developers.
You might want to consider “meteoric” (an ionic port). It is no longer actively supported, but mature enough to use with some really nice features. For cheap, quick and dirty, it’s an easy call. You can look at BoomLearning.com for an example. The popup dialog boxes, slider menu and tab navigation come from meteoric. The best part is… The app looks good on Android/ios/web all running the same code with minimal hacks and special cases for browsers/platform.
Thanks for the recommendation, I was aware of Spencer Carli’s work, just never had time to read through his posts in detail. I’m glad to discover that there is such a thing as react-native-meteor which seems to solve pub/sub integration quite handsomely.
I remember reading about the Ionic framework back in the Angular 1.x days, but never had a chance to use it. The Reactionic seems like port of meteoric.
Now, 'scuse my ignorance, but I was under the impression that Ionic components are not used for web-site rendering, just mobile web-view, thus requiring a separate code base. Is this not the case?
You’re right…and I’m not aware of a single solution for device/screen fragmentation. For react theres React Native Web which tries to bridge the desktop gap (mobile gap is so 3 years ago…)
Perhaps decide if you’re project is desktop or mobile ‘first’… what device will your clients end users be using mostly. Is there need for the hurdle of an app install or would a web app bring better adoption? etc etc
Finally, if you go with React Native, check out Exponent
For now, I’m leaning towards the React Native route, assuming from Spencer’s presentation that it’s possible to have one pub-server handle web and native subscribers. I guess having a single client code base was a long shot, but a deciding factor would be to at least have meteor accounts available in the mobile framework. React, at the moment, uses a wrapper for the Blaze accounts component. I’ll have to investigate if the same is possible in React Native.
As i mentioned…until Apollo is ‘ready’ (or I am for Apollo), it all starts to pull one away from Meteor… so for auth: Stormpath/Auth0, etc etc
Miss the old days and hope Apollo/meteor npm will bring the magic back soon…
For the front end, I’d love to see web components… but thats gonna be some time off isn’t it (politics/bureacracy of committees)
I don’t know anything about Reactionic, but Meteoric runs everywhere. And adjusts the style to match the platform. (looks like Android on Android, iOS on iPhone) We also changed some of the css to make subtle changes to suit our tastes.
Because costs matter, i would start with the cordova path.
You still could later exchange the mobile app with a react-native one.
As for UI: Ionic has some nice default mobile elements, but it’s made for angular and i am not sure about the state of its react-clone. So if you want to use ionic, better use it with angular.
If you want to go with react, there is material-ui and react-bootstrap which are really easy-to-use, but they have not as many mobile optimized layouts and elements as ionic, but i think its enough for a showcase.
TL;DR if you don’t need your mobile app to look exactly like a native app then Cordova/React/Material-UI allows you to build both a decent mobile app and web app from the same UI code base.
We’ve been developing our app for 1.5 years. We are in private beta https://clozer.ai/ Our app is a B2B sales app that integrates with Salesforce.com and is built on machine intelligence and our requirements are to have the app run on iOS, Android and web browser. We are generally less concerned with our app looking or feeling like a native app, but instead more concerned that our app behaves the same across platforms, especially from mobile to web. We also wanted to be able to share as much business logic, and ui code if possible, across the various platforms.
We initially started with Meteor 1.1/IronRouter/Cordova/Blaze/Meteoric for the mobile apps. However, this did not give us a good solution for web, and even though Meteoric generally worked, it was orphaned with no long term development and not real path forward.
When Meteor 1.3 came out we did a complete refactor of our app to ES2015 import/export structure along with a complete re-write of our client code to React/Material-UI. You can get more info on our we structure our app here.
We like the clean aspects of Material Design, but did consider pretty strongly React Bootstrap and the aforementioned Reactionic project. Reactionic had the same issues as Meteoric and as I mentioned we liked Material Design better than Bootstrap. We also considered the React Toolbox, which seems like a good alternative to Material-UI (MUI), but MUI won out for various reasons including it is supported by a real company using it versus just some consultants. There were other technical reasons as well.
MUI does not have much out of the box support for mobile layouts and the components are not really designed to responsive, but they are adding more support for this in their Next branch along with a better styling option using JSS, which we think is an elegant solution for styling long term. We were able to achieve our needs for different layouts on mobile and web by writing some layout components that use MUI’s withWidth utility and some other simple tricks so that we can build/run on web and mobile from the same code base. I’ve attached a couple of screenshots so you get the idea.
We also considered React Native, but did not feel the performance or native feel was worth the difference in development process and having a completely different code base for mobile. We have not ruled this out long term though.
Thank you for the detailed reply. My app will probably require less functionality than yours (looks really good btw) as it’ll mostly be based on showing pictures and user comments. I have quite a bit of experience with React-bootstrap but Material Design looks promising so I’ll give it a shot.
One reason for my dilemma is that I’ve very rarely come across a discussion of React+Cordova, without it quickly turning into a “Why not use React-Native instead?”.
