Hybrid JavaScript Mobile Development - Apache Cordova vs Capacitor with Ionic vs NativeScript vs React Native

Question

First of all, hope so this question is not too broad. Coming from front-end background I'm thinking to start learning one of JavaScript-related frameworks for mobile development. And here comes the first question, shall I go with Apache Cordova or Capacitor? The first on I've used for Phaser (HTML5) Game Development as a hobby project, not the best experience to be honest. I could feel why Apache Cordova is one of the most hated technologies according to Stack Overflow annual reports.

Then comes the second question, shall I go with Ionic, NativeScript or React Native? React is the only one front-end framework from the "big 3" which I don't feel comfortable so far. My experience with Angular and Vue.js are rather positive and would like to use any of these in my mobile apps projects as well, therfore I'm a bit biased into Ionic or NativeScript. On the other side, React Native has the most GitHub stars. I think there might be a reason for that.

Then the last one, can I combine any of: Apache Cordova/Capacitor with any of: Ionic/NativeScript/React Native or there are some things which makes easier to work for example a combination of Capacitor and Ionic? The same company does this, therefore I assume it should be relatively seamless combination.

Edit:

Last one - for making PWA from the same codebase of my mobile app I'm forced to use Ionic only?

Answer 1

To some degree, the answer will depend on your own personal experience/knowledge, personal preferences (how you think and work) and, finally, any performance requirements you project may have. Like you, I have also looked into all of these frameworks and have used most of them. Any of them will ultimately get the job done. However, the one thing that I have found is that frameworks such as Cordova, which runs a web view wrapped in a native app, can have some noticeable performance issues when you try to push it. A framework which uses actual native components and compiles to native code will ultimately be more responsive. However, even then, you can find cases where it doesn't match up to natively written code. For example, I worked on a project a little over a year ago where we started with React Native. Everything was fine until we started trying to do some realtime map animation with geolocation and user interaction. At that point, we started to see lag and stuttering, even on brand new devices. For that project, we ultimately bit the bullet and started over in pure native. We were simply asking too much of the framework.

Currently, I'm working on a project using NativeScript with Vue. And, so far, I'm pretty giddy with it. Like you, I am a fan of VueJS, largely because I like how Vuex and overall data binding are handled. There were definitely some learning curves and paradigms to get my head around, but I started to hit a stride after a week or so. That being said, I have yet to really push the framework with anything like complex animations. But it is a mature framework, it is well documented and has an active community (I joined the Slack workspace pretty much immediately). And I absolutely love the fact that it doesn't have an opinion about if/what framework you should use. Vanilla JavaScript, React, Angular, Vue...it just doesn't care.

If you are concerned at all about ramping up other developers on the project, in the future, there are definitely more people out there familiar with React Native. Then again, any developer worth their salt should be able to ramp up on a new framework without too much difficulty. If you are considering NativeScript, I'd recommend taking a look at some of the examples in the Playground and flipping through the documentation. I suspect that it will either entice you or repel you. That being said, I don't really have any complaints about any of the other frameworks that are out there. Some are just more appropriate for certain kinds of apps than others.

Good luck!

Answer 2

I'm struggling with the same here. My answers:

1. Capacitor, no doubt about it.
2. NativeScript is superior to the rest. Pure native code and let you code share between angular web and mobile. My choice.
3. You can, but that really depends on the case. For general purpose (forms), any will do. I suggest, choose one and stick to it as much as you can.
4. You have NativeScript code share with Angular (works excellent!) and Capacitor.

I think I'm moving into Capacitor because of the nature of my project: simple business from app for both web and mobile with single code -> simple webview will do.

PS: Quasar is the only option if you need to address all those targets. If you only mean web and mobile, most of them will do and really depends on your project needs and preferences.