React Native vs Ionic: Comparing performance, user experience and much more

Shares

React Native vs Ionic: Comparing performance, user experience and much more

Rakshit Soral
in Mobility
- 22 minutes
React native vs ionic for IoS Application development Copy

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 vs ionic difference under the hood

React Native as Dynamic runtime approach

If you aren’t already familiar with this, we write React native apps using Javascript. This Javascript code then talks to the platforms (iOS, Android) with the help of a mobile javascript API talking to the native platform API. Both of these APIs talk via a bridge.

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.

In Addition to the WebView, Ionic also leverage upon Cordova which uses a Javascript-native bridge to communicate between the WebView application and Native platform. Using this approach allows the framework to access Native APIs and device features like the camera to be used by WebView.

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

React Native tech stack

Above figure illustrates React Native framework tech stack. As mentioned before, the communication between Javascript components and native ones involves interfacing via a bridge with one to one correspondence between either side.

The best part about React native is that, if you can’t do something using the Javascript part, you can simply offload it to the native part of your app. In that case, you would be building some parts into React native and some into native, but getting the same level of performance as native.

Ionic Framework Stack

Ionic tech 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.

However – when Ionic framework came into its existence, it was developed by writing components with the combination of HTML, CSS, and Javascript. 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 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:

Ionic framework stack internal working Architecture
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:

  1. Battery status
  2. Camera
  3. Photo capture
  4. Connection
  5. Contacts
  6. Events – Add listeners for the events
  7. File access /File transfer
  8. Geolocation
  9. Device – allows access to device properties like device model, platform, uuid, version, device manufacturer details, etc
  10. Globalization – Accessing information and performing operations specific to user’s locale, language and timezone.
  11. In-app browser to show articles, videos, etc within your mobile app without leaving the app
  12. Media plugin to record and play audio files on a mobile device
  13. Splash screen plugin
  14. StatusBar plugin that allows customizing mobile phone StatusBar
  15. 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.

ExpenseManager app

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%.

CPU usage on startup and Idle for React native vs ionic

 

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.

Memory usage on startup and Idle for React native vs ionic

 

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.

Battery usage on startup and Idle for React native vs ionic

#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:

Timeline for test second

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.

CPU usage for Addition and Deletion React Native vs Ionic

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.

Mmeory usage for Addition and Deletion React Native vs Ionic

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.

Battery usage for Addition and Deletion React Native vs Ionic

#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.

Timeline for test third

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.

CPU usage for Database and application calls React Native vs Ionic

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.

Memory usage for Database and application calls React Native vs Ionic

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.

Memory usage for Database and application calls React Native vs Ionic

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.

Verdict: Apps developed with React Native are better performing in terms of user experience than Ionic as in React Native. Views are rendered natively as opposed to Ionic in which views are rendered in a WebView (HTML/ CSS and Javascript).

Developer convenience for React Native and Ionic

Developer convenience in React Native

Developers are required to have some prior knowledge and experience of React.js before starting out the process of developing apps in React Native. Aside from knowing javascript, some basic knowledge of native (iOS/ Android) development is also required when it comes to developing hybrid react native apps. That being said, there may be some requirement when you will have to write in the native language in order to optimize your application performance.

Furthermore, while developing hybrid react native apps, developers will have to manage and maintain apps on two separate platforms (iOS and Android).

Overall, the developer experience in React Native is quite encouraging but not limited to any single language (Javascript in this case) and development experience.

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:

    • Adobe phonegap build – Free for open source, has Github integration and supports Javascript
    • 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.

Verdict: Maintainability is often seen as an issue when it comes to Javascript frameworks. That being said React native and Ionic are almost similar when it comes to the maintainability of apps, with Ionic being a bit better.

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

React Native code can be debugged by using Chrome developer tools, Console.log or React Native debugger app. Code written in React Native is usually Javascript which is why it is much easier to debug the applications. Moreover, if much of native code is being used in an app then debugging can be done using any editor such as XCode for iOS and Visual Studio for Android.

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.

Unlike Synchronous functions which have the potential to block further execution of processes in Javascript while running, async functions let your program statements to run in continuation without having to wait for any of them. This makes an app or website better responsive to the user actions.

In React Native, Asynchronous calls can be implemented by using data flow techniques such as Redux or MobX.

‘Async’ calls in Ionic framework

In Ionic, Async calls can be implemented using Promises, a javascript object to represent an asynchronous computation that will be completed eventually, without having to wait for completion of computing process.

Let’s understand Promise objects in Javascript with an example:

Suppose you need to show your latest tweets in an Android app.

Async using Promise

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.

React-native-aws-native-device-shadows – This library is component wrapper for React Native for connecting AWS IoT from a device using Javascript SDK Bundle.

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.

Conclusion

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.

 

Rakshit Soral

Wonder what you can or can’t do with React native?

Wonder what you can or can’t do with React native?

We are deconstructing React native with some leading experts on React native. Subscribe to get notified when we publish another exciting research on React native.

 

You have Successfully Subscribed!