React Native vs Ionic: Which Framework is best and Why?

Mobile App Development
React native vs ionic

React Native vs Ionic: Which Framework is best and Why?

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. In this blog post, we will try to understand the differences between React Native vs Ionic as competing platforms for building non-native apps.

Most of us often land in a dilemma – “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. 

Functionality of React Native vs Ionic

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: Functionality is based on dynamic runtime approach

React native apps are written using Javascript. This Javascript code communicates with the platforms (iOS, Android) with the help of a mobile javascript API which relays necessary data calls and functions to the native platform API. Both of these APIs connect via a bridge.

This bridge is the exact reason why React native apps almost work as if they were built natively!

Note: In most cases, the above statement 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: Functionality is 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 uses a HTML layout engine (WebKit/ Blink)  to render a HTML/ CSS user interface.

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

React Native vs Ionic: Comparison of Popularity

Before getting into greater details, let us look at the popularity between React Native vs Ionic. According to the developer survey 2020, following are the popularity survey results

  • In the past one year, 86% of web developers have used the SDKs of Ionic for extensive application development and only 16% of the web developers have opted for React Native. 
  • Developers using Ionic tools, libraries and frameworks are at a rate of 72% over 21% of the developers who pick React Native in order to build PWAs. 
  • Ionic has 238+ version releases with 41.k Github stars and 13.3k+ project forkings. Whereas, React Native has 346+ version releases with 19.8k+ projects that are forked constantly and their current stars are at a count of 89.1k in Github. 

The 2019 overview of Javascript provided by The State of JS indicates that the satisfaction ratio over user count is higher for React Native than Ionic. Ionic is just gaining popularity at the moment as most of them are still either unaware of its functionality or its benefits. 

Winner: React Native. It is clear that the popularity of React Native is far more than Ionic. 

Learning Curve Feasibility

The core SDK of both frameworks comprise of JS in common. However, they are not similar. Basic flex layout in React Native makes obtaining necessary components style look like a breeze. The only limitation is you first need to be familiar with CSS. Some of the other prerequisites you might need to learn would include Axios for calling APIs, Redux with React, Flexbox, ES6 and so on. 

On the other hand with Ionic, installation is easier than said through npm commands to install Cordova. The element ngcordova just provides you with a packed and powerful collection of all Angularjs extensions and services. Most importantly Ionic has its own Ionic Academy online school that provides step-by-step courses on different levels that make learning and building much more efficient and convenient. 

Winner: Ionic. It is much easier and simpler to learn. 

Comparison of Stack Structure

Let’s now look at these frameworks from a technology stack’s point of view.

Stack structure of React Native

React Native tech stack

As mentioned before, the communication between Javascript components and native components 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 in React native and some into hardcore native components. Yet you can get the same level of original native performance of the given platform. 

Do you still wonder Is React Native hybrid or native? React Native is a native framework that allows development of applications for the native platform. Though it can develop applications for cross-platforms, it cannot be considered hybrid because it does not share the ability to create a single codebase to run across multi-platforms. Hybrid applications use Cordova and HTML5 whereas React Native uses JavaScript Core and in some cases it might be called as a Core Native framework.

Stack structure of Ionic

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 applications much easier.

  • Angular – Web Application framework

Ionic relies on Angular JS to create its custom UI components. On top of that, Angular also makes it easier for Ionic to leverage any of the required framework power such as MVC, MVVM or MVP. 

  • Cordova – Hybrid application framework

Cordova provides a web interface between the device’s native API and WebView API. That being said, the main functionality of Cordova is to deal with bridging the gap between the two technology stacks (WebView HTML and Native API).

Since Ionic uses native wrappers like Cordova or PhoneGap, you might wonder: Is ionic native or hybrid? Ionic is a hybrid framework. Let’s take a step back for better understanding. Ionic is a development framework that targets development of hybrid applications. Ionic reaches more towards the hybrid end to attain accessibility to a native platform layer. In other words ionic is a hybrid framework that makes applications run in a native app shell.  

React Native vs Ionic: Performance Benchmarking

When it comes to evaluating 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 look at important performance benchmarks and parameters such as:

  • CPU Usage – Total percentage of CPU power used
  • Memory Usage – How many memories 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

