Why you should migrate from Ionic, Cordova, or PhoneGap to React Native (Updated)

However, with technology moving forward, they might not meet users’ expectations anymore. React Native is a good alternative that can save your app from going under.

What is hybrid app development?

Hybrid apps are developed using web technologies like HTML, CSS and Javascript, and then wrapped in a native application using mobile platforms like Cordova. The apps are shown in its own embedded browser, like UIWebView in iOS and WebView in Android (not Safari or Chrome). This allows you to use any web-native framework for mobile app development.

What is Ionic?

On the official Ionic site you can read that “Ionic is the app development platform for web developers”. You can use Ionic to build hybrid, web, and desktop apps using web technologies - HTML, CSS, and JavaScript and AngularJS or ReactJS, a frontend framework. Ionic is built on top of Apache Cordova.

Pros

Ionic has many pros and the most important one appears on its official site - you can create mobile apps without knowing platform-specific features. Moreover, you can use a wide range of components - building-blocks that adjust to the platform so that your app can imitate the native one.

To integrate with the platform's specific features, like Bluethooth or camera, you can use plugins provided by Ionic - it makes adding native functionalities to your Ionic mobile app easy.

Cons

The most important disadvantage is the performance - Ionic runs in a WebView, which makes Ionic apps relatively slow.

Secondly, although Ionic’s components adjust depending on the platform, sometimes additional work is required to provide a more native feel.

Security is the next thing you should take care of - secure your app like you would do it for web & mobile. You should also check what native features you need - not all of them are supported by plugins. If you don’t find an adequate plugin, then you have to write the code for both platforms. The last thing you should be aware of it’s debugging, which is quite complicated, so fixing bugs can be problematic.

What is Apache Cordova?

Apache Cordova is an open-source mobile cross-platform development framework. Like in the case of Ionic - it lets you build mobile apps using standard web technologies. Apps created using Apache Cordova execute in a WebView within the native application wrapper, the same as Ionic.

Pros

The most obvious one - it lets you create custom mobile apps for both major platforms without knowing the native programming languages (Java/Kotlin for Android and Objective-C/Swift for iOS). It also has a set of plugins that enable you to invoke native code from JavaScript.

Cons

The cons of Apache Cordova are similar to those of Ionic. Code running in WebView will always suffer from worse performance. Additionally, Apache Cordova doesn’t provide the kind of components Ionic does, so it has even less of a “native feel” than Ionic.

What is PhoneGap?

PhoneGap framework is a distribution of Apache Cordova. That means it’s powered by Apache Cordova, but has some extra stuff (i.e additional tools) from the Adobe team.

The basic tools are free to use, but Adobe offers more services, like for example the “PhoneGap Build Service”, which helps you get apps ready to be published on the App Store and Google Play Store without maintaining native SDKs. Adobe’s PhoneGap Build Service does this work on their side by compiling apps in the cloud (keep in mind that this service is not free).

Pros

As Apache Cordova and PhoneGap are practically the same, the pros & cons are also similar. What can be a plus of PhoneGap is that Adobe provides additional tools that you can use together with PhoneGap (like the before mentioned PhoneGap Build Service, and others: PhoneGap Developer App, the PhoneGap Desktop App, and PhoneGap Enterprise).

What is React Native?

React Native was created by Facebook in 2015 and the idea behind it is to use the React framework to build cross-platform mobile apps. It’s an open source Javascript framework that lets you create multiplatform UI components with JSX, which are then bridged to native code and converted to Android and iOS native views.

The views are native components, like in native apps, that communicate through a bridge with logic written using JavaScript. The logic runs in a JavaScript thread.

Pros

React Native has the most of the advantages among the solutions mentioned in this article. Using React Native you create cross-platform mobile apps. React Native ensures fairly good performance, and if your app is well designed and written, it can be indistinguishable from a native one. Native UI controls for sure contribute to this. Because view components are converted to native ones (they change their appearance depending on the platform), the UI has a native feel.

React Native has a huge community, so in case of any trouble you can easily find help from other app developers. You can also find many libraries - ready-made solutions for custom needs from the React community that you can use in your app to avoid creating features from scratch.

