Category
Mobile

Cordova vs React Native: Head to Head

This article exposes the pros and cons of two top cross-platform mobile app frameworks. Pick your winner in our React Native vs Cordova comparison.

As you know if you’ve been following our blog, we've been exposing and exploring a number of different cross platform mobile-app development frameworks and tools.

Articles published thus far include a review of Apache Cordova, highlighting the pros and cons of the popular PhoneGap cross-platform hybrid framework. We've also looked at other cross-platform tools such as Xamarin and, more recently, React Native, Facebook's promising solution for developing native iOS and Android apps using a single, shared code-base. 

React Native vs Cordova: Differences That Matter

React Native and Cordova take very different approaches to solving a similar problem: the high cost and long development time involved in building apps for a multi-platform mobility market. With the hourly cost to build an iOS app in North America standing at around $150, according to Codementor, few commercial organizations can ignore the productivity benefits of WORA (write once run anywhere) development frameworks. 

Developer Productivity - A Critical Issue

But should your company find itself in a React Native vs Cordova procurement decision, what factors make one a better choice than the other? That's the question we're going to address—and hopefully provide some answers for—in this side-by-side review of two of the most popular cross-platform mobile app development solutions.

While we could, like many other sources, compare every element of the two solutions, there's probably more practical value in exposing the differences that really matter—in other words, those most likely to be reflected in the development cost of your company's mobile applications, along with their quality, capability, and performance. So let's get under way. 

The All-important Look and Feel

App users tend to like the familiar look and feel of apps designed specifically for their chosen mobile platform, which makes the ability to provide a near-native experience one of those key factors in cross-platform development. It's also one of the key areas in which Cordova and React Native differ.

The Pro of React Native: The ability to create apps which look and behave like native software is one of the big pros of React Native (RN). It's achieved by RN's ability to provide access to native interaction and controls right out of the box.

The Con of Cordova: Developers using Apache Cordova must work hard if they are to create apps that feel like ‘the real native McCoy’. The look is not so much of an issue since Cordova uses a native wrapper to contain a web application. However, the very fact that applications are browser-based is what makes it hard to create a native feel. 

Cordova Architecture Overview
The ability to provide a near-native experience has become one of those key factors in cross-platform development.
Tweet

Effective Use of Single Codebase

Since one of the primary objectives of cross-platform development tools is to reduce development effort, your React Native vs Cordova decision may well be determined by the degree to which each tool truly allows developers to write code once and reuse it across multiple operating systems.

The Pro of Cordova: If all else is disregarded, Cordova's claim to be a "write once, run anywhere" coding tool is more authentic than many of its competitors'. That's because Cordova makes use of HTML5, CSS3, and JavaScript for app development. It's even possible to take an existing web application and using Cordova to wrap it as a native iOS and/or Android app. As a result of this simplicity and flexibility, Cordova can greatly minimize the effort of creating apps for multiple platforms.

The Con of React Native: React Native claims to be a "learn once, write anywhere" solution, which clearly does not mean the same thing as WORA. In fact, while it may be possible to share up to 85% of JavaScript code across mobile platforms, that's probably not a realistic target for the majority of app projects.

In many cases, the amount of reusable code will be considerably less than 85%. For example, many of the React Native components only work on one specific platform, so if you wish to have the same UI element in its native guise for a different platform, it will need to be written in native code. The upshot of this is that the closer to native you want your apps to be, the more the code-sharing advantage is eroded. 

The closer to native you want your apps to be, the more the code-sharing advantage is eroded.
Tweet

The Development Effort/Performance Tradeoff

You might note that in the section above, we mentioned that the code-sharing advantage of Cordova is subject to all else being disregarded. Of course, that will never be the case and when building apps with Cordova, the price for speedy development will be paid in the currency of app performance.

The Con of Cordova: Unlike apps created with React Native, those built with Cordova are essentially web apps wrapped in a web view. This places quite a lot of constraints on the type of apps that can be developed, as well as their complexity.

Furthermore, even relatively simple apps will probably run slower than if they were written in native code. JavaScript is single-threaded, and that makes Cordova apps prone to sluggish animation and generally less responsive than many users would like it to be.

The Pro of React Native: It would be fair to assume that since Cordova and React Native both use JavaScript as the coding language, there would be little to choose between them in terms of app performance, especially as JavaScript is not known for its ability to power high-performance applications. 

React Native Architecture

Happily though, the assumption would be incorrect, since the React Native architecture is such that JavaScript doesn't take a lot of the performance load. The code runs in its own thread, separated from the main and layout threads. App performance is further enhanced by the linkage between React components and native views, which imposes far fewer limitations than the web-view approach taken by Cordova. 

Solution Maturity and Platform Support

When you select a cross-platform development tool, it's important to look not only at the capabilities for building iOS, Android, and perhaps Windows apps, but also at what versions of each platform are supported. For example, you can't build apps for iOS 7 with React Native.

Another key factor is the age and maturity of the development tool since that can make a difference both to the capabilities of the technology and the developers who will work with it.

The Pro of Cordova: Cordova has been around considerably longer than React Native, a fact that bestows it with a number of advantages, not least of which is its domination of the cross-platform market. This, in turn, might be attributed at least partially to maturity-related advantages for users, such as:

  • An extensive knowledge base
  • A wide range of plugins
  • Plentiful documentation covering everything from basic to advanced use of the solution
  • A large base of developers experienced in the use of Cordova for app development

Cordova also supports a wide range of new platforms and is less volatile than React Native, which is currently subject to new version releases every few weeks, with no guarantee of backwards compatibility.

The Con of React Native: React Native is by no means immature, but it is some way behind Cordova in this respect. While a large and extremely helpful development community exists, RN documentation is not as extensive as that available to Cordova developers.

React Native's reliance on component libraries brings another maturity issue to the fore. Many of these libraries are still underdeveloped. We touched on this earlier when mentioning how some components are not available for all platforms, but there's also the issue of component quality, which does tend to be variable. 

When you select a cross-platform development tool, it's important to look at what versions of each platform are supported and what a solution maturity is.
Tweet

Choose Your Solution

No truly unbiased comparison of React Native and Cordova can claim either tool to be a universally superior app development solution. Hopefully though, this article is helpful in summarizing the most significant pros and cons of each.

As a rule of thumb, you're more likely to select React Native if user experience and app performance are your top development priorities, whereas Cordova might win out if your apps will be less complex, not place too much demand on device resources, and need to be delivered with the minimum cost and effort. 

You're more likely to select React Native if UX and app performance are your top development priorities, whereas Cordova might win out if your apps will be less complex.
Tweet

It's Not a Two-horse Race

Of course, after evaluating both RN and Cordova, you may wish to consider a completely different tool, like the Xamarin cross-platform framework, and for our part, we'll continue to post information and guidance relating to all the most credible cross-platform solutions. 

Content type
Blog

WANT TO START A PROJECT?

It’s simple!

Attach file
Up to 5 attachments. File must be less than 5 MB.
By submitting this form I give my consent for Iflexion to process my personal data pursuant to Iflexion Privacy and Cookies Policy.