In this article, I will be providing a comparison between the Cordova and React Native frameworks. It will primarily focus on the overview of build performance, app performance, and debugging capabilities.
Before getting into the overview of each category, let’s cover some of the basic background information about each framework.
React Native, created by Facebook, is also an open source framework but for creating native cross-platform mobile applications. The fundamental for building a React Native applications is using the React’s design pattern. When compiling the application, the React UI components are compiled down into the platform’s native UI view elements. For example, React Native’s
Image component will be convert into the iOS
As React Native is only about three years old, there may not be as many resources on the internet compared to Cordova. This does not cripple the support. React Native’s community is continuing to grow strongly. You can find a lot of help and information from the React Native’s community Discord server.
By comparing against multiple builds with or without caching, it is noticeable that Apache Cordova has a better build time performance and produces smaller built packages. Out of the box, Cordova provides two API layers that allow your app to communicate with the Cordova-enabled WebView for rendering and the WebView to communicate with the Cordova plugins.
When compiling a Cordova app, only plugins which you specifically add will be added. This is what gives Cordova the edge in outperforming in build time and creating small package sizes.
React Native, on the other hand, takes more time to build an application and the package size is larger. React Native has built-in support for native functionality, such as the Camera, whereas Cordova requires plugins to provide native functionality support. This is one of the reasons why React Native apps are larger when built, but it pays off in other areas such as app performance.
On more powerful phones, performance issues related to the limitations of these web technologies tend to be non-existent. Like-for-like performance will always be behind a native compiled app, but with Cordova it is possible to provide a smooth and native-like experience.
Apache Cordova comes with great documentation on how to prepare your local environment for debugging. Cordova does not come pre-packaged with any set to tools but you can configure and use existing tools that you may already have.
These tools are:
- Safari’s Web Inspector with Remote Debugging for iOS
- Chrome DevTools with Remote Debugging for Android
The Safari Web Inspector and Chrome DevTools give you access to:
- Network Inspector
- DOM Inspector
If you have ever developed a ReactJS application before, you might be aware of the React Developer Tools Chrome extension that give you the ability to drill. This extension had been converted into a standalone application for React Native projects.
All React Native debug builds also give developers access to an extra menu to enable a lot of features.
Some of these features are:
- Performance Monitoring
- Element Inspector
- System Trace
- Hot Reloading
- Live Reloading
No matter what, each framework has its pros and cons. It truly comes down to what you’re comfortable with and what your application needs are. In the end, both are great options for creating and debugging cross-platform apps.
React Native is a great option if you need that extra edge in performance with multi-threading and native UI rendering.
On the other hand, if you have an existing web application code and you want to reuse some or all, including the ability to use web third-party libraries, then Cordova is the best option.