There are many packages that allow you to integrate with platform-native features and if you don’t find a ready-to-use solution, you can easily write your own native module (but this would require knowledge of the native programming language).

Cons

In comparison to the other cross-platform solutions mentioned in this article, we cannot point out any cons (React Native solves all the problems other solutions have); we can, however, name a few disadvantages compared to native apps.

The low entry threshold is both a plus and a minus - without good experience in React it is easier to make mistakes that can have a big impact on performance than in the case of native apps.

React Native is also not recommended for apps where security is really important (for example financial apps). Native solutions will always be more secure. If you plan to integrate with many native features, it’s also good to consider choosing native - React Native has many ready solutions, but they can’t cover all features. A React Native app may also not scale as well as a native one.

Differences Between Ionic vs Cordova vs PhoneGap vs React Native

Ionic, Cordova and PhoneGap are hybrid mobile apps. Cordova is a framework which runs a JavaScript app in a WebView that has additional native extensions, which is the definition of a hybrid app. Ionic is based on Cordova and comes with Angular or ReactJS. It has set of standard controls that mimic native controls. PhoneGap is a distribution of Cordova with a few custom packages and tweaks.

They are all essentially websites embedded in a mobile app through what we call a WebView, whereas apps built with React Native are not mobile web apps, HTML5 apps, or hybrid apps. They are written in JavaScript but are rendered using native components, which means that the user experience will generally be closer to other native apps, because they will conform to the standards imposed by the operating system.

React Native comes with better performance and smoother animations. In most cases using React, we can build mobile apps truly indistinguishable from apps built using Objective-C (native iOS apps) or Java (native Android apps)

Performance

The biggest problem with hybrid apps is their performance. The web was originally built for web pages, not the complex apps we produce today. Hybrid apps are going to run just fine on high-end phones but still not as smoothly as you would want. Low-end phones are where the biggest problem lies.

High user expectations

Most smartphone owners spend the majority of their time using only a few apps, and they expect any new app to be as polished as Facebook, YouTube, or Uber.

With high user expectations, hybrid apps can’t live up to such benchmarks. They offer poorer user experience with slower animations, lack of platform-specific gesture recognition, and keyboard misbehaviour.

More room for error

Another problem is that building a hybrid app, you automatically inherit all the issues that the web has. This means bugs that only appear in one or more browsers or styles working differently across different browsers.

Low popularity among big players

Another thing that the popularity of hybrid apps is on the decline. Both PhoneGap’s and Ionic’s showcases demonstrate a noticeable shortcoming in premier apps.

In contrast, the list of apps that have migrated or partially migrated from hybrid/native to React Native is long. The list includes Facebook, Instagram, Skype, and many others. It would be quite challenging to find a high-end app that has moved from native to hybrid.

Why to choose React Native? Main benefits of RN over Ionic/Cordova/PhoneGap

Better performance

The biggest benefit that React Native offers is its much better performance than in the case of hybrid apps.

Native feel

In React Native, all views are native, so apart from higher efficiency, you get the native feel with super smooth animations. On top of that, the hardware functionalities are processed by the specific platform and not by Cordova. React Native renders native views without using Webview, so you don’t have to worry about any problems with browser compatibility.

Better support

Finally, React Native is based on React, a framework with much better support – both from Facebook and the community. Thanks to the ongoing support, React Native stays up-to-date, offers higher reliability, and gives you a superior knowledge base, where you will be able to find out how to develop apps and solve problems.

See also: React Native FAQ

Wrap-up

React Native gives you the advantage of hybrid apps – that is cost-effective multiplatform development – but doesn’t bring along their disadvantages such as sluggish performance or poor user experience.

React Native has already been adopted by many big players such as Uber or Instagram, which is a social proof for its reliability. Nowadays, a successful mobile application should be fast and highly responsive. Otherwise, users will abandon it.

Building hybrid apps was good in the past, when we had limited resources and the technology wasn’t mature enough yet, but now, when we have React Native, I wouldn’t take the risk of developing an app in Ionic/Cordova/PhoneGap and would move my app to React Native instead. We can help you do this!

This article was first published on Sep 19, 2017