React Native vs Ionic: Comparing performance, User Experience and much more!

Mobility

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

React Native as Dynamic runtime approach

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

Using Cordova we have a Javascript-native bridge to communicate between the WebView application and Native platform. This approach allows the framework to access Native APIs and device features like the camera to be used by WebView.

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

React Native 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 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.

ExpenseManager app

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

CPU usage for Database and application calls React Native vs Ionic

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.

Memory usage on startup and Idle for React native vs ionic

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.

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

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: 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: 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 the case of both the applications.

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

Timeline for test third

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.

Memory usage for Database and application calls React Native vs Ionic

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.

Application Size 

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:

Enterprise Compatibility

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

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. 

Debugging

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

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

When it comes to Ionic, continuous integration and deployment pipeline can be implemented by Adobe phonegap build, Codeship, Jenkins CI, Travis CI, Semaphore CI & CircleCI

Subsequently, CI-CD in React Native can be done using: Bitrise, Travis CI, CircleCI & Jenkins CI

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.

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 Convinience

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.

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.

Maintainability

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.

OTA updates

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.

IoT Integration

React Native offers some 3rd party libraries to integrate iOT within your native app. 

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

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. 

Conclusion

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.

Rakshit Soral is designated as Tech Consultant (Mobility & Operations) at Simform where he helps Fintech startups, agencies, and SMBs in adopting complete life-cycle management of apps from inception to design and development.

Leave a comment

Your email address will not be published. Required fields are marked *

Simform Blog

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!