Here’s the fun “thing” about working in a service industry, you get to play a lot around diverse technologies. That’s real fun! In a blog post before, we took a shot at Xamarin vs Ionic. With this blog post, I will try to differentiate between React Native and Ionic as competing platforms for building non-native apps.
The reason why I am writing this is that we very often get asked – “What platform should I select for my app?”. Though it is for most of the time very specific, we can still lay out(or at least try!) some general guidelines to better decide. As a react native developer that also have extensively worked into Ionic, I think this blog post was long due from my side.
React Native and Ionic – Same Objective But Different Approach
Before we dive deep into details of our “React Native VS Ionic” and actually point out the differences between the two, let’s first understand how these frameworks work under the hood.
React Native as Dynamic runtime approach
This may sound complicated if you are coming from a non-developer background. But simply imagine two water tanks placed at different heights connected with a pipe to transfer the water from the tank placed at the height of the bottom tank. It is as simple as that.
This bridge is the exact reason why React native apps almost work like as if they were built natively!
Note: In most cases, what I said above stands true, but you should reference this article on React native performance to get a better idea of when the problems could elongate.
Ionic based on WebView Wrapper
Ever heard before that Ionic apps are nothing but web-based apps? The reason why you hear that is because they use something called Web View.
Unlike React Native which relies on Dynamic runtime approach, Ionic is based on Cordova which relies on a Webview component (UIWebView on iOS and WebView on Android) or a chromeless browser view. The WebView component use a HTML layout engine (WebKit/ Blink) to render a HTML/ CSS user interface.
React Native Framework Stack VS Ionic Framework Stack
Let’s now look at these frameworks from a technology stack’s point of view.
React Native Framework Stack
Ionic Framework Stack
The ionic stack is comprised of three main layers:
Ionic – User Interface Framework
One major function of the framework is to provide user interface components that are not existing in the ecosystem of mobile web application development. For instance, TabBar component was one such component which did not exist as a native HTML component.
Angular – Web Application framework
Ionic relies on Angular JS to create its custom UI components. On the top of that, Angular also made it easier for Ionic to leverage the power of MV(X) frameworks.
Cordova – Hybrid application framework
Last yet not least comes Cordova which provides a web interface between device’s native API and WebView API. That said, the main functionality which is leveraged with the help of Cordova has to deal with bridging the gap between two technology stacks (WebView HTML and Native API).
React Native VS Ionic: What’s the Difference?
Now that we have covered the basic points of both frameworks (React Native vs Ionic), let’s understand how these frameworks differ from each other when pitted against each other.
Accessing mobile device features: React Native vs Ionic
How does Ionic access native features in mobile phones?
Previously, we learned about Ionic framework stack which involves three major components namely Ionic, Angular and Cordova. Let’s now understand, how these three components facilitate in accessing access native device features such as opening a camera module in an app:
Above image highlights how Ionic, Angular and Cordova work in conjunction to access mobile device feature such as “accessing a camera module”.
Reiterating the fact that Ionic relies on Cordova to access native features of a mobile phone, Here’s what Cordova can access within a mobile phone:
- Battery status
- Photo capture
- Events – Add listeners for the events
- File access /File transfer
- Device – allows access to device properties like device model, platform, uuid, version, device manufacturer details, etc
- Globalization – Accessing information and performing operations specific to user’s locale, language and timezone.
- In-app browser to show articles, videos, etc within your mobile app without leaving the app
- Media plugin to record and play audio files on a mobile device
- Splash screen plugin
- StatusBar plugin that allows customizing mobile phone StatusBar
- Vibration plugin – helps you vibrate the device
How React native accesses mobile device features?
Contrary to Ionic’s limitations on, React Native empower developers with this amazing capability of integrating native modules into their codebase.
Verdict – When it comes to accessing native features of mobile devices, both React native and Ionic are comparable. With Ionic, the dependency on Cordova results into reduced access. Other drawbacks that Ionic’s dependency on Cordova WebView imposes are:
- User experience significantly differs from native apps
- Slow startup/launch times of app
As React native can easily offload some functionalities to native, the user experience doesn’t suffer.
Benchmarking Performance, Application size and time of development – React Native vs Ionic
Performance evaluation should be always number#1 criteria for comparison of different frameworks. Furthermore – when it comes to evaluating in between cross-platform solutions like React Native and Ionic, this becomes a lot more important as ultimately the desired product you are building using these frameworks should meet the industry standards.
In this section, we will benchmark important performance parameters such as:
- CPU Usage – Total percentage of CPU power used
- Memory Usage – How many memory the application is utilizing as a whole?
- Power Consumption – How much battery power the application is consuming when installed in device?
#App Scenario – We developed a Simple Expense Management app, both in Ionic and React Native.
The app has following functionalities:
- User can take photo of the hard copy of their expenses
- Users can add their expenses manually (In case hard copy of expense/ bill is not available)
- Users can edit/ delete or modify their expenses list
- Users can see the total amount of expenses
- Users can add their expense/ bill copy via file storage or i
In order to make the comparison more comprehensive, we performed following test actions to evaluate whether React Native or Ionic performed better in our benchmarking study:
- #1 TEST CASE – To test how both applications performed in Startup and IDLE state
- #2 TEST CASE – To test how both applications performed when a series of actions such as addition, deletion and modification of expenses are performed
- #3 TEST CASE – To test how both applications performed when an action such as accessing the Camera module of the device is implemented
We used PowerTutor for evaluating and measuring the test measurements such as CPU, Memory and battery power.
Experimental Implementation and The Results
#1 TEST CASE – To test how both applications performed in Startup and IDLE state
The first test we performed is to just start the app and keep it in an IDLE state without doing anything for 30 Seconds. We recorded the measurements with PowerTutor and following are our observations for the three parameters namely CPU, Memory usage, and battery consumption:
CPU Usage: Following graph represents the CPU usage comparison when both the application were kept on startup and idle state. The CPU usage of the Ionic application was recorded as 21.3% whereas, for the React native application, CPU usage was recorded as 12.8%.
Memory allocation: As seen in the graph below, the Ionic application occupy about 1049 MB. While in the case of React Native, the application shows an average of memory usage of 868 MB.
Power Consumption: The graph below illustrates the battery consumption of both the applications during the test. As noticed from the graph, the battery usage is significantly higher for Ionic application at the time of application startup with 520 mW recorded as an average battery usage. On the other hand, battery usage for React Native was recorded as an average of 473.2 mW which means that React Native application consumed significantly less battery then the Ionic application.
#2 TEST CASE – To test how both applications performed when a series of actions such as addition, deletion and modification of expenses are performed
The second test involved some series of actions such as addition, deletion and modification of the expenses. This was done to record the performance statistics of both the applications (Ionic and React Native) when a number of calls for the navigation and database take place.
Image Below illustrates the timeline (in seconds) at which the series of actions were performed:
Based on the above timeline, we recorded our observations which are given as below:
CPU Usage: The First parameter to observe was CPU usage in which we observed that Ionic application takes about 19.2% of CPU consumption as an average while React Native utilizes about 17.0% of CPU consumption as an average.
Memory allocation: When it comes to memory allocation, the Ionic application takes about 1315 MB of space as an average whereas React Native application takes about 1220 MB of memory space as an average.
Power Consumption: Power consumption, the third parameter, doesn’t make much difference in case of both the applications. According to our observations, Ionic application resulted in 515 mW of battery power consumption whereas React Native application shows an average of 497 mW of battery consumption.
#3 TEST CASE – To test how both applications performed when actions such as accessing the Camera module and file storage of the device is implemented
During the third test phase, we tested how both applications will perform when actions such as saving the receipt of the expenses from internal memory or capturing the receipt from camera module are executed.
We performed these actions in this exact timeline and recorded the performance parameters for which the following observations were recorded:
CPU Usage: As shown in the graph below, the application developed in Ionic shows about an average of 21.2% of CPU usage as opposed to React Native application which consumed about 16.7% of average CPU usage.
Memory allocation: Application developed in Ionic consumed about 1625 MB of memory as an average. On the other hand, the application developed in Ionic consumed about 1717 MB of memory as an average.
Power Consumption: When it comes to battery power consumption in the third case, Ionic application resulted in about 532 mW power consumption while React Native application resulted in about 545 mW power consumption at an average calculation. In case of React Native, the battery consumption increases in the beginning when the application was switched on to perform the tests. Battery consumption spikes were also observed at 30 seconds and 45 seconds when the camera was open and file storage was accessed respectively.
Verdict: Based on above statistics, we can conclude that React Native performed better than Ionic in the first two tests excepts the third test which required access to native modules such as Camera and file storage. This concludes that React Native is highly performant than Ionic when it comes to developing cross-platform applications.
Application Size: React Native vs Ionic
Application size comparison results in the case of the Expense Manager app were:
- 3.2 MB for the Ionic build
- 8.5 MB for the React native build (Without using Proguard for build size minimization)
Verdict: When it comes to application size, Ionic is ahead of React Native but with the minimalistic difference in our case.
Note #1: The build size of React Native app in Android is mentioned without doing compression with Proguard.
Time of development: React Native and Ionic
It took us almost one complete month to develop Expense Manager app in Ionic because we already have expertise in developing high performing Ionic apps. On the other hand, developing React Native app took somewhere around 1.5 months for completion.
UX/UI performance comparison in Ionic vs React Native
UX/ UI limitations in React Native
Never ignore the fact that cross-platform and hybrid solutions could face UX/UI performance issues. React native is no exception to that either! Here’s a video of Tal Kol speaking about some of these challenges in his Wix Engineering tech talk.
Rendering your UI closer to 60fps is considered another big challenge while working with Ionic. Libraries like React Native Interactable and Lottie by Airbnb have significantly reduced the difficulties in reaching 60fps with React native though.
ListView Scrolling comparison between React Native and Ionic
As mentioned before, Ionic apps are basically website embedded in a Mobile wrapper which we call a WebView. Hence, there’s a significant performance difference between Ionic which renders via a WebView and React Native that compiles natively.
Let me take a very simple example of ListView to compare performance between React native and Ionic.
ListView performance – React Native vs Ionic
The video below shows the comparative performance of ListView in Ionic 2 and React Native. Clearly, React Native performs better.
It is important to note that in this experiment, the researcher has not done any optimization either in React Native or in Ionic.
Note: The take with the release of VirtualScroll in Ionic was that it scrolls with ListView at 60fps. While the claims are somewhat accurate, it doesn’t come close to React native.
Developer convenience for React Native and Ionic
Developer convenience in React Native
Furthermore, while developing hybrid react native apps, developers will have to manage and maintain apps on two separate platforms (iOS and Android).
Developer convenience in Ionic
Considering that Ionic follows the traditional WebView based hybrid development approach, the developer convenience is somewhat similar to what one would experience in Web development.
Having said that, developing apps using Ionic frameworks is fairly convenient and feasible as the developer has to manage and maintain a single codebase to generate builds for two different platforms.
Ionic allows developers to use ready-made interface components which are easily available in Ionic’s component library which often makes development experience easier when being compared to that of React Native.
Verdict: When it comes to developer convenience, Ionic has a winning edge over React Native as Ionic requires a minimal learning curve and development experience as opposed to React Native which often requires developers to step into native part of development.
Availability of 3rd Party Libraries and Plugins for React Native and Ionic
3rd party libraries for React Native
Availability of third-party components or plugins is one of the important criteria to be considered while evaluating any hybrid application development framework. In case of Ionic, developers are fortunate for their convenience to search for any type of plugin from the bunch of plugins libraries such as Apache/Cordova plugins, Ionic plugins from the marketplace, and Angular modules.
On the top of that, if any specific library is found to be missing, developers can write their own module and include the same by creating binding to the ionic interface.
3rd party libraries and plugins for React Native
With a mind-boggling support from its community, React Native is rich in its availability of 3rd party libraries or plugins.
Continuous integration and deployment pipeline: Ionic vs React native
CI/ CD in Ionic
When it comes to Ionic, continuous integration and deployment pipeline can be implemented by:
- Codeship: Free for open source, Supports multiple languages/Endpoints/Tools/Databases. Has Github integration
- Jenkins CI: AngularJS automated tests, has Github integration
- Travis CI: Facilitates automated tests, has Github integration. Integrates using a YAML file, results in Pull requests
- Semaphore CI: Has Github integration, platform includes NodeJS, PhantomJS, and Headless firefox
- CircleCI: Costs $19/month and supports multiple languages. Has Github integration and is extremely fast
- Snap CI and IonicView.
CI/CD in React Native
Subsequently, CI-CD in React Native can be done using:
Maintainability of React Native vs Ionic
Maintainability of React Native
With React native any 3rd party library that you might use could get outdated or become incompatible with your updated codebase. Hence, maintainability remains a big issue.
Apart from the 3rd party libraries, you also are required to manage and maintain your app in two separate platforms – iOS and Android.
Maintainability of Ionic apps
As opposed to React native, you would only require maintaining one single app in Ionic(you had to maintain iOS and Android builds in React native).
The biggest challenge with maintainability of Ionic apps is that the framework itself is undergoing continuous changes with frequent release cycles on Ionic and Cordova.
Over-the-Air (OTA) Updates for React Native vs Ionic
OTA updates in React Native
In React Native, developers can deploy their application and push direct over-the-air updates on the end user’s device with the help of Microsoft CodePush library.
In addition to Codepush, OTA updates in React Native can also be managed by using Electrode, an independent platform developed by WalmartLabs which is also compatible with Codepush client.
OTA updates in Ionic
In Ionic, there is a feature called as Ionic Deploy which let you update your app on demand for any sort of change required. Having said that, you can also get back to the previous version of your app if your situation required you thereby controlling every aspect of the upgrade process.
Succinctly put, Ionic Deploy empowers developers to work collaboratively as a team so that they can develop and deploy any changes on the air.
Securing Application data: Ionic vs React Native
Encryption in Ionic
Secure Storage Cordova plugin: While working with iOS in Ionic, Developers can ensure encryption on their device with the help of secure storage cordova plugin. But on Android, having a swipe or screen lock set on device is a major prerequisite to make this work.
Crypto-JS: Apart from using secure storage cordova plugin, developers can still use some 3rd party library such as Crypto-JS or write their own code for implementing encryption for security.
Encryption in RN
In React Native, developers can rely on different 3rd party libraries to store sensitive data locally such as:
Enterprise compatibility – React Native VS Ionic
Ionic for Enterprises
With a great support for developing PWA’s and hybrid/ native apps, Ionic has been one such favorable framework for enterprises with which developers can deploy a mobile app to both mobile web and app stores with a single codebase. This assures great maintainability and scalability in the longer run.
React Native for Enterprises
Although React Native has been adopted by many renowned organizations such as Facebook, Airbnb, Wix etc., it is still unclear whether React Native is officially recommended as a framework for Enterprises. The lack of enterprise-style deployment tools and SLAs is one of the leading factors on why React Native is not seriously being considered as the platform of choice.
Verdict: Even with a better performance and large developer community, the path to enterprises is still unclear with React native. Ionic on the other hand is providing dedicated support to enterprise customers as well.
Debugging: React Native vs Ionic
Debugging in React Native
But Debugging styles in React Native is a completely different experience for a developer as React Native don’t rely on basis CSS. Instead, it relies on FlexBox which has different properties than basic CSS.
Debugging in Ionic
In general, Debugging in Ionic is simpler with tools such as Chrome dev tools at the developer’s disposal. However, it might be harder especially for the projects that use hardware features of ngCordova.
Async with Ionic and react native
‘Async’ calls in React Native
Concurrency is one such thing that makes an app easier responding to gestures while the CPU in the background is busy doing some other grunt work such as fetching the data from the server.
An important rule of thumb is to use an Asynchronous piece of code whenever your app requires you to implement something which requires you to implement heavy or time-consuming operations.
Async functions, better known as Asynchronous functions are some piece of code which let two programs running concurrently with each other in the background in such a way so that none of these two blocks one another.
In React Native, Asynchronous calls can be implemented by using data flow techniques such as Redux or MobX.
‘Async’ calls in Ionic framework
Suppose you need to show your latest tweets in an Android app.
Now, fetching tweets is quite a heavy operation and you definitely don’t want to get stuck in waiting for your tweets to reload. Hence, you can implement the Async function which will doesn’t wait for your tweets to reload. Using that function, you can implement another function which will execute until your tweets are being loaded. For example, you might display a loading GIF instead.
However, implementing Async using Promises comes with some limitations such as:
- Debugging Promises are much harder
- Possible issues in performance probably due to runtime overhead monitoring of Promise state
- Promise can operate only a single value at a time (Promise.all can be used instead, though)
Verdict: Async in React Native allows you to implement concurrency while in Ionic, Async can be implemented by using Promises which have some limitations to work with.
Testing in React Native VS Ionic
Testing in React Native
Testing in React Native can be done from the level of unit testing to the Automation testing using some bunch of frameworks such as:
- Component testing with ReactTestUtils – This is a framework with which you can test React component either in a visual or functional way
- Jest and Jasmine for Unit testing – Jest uses Jasmine behavior driven framework for testing JS code in React Native. By default, Jest come shipped by Facebook starting for React Native version v0.38.0
- Mocha for Integration testing – Mocha is the best testing framework for implementing integration tests in React Native. It also facilitates Behaviour driven development and Test driven development to developers.
- XC Test for test automating iOS applications – XCTest is an automation framework for testing iOS apps. It comes coupled with XCode.
- iOS UI Automation using EarlGrey – EarlGrey, an UI automation framework by google also works well in conjunction with XC tests is also useful for implementing UI automation for iOS apps in React Native
Testing in Ionic
Subsequently, testing in Ionic can be facilitated by using:
- Component testing with Karma
- Unit testing with Jasmine and Karma – Jasmine and Karma are aggressively used by developers to unit test the Ionic application. In this setup, Jasmine creates the tests and, Karma automatically run the tests through a browser.
- End-to-End tests with Jasmine and Protractor – Jasmine and Protractor both can be used in performing End-to-End tests in Ionic. The protractor is built on the top of Selenium and WebDriverJS to automate the browser.
IoT Integration – React Native vs Ionic
IoT Integration in React Native
React Native offers some 3rd party libraries to integrate iOT within your native app. Following are some of the commonly used libraries:
React-native-ble-plx – This is an amazing module for integrating Bluetooth Low energy devices in React Native. It uses RxBluetoothKit and RxAndroidBLE as the backend libraries.
IoT Integration in Ionic
IoT Developers can easily rely on Ionic for building the next generation IOT based frameworks and applications as Ionic can be seamlessly interfaced with BLE devices, ibeacons and wireless sensors. Alex Abino, CTO of Femto used Ionic to develop an interface of hardwares over bluetooth smart.
So, how do you decide whether React Native or Ionic is a good framework to start with your app development requirement?
Honestly, it all depends on your project requirement and deadline. If your project requires you to deliver high performing apps which are closed in giving the native performance of users, then React Native will be the best option for you.
On the other hand, If your project requirement allows you to deliver a decent performing app which looks like native to users then you can always go with Ionic framework.