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: Functionality is based on dynamic runtime approach
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.
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.
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
Stack structure of Ionic
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.
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.
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.
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.
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 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.
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
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 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.
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.
Winner: React Native. The native rendering and performance of React Native is comparatively better than 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.
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 modules. With 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.
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.
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.
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.
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.
- 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.