Winner: React Native. It performs 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 more performant than Ionic when it comes to developing cross-platform applications.

So, which is better: Ionic or React Native? Applications built with Ionic framework do not care about the specific style and limitations that a platform has within itself. It can perform well across hybrid platforms. React Native offers the possibility to develop applications that are only centric to the specific platform. However, overtime native APIs have proven to have a high level of adaptability since each API and component created is dedicated to its respective platform.

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)

Winner: Ionic. When it comes to application size, Ionic has the capability to create minimal or low sized applications compared to React Native.

Time of development

It took us almost one complete month to develop the Expense Manager app in Ionic. On the other hand, developing the React Native app took somewhere around 1.5 months for completion.

Winner: Ionic. It provides the possibility for faster development time than React Native.

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:

Winner: React Native. Ionic as well as React Native provide a good level of security against application vulnerabilities though React Native provides better securing possibilities.

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.

Winner: Ionic. Compared to React Native, Ionic has better enterprise compatibility.

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, Ionic uses end-to-end testing set up similar to Angular CLI. Hence Ionic has the compatibility to use Karma for component testing, Protractor and Jasmine for unit testing and End-to-End testing. 

Winner: Both React Native and Ionic. React Native testing ranges between unit testing to automated testing and ionic ranges between component testing and end-to-end testing. 

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.

Winner: Both React Native and Ionic. Both the frameworks can be debugged with the help of Chrome developer tools.

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

Winner: Both React Native and Ionic. CI/CD is possible with both Ionic as well as React Native. 

UX/UI Performance Comparison

Cross-platform and hybrid frameworks just like any other framework quite often could face UX/UI performance issues. Here’s a video of Tal Kol speaking about some of these challenges in his Wix Engineering tech talkRendering 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.

Commonly used inputs like hitSlop prop, components like KeyboardAvoidingView and TouchableNativeFeedback helps in providing more opportunities for configuring text inputs in order to enhance the user experience. Although Ionic has the ability to write a single codebase, it allows to create a simple hybrid application that is compatible with multiple platforms. It reduces the cost of developing and maintenance of separate codebases for separate native platforms. Thus, this provides you with more time to focus on developing features and improving the quality of application. 

Ionic allows you to very rapidly develop features and functionality within a native mobile app container and push those out on a user’s device very, very quickly. We’re doing daily builds and could get versions out in an hour or less. That is a real win.

 

– Josh Rachner, Digital Practice Lead, Sense Corp 

Winner: React Native. It provides better capabilities in maximizing user experience.

ListView Scrolling comparison between React Native and Ionic

As mentioned before, Ionic apps are basically applications embedded in a Mobile wrapper known as WebView. Hence, there’s a significant performance difference between Ionic which renders via a WebView and React Native that compiles natively.

Let us take a very simple example of ListView to compare performance between React native and Ionic. In React Native, views are rendered natively as opposed to Ionic in which views are rendered in a WebView (HTML/ CSS and Javascript).

Winner: React Native. The native rendering and performance of React Native is comparatively better than Ionic. 

Developer Convinience

Developers are required to have some prior knowledge and experience on React.js in order to work efficiently with 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.

Winner: Ionic. 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 libraries such as Apache/Cordova plugins, Ionic plugins from the marketplace, and Angular modulesWith mind-boggling support from its community, React Native is also rich in its availability of 3rd party libraries or plugins.

Winner: Ionc. Building customized modules is easy with Ionic with the possibility to be integrated easily with multiple 3rd party libraries.

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, in Ionic you would only be required to maintain one single code (In React Native you would have to maintain both iOS and Android builds). 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.

Winner: Both React and Ionic may not be considered as winners in this criteria. Maintenance of libraries in React Native and Ionic both are little inconvenient due to outdated updates or constant updates respectively.

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. 

Winner: Ionic. It is possible to go back and forth between newer and older versions of an application with Ionic. 

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. 

Winner: Ionic. It can be easily interfaced with IoT devices compared to React Native

Cost of development

