Currently, we have seen a lot of changes going on in the sector of cross-platform development as well in the area of technologies which are into using web languages.
Today, we are going to take some time and see what React Native and Cordova has in store for us. Before we begin with, you need to have a clear idea about what a native application is and what a hybrid application stands for.
When it comes to mobile app development, there are two types of solutions – native applications and cross-platform applications. Native apps are developed using a language based on the target platform like Java for Android, Swift and Objective C for iOS, etc.
So Let’s Start from the introduction…
What is Apache Cordova?
Cordova is a framework which is used to create hybrid apps. It was formerly known as PhoneGap. In order to render application, Cordova makes use of web technologies and so to access the native features of the device it needs Apache Cordova. The kind of user experience that you will have for a specific platform is what you will miss with cross-platform app development.
What is React Native?
NPM Trends graph comparison
If we take a look at the NPM trends graph on React Native and Cordova, you will see that over the last six months, their graph has not been stable. Cordova was doing fine in Dec 2018 with 1,91,966 downloads compared to React Native which just made 1,14,162. However, the following months were different for both technologies and here React Native scored well with 2,71,163 downloads, whereas the graph of Cordova went down to 1,01,174 downloads.
When comparing React Native and Cordova in terms of GitHib stars, you will see that React Native enjoys 78,281 stars and 17,486 forks while Cordova enjoys 762 stars and 327 forks.
Let’s see what Google Trends has to say about React Native and Cordova
Comparing React Native and Cordova in Tabular Manner
|Comparison areas||React Native||Cordova|
|Performance||React Native apps perform better than Cordova apps||Cordova apps tend to be slow and less responsive as they are WebViews.|
|Supported platforms||iOS and Android||iOS, Android and Microsoft UWP|
|Core device components interactions||Here the interaction with core components are faster as React Native renders UI based on HTML as native components.||Compared to React Native apps, interaction with core device components is slow.|
|Native user experience||It offers a better native user experience as HTML is rendered as native UI.||The WebViews in Cordova offers less native user interface.|
|Maturity||Based on the number of plugins, React Native is less matured.||Cordova is more mature and stable.|
|Backward compatibility||Offers less support for old platforms.||Offers better support for old platforms.|
|Portability||Compared to Cordova, less code reuse.||Code reuse is easy across platforms.|
|When to go for?||When you want to develop cross-platform apps which comes with native feel.||When you want to turn your web application into a cross-platform app.|
A Basic Comparison of React Native with Cordova
When you compare different builds with or without caching, you will see that Apache Cordova is said to have better build performance and creates smaller build packages. It has to be noted that Cordova brings to you two API layers which you use to communicate with WebView which is Cordova enabled, for the purpose of rendering and the WebView for communicating with the Cordova plugins. Only the plugins which you add specifically will be added when compiling Cordova app.
While in case of React Native, it takes more time for the developer to build the application and even the size of the package is larger. React Native comes with support for native functionality like Camera and for the same thing i.e., offer native functionality support, Cordova needs plugins. So for the same reason, the apps build in React Native are larger but does well in other areas.
In the case of powerful phones, the limitations of web technologies do not cause any performance issues. The performance will always be related to the native compiled app while in case of Cordova, you can offer native-like experience seamlessly.
Read Our Article : Top Handy Tips & Tools To Boost Mobile App Performance
In the case of Cordova, you will find detailed documentation on how you must prepare the local environment and get ready for debugging. There aren’t any pre-packaged tools to debug, but you can use the existing tools that you have after configuring them.
The tools are:
The access you get with Chrome DevTools and Safari Web Inspector are:
Moreover, it is possible for the developers to get a hand on extra things which brings in a lot of features with React Native debug build and they are:
- Maximum Code Reuse
- Live Reloading
- System Trace
- Performance monitoring
- Element Inspector
- Hot Reloading
Testing During Development
It is important for the developers to be able to see the modifications made in the app in real-time while developing the app. For the developers, it can be frustrating to wait for 5 min and see whether the changes made are apt or not and do they need to make new changes. When you choose to go for Cordova, it is possible to see the changes made in the app instantly in the device or the browser as when the code is worked upon, and it will automatically save the code and refresh the application in no time.
With React Native, it renders the application natively and so the modifications made will have the preview in another level. This means you don’t have to worry about testing in the browser. During the modification, the changes are shown in the emulator immediately and so you don’t have to worry about recompiling the application.
Plugins & Community
When you plan to choose an open source project for your app development, it is important for you to have an understanding of its surrounding community too. This will help you know how much effort it will take to resolve bugs that come from time to time, by finding the right information and getting answers to the questions.
The community of Cordova is quite active and you will also find plugins in the market for it, which can help you resolve the issues as well as include new features at the earliest. Moreover, Cordova also comes with a virtual store were all the plugins are sold.
React Native has a large number of plugins in NPM. It even comes with the plugin which can be used to use the Cordova plugins, which means that you can have your hand on a number of mature plugins which are present in another community.
Pros Cons of React Native and Cordova
Pros of React Native
- Learn once write everywhere
- Cross-platform development
- Built by Facebook
- Native iOS components
Cons of React Native
- Can’t use CSS
- Less smooth navigation
- Some custom modules missing
- Still needs native developers
Pros of Cordova
- Easy to learn
- Lots of plugins
- Great community
- Easy development
Cons of Cordova
- UX is not native
- Plugins don’t work always
- Performance and app size not best
When is React Native better for app development?
- When you want to build an app in less amount of time.
- When you are low on budget
- When scalability and added functionality is needed
- When it comes to app maintenance
When is Cordova better for app development?
- If you want to build a simple app with a native touch.
- If you want better access to native APIs
- The flexibility of using web technologies
- Need UI libraries for improved UI/UX
Apps built on React Native
- Facebook Ads Manager
- Discovery VR
Apps built on Cordova
- The DHS program
In one word, it is not possible to say which one is the best mobile app development framework for you. The answer clearly depends on a number of factors like your project, your preference, the skills of developers and the needs of the app development. Both the frameworks are focused on achieving the same goal and both come with its set of pros and cons. This means it is hard to say one is better than the other.