Cordova vs. React Native: A Detailed Analysis

Mobile apps have exploded in popularity over recent years. The introduction of the iPhone 3G in 2008 spawned a new industry overnight. App development is now an industry that generates more than $34 billion in revenue.

To reach all potential users, developers need to develop applications for (at least) the two leading platforms: Android and iOS. Since the development for the platforms is time-consuming and requires different expertise (Swift/iOS vs. Java/Kotlin), cross-platform solutions were introduced over the years. Among them, Unity, Ionic, Cordova, and React Native. Those solutions ideally allow you to develop once and run your apps on both platforms.

In this post, we’ll do an analysis of two of these solutions: Cordova and React Native. In addition, we’ll discuss what the appropriate use cases are for each of them so you can decide which best fits your needs.

Cordova Introduction

Apache Cordova (formerly PhoneGap) allows us to develop applications that run in the browser. Since the browser engine is (theoretically) the same or very similar among platforms, the app should run the same way both on Android and on iOS. The app is essentially installed as every other app. And once you click on the app icon, it opens a web view (a headless browser—a page without browser navigation) and runs the application using CSS, HTML, and JavaScript.

Cordova Native Plugins

To access the phone’s native capabilities (camera, gyros, GPS, etc.), we use web APIs. The web APIs access code that translates our JavaScript calls to native code in the target platform. If you don’t have a plugin for a native capability (let’s say monitoring the battery life), you can develop a plugin based on the Apache Cordova API.

React Native Introduction

React Native originated from the original React UI framework. Initially created for rapid development of web UI, a version was developed in 2014 for creating mobile applications. React Native apps are written in JavaScript as well.

However, instead of running the application in the browser, the operating system spawns a thread to handle the JavaScript code (essentially a JS interpreter) and translates the React UI widgets to native widgets. Messages are passed between the native code and the JavaScript code via the “React Native Bridge” as simple JSON objects. This way, a message is sent to the JavaScript code once a button is clicked in the application.

React Native vs. Cordova Comparison

Both React and Cordova allow creating feature-rich, sophisticated, and performant applications. However, each shows its strengths and weaknesses in different areas. When you choose a framework to base your application on, it’s important to remember the pros and cons of each.

Performance

Since Cordova runs in the browser, it runs as a single JavaScript thread. Which, in this case, is essentially the UI thread. For small apps, this might not prove problematic. But for large apps with a lot of UI objects, this can become a bottleneck as every paint and repaint of the DOM via JavaScript can take time. And during this time, the app is unresponsive.

React Native, on the other hand, spawns a separate JavaScript thread from the main UI thread, which proves to be much more performant.

More on the React Native Architecture

What React Native basically does is run a separate JavaScript with a JS interpreter, and it updates the UI thread once a change happens (on an event, like a button click). Other than this (being triggered on events), the JavaScript thread doesn’t affect the UI thread. Thus, the UI thread is more responsive and has less tendency to get stuck because the JavaScript thread does a lot of heavy lifting.

In addition, React Native developers have added the option of splitting React components via hooks. Each hook groups related data into a sub-component, thus allowing more flexibility in managing and deploying components.

App Immutability Across Platforms

What does this heading mean? Well, we can basically sum it up with one question. That is, “Will my app look the same on both Android and iOS?” Cordova runs in the browser.

Since the Android web view is powered by Chrome and the iOS web view is powered by Safari, there might be some rendering differences between the two. Buttons might not look the same, menus will look slightly different, etc.

In addition, since Safari and Chrome support different HTML5 features, you need to make sure you don’t accidentally use a feature that isn’t evergreen.

Development Speed

In Cordova, you can create one codebase and use it across both platforms.

In React, this is a bit tricky. Although you can use mostly the same code, specific implementation will be needed for elements that exist only in one of the two platforms. This makes development in React potentially longer and the maintenance harder for sure, as you need to manage at least two repositories. One for each system. Each with its own build and deployment process.

Lastly, it’s worth mentioning that if you need to develop a web version for your app, Cordova provides this capability out of the box, while with React Native, you’ll need to create a different codebase.

Learning Curve

Regarding the learning curve, Cordova is easy to grasp for anyone who has ever done any kind of web development.

On the other hand, React Native requires familiarity with React concepts first to make good use of the framework. We can say with a fair amount of confidence that if you’ve never worked with React, the learning curve for React Native will be steeper.

Debugging Capabilities

Both React Native and Cordova use the Chrome Dev Tools to inspect an application and debug it.

The one thing that is lacking for React Native (without a plugin) is a drill-down of the source code to the React component level. On the other hand, if you use React Native, you get hot reloading out of the box. In other words, if you make a change in your code, it will be automatically reflected in the debugger.

UX

In regards to UX, React Native provides a better user experience. Since the React component can be easily converted to native components, a React Native app gives a user experience that is very close to a “real” native app.

Cordova provides a user experience that’s closer to an online software as a service (SaaS) application.

Conclusion

Mobile app development is a huge market. It has a lot of financial potential for application developers. However, developing for two platforms is hard and time-consuming. This is why cross-platform development tools were developed. Two of the most popular tools are Cordova and React Native—each with its respective strengths and weaknesses.

If you’re already familiar with React and want to provide the most “native-like” UX for your users, React Native is the right choice for you. However, if you want to maintain a single codebase, are familiar only with regular web development, or need a web version of your app as well, Cordova is a better choice for you.

Either way, there are parts of the process that remain the same. In order to publish your app, you need to register with Google Play and the iPhone App Store. Thoroughly test your app with manual and automatic tests. Create a DevOps pipeline for building and publishing new versions. Lastly, make sure that users love your application.

This post was written by Alexander Fridman. Alexander is a veteran in the software industry with over 11 years of experience. He worked his way up the corporate ladder and has held the positions of Senior Software Developer, Team Leader, Software Architect, and CTO. Alexander is experienced in frontend development and DevOps, but he specializes in backend development.

‍