React Native vs Ionic: Comparing performance, User Experience and much more!
Here’s the fun “thing” about working in a service industry, you get to play a lot around diverse technologies. In the previous blog, we explored 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 often get asked – “What platform should I select for my enterprise app development?”. Though it is for most of the time very specific, we can still layout (or at least try!) some general guidelines to better decide. As a react native developer that also has extensively worked into Ionic, I think this blog post was long due from my side.
React Native vs 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 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 refer to this article on React native performance to get a better idea of when the problems could worsen.
Ionic based on WebView Wrapper
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.
Comparing React Native 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 web application development.
The ionic framework also consists of a CLI tool which makes creating, building and deploying Ionic application much easier.
- Angular – Web Application framework
Ionic relies on Angular JS to create its custom UI components. On top of that, Angular also made it easier for Ionic to leverage the power of MV(X) frameworks.
- Cordova – Hybrid application framework
Cordova which provides a web interface between the device’s native API and WebView API. That said, the main functionality of Cordova has to deal with bridging the gap between two technology stacks (WebView HTML and Native API).
Benchmarking Performance, Application size and Time of development
When it comes to evaluating in between cross-platform solutions like React Native and Ionic, performance 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 installing in the device?
We developed a Simple Expense Management app, both in Ionic and React Native over which we conducted the following tests.
We used PowerTutor for evaluating and measuring the test measurements such as CPU, Memory and battery power.
#1 TEST CASE – To test how both applications performed in Startup and IDLE state
CPU Usage: 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 occupies about 1049 MB. While in the case of React Native, the application shows average memory usage of 868 MB.
Power Consumption: The graph below illustrates the battery consumption of both 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 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
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: 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: 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 the case of both the applications.
#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
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.
Based on the above statistics, we can conclude that React Native performed better than Ionic in the first two tests except for 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.
On the other hand, 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 thought the difference is minimalist in our case.
Time of development
It took us almost one complete month to develop Expense Manager app in Ionic. On the other hand, developing React Native app took somewhere around 1.5 months for completion.
Securing Application Data
Encryption in Ionic 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 the device is a major prerequisite to make this work.
Encryption in React Native: Developers can rely on different 3rd party libraries to store sensitive data locally such as:
With great support for developing PWA’s and hybrid/ native apps, Ionic has been one such favourable framework 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.
Testing in React Native can be done from the level of unit testing to the Automation testing using some bunch of frameworks such as: ReactTestUtils, Jest and Jasmine for Unit testing, Mocha for Integration testing, XC Test for test automating iOS applications & iOS UI Automation using EarlGrey
Subsequently, testing in Ionic can be facilitated by using: Component testing with Karma, Unit testing with Jasmine and Karma & End-to-End tests with Jasmine and Protractor.
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.
Continuous Integration & Continuous Deployment
UX/UI Performance Comparison
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.
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.
3rd party libraries
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.
Developers can also write their own module and include the same by creating a binding to the ionic interface.
With mind-boggling support from its community, React Native is also rich in its availability of 3rd party libraries or plugins.
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.
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).
However, the biggest challenge with the maintainability of Ionic apps is that the framework itself is undergoing continuous changes with frequent release cycles on Ionic and Cordova.
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 Ionic, there is a feature called 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.
React Native offers some 3rd party libraries to integrate iOT within your native app.
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.
So, how do you decide whether React Native or Ionic is a good framework to start with your app development requirements?
If it 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 the Ionic framework.
Honestly, it all depends on the project requirement of your enterprise app development project. In case of any further questions, feel free to comment or get in touch.