Considering the business perspective, both frameworks prove to be money and time savers. However, comparing both frameworks, Ionic is far cheaper than React Native. This is because with Ionic you can build hybrid applications that can function across multiple platforms by developing the application just once with a single codebase. 

Winner: Ionic. It is a huge money saver but might not the best choice when the requirement of the project needs to be hardcore native. 

Ionic 2 vs React Native

One of the significant improvements made in Ionic 2 is its ability to function based on Angular 2.x versions. Components of Ionic 2 use a specific strategy called as OnPush. This strategy follows an approach where detection of changes in the application is not conducted automatically all the time but rather only when there is any change in the input of the original code. This strategy prevents unnecessary rendering of components in the application. In other words, your application will be already optimised during the build time. 

With the power of vanilla Javascript, Angular 2.x can create a data table for any given application within 126 milliseconds which is 110% faster than Angular 1.x. Ionic 2 reaps the benefit of Angular 2.x making it possible to upgrade the performance on a large scale. In this case, Ionic 2 is equally and almost in par with React Native in terms of performance. Even though Ionic 2 seems to perform as good as React Native, still React Native holds higher standards when we look at certain important criteria such as: 

  • The need for utilising multiple callback functions in native format 
  • More preference towards native UI design looks 
  • Customize and develop advanced interactive transitions 
  • Process hardware functions according to the need of specific platform unlike Cordova 

Winner: React native. Ionic 2 is similar to React Native in terms of purpose but they differ  in regards with the requirement of your project. 

Introduction to Ionic React

Ionic React is a blended framework of Ionic and React. It is the official native React version of the Ionic. It is also a free and open sourced SDK powered framework. It uses a modern native runtime tool known as Capacitor in order to develop applications for native Android, iOS, Electron and PWAs for web platforms. Capacitor is a better replacement of Cordova. 

Furthermore, the interesting fact that might pull you towards opting this framework is that Ionic React even though is a blend of two frameworks, it also requires only a single shared codebase to be written just like Ionic in order to function across cross-platforms.  If you take a look at a detailed overview of Ionic React, you would find that it uses multiple open web standards and built-in browser capabilities just like React. 

Winner: Both React Native and Ionic. If you want to develop applications faster and yet with some functionalities of React for better performance, then Ionic React might as well be your framework of choice for development. 

Bottom Line (Conclusion)

So, how do you decide whether React Native or Ionic is a good framework to start with your app development requirements? Here is a bottom line that would help you choose the best framework for your project. 

Choose React Native, if: 

  • Your website or application is already running with React Native. 
  • Your development team are experts in React. 
  • Native platform dependency is important and critical to your project. 
  • You are willing to invest and have enough time to develop your project.
  • You already have sufficient funds or flexible budget that can meet the extensive development expenses. 

Chose Ionic, if: 

  • Your application idea is new and you are planning to launch a startup. 
  • The plan to raise funds for your application and business growth depends upon MVP development. 
  • Time factor to development is critical to you considering competitions.
  • Your idea is similar to your competitor to get the most value out of the digital market. 
  • You are under a tight budget and you want to keep development expenses at the minimum. 

If your application revolves around the idea of video streaming applications, P2P marketplace apps, social media or fitness apps, etc. then Ionic framework would be the best choice for you. If you want to create a powerful app with higher performance, responsiveness and you also have the necessary budget and time, then React Native is your cup of tea. 

React Native Database

React Native Ecosystem

Rakshit Soral

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.

  1. Avatar

    Kingsley Michael

    Thank you for this very detailed comparison. But how can i determine that my app would require decent or high performance before development? (Not a game app i mean) What metric do you use to evaluate this, so i can use to make a decision between opting for Ionic which is much simpler or just going head on with React?

    • Rakshit Soral

      Rakshit Soral

      Hi Kingsley, That would really depend on the features of the app. For instance, an app that has lots of Animations would require great performance. In this case, you would want to use React Native as it has great support for animations. On the other hand, a simple todo app would be okay to build with Ionic (or say a photo viewing app). Hope this helps!

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

Areas We Serve

Join 12000+ tech leaders 🚀

Subscribe to our newsletter to gain practical knowledge and insights on similar topics that cut through the noise

You have Successfully Subscribed!