React Native vs Ionic – What is best? : A Side-by-Side Comparison

WRITTEN BY GARETH DUNNE @DUNNEDEV

The mobile app development market isn’t what it used to be for developers. In contrast to 5 or 10 years ago, the Android and iOS stores were locked to you as a developer depending on your ability to learn the native languages related to either option.

We are now given a plethora of choices when it comes to determining the right technology that you want to create your applications with.

Technologies that allow you, as a developer, to be no longer restricted to one store depending on what language that you know.  Mobile development using JavaScript opens up so much more opportunity for a developer or a team seeking to finish their own ideas while also having a much broader market to publish it to.

These choices are usually categorised as either WebView app development (Ionic, Xamirin) which runs an app through a web browser on a mobile phone. Or native app development (React Native, NativeScript) which use core native components through an API to run in a mobile application.

In this post, I want to compare Ionic to React Native, as personally, I would consider both to be key frameworks in each of their respective fields of hybrid app development.

If your looking for a learning resource for React Native you can look here.

I have also published my Ionic app to the Android store (soon to be iOS as well) so fell free check it out if your keen on seeing an Ionic app in action.

Android Coffee Finder Application CoffeeTrail
CoffeeTrail

Language

Both of these technologies are built around using JavaScript. Ionic is based around the Angular 5 framework. This is quite beneficial as you have full access to the Ionic CLI to scaffold a project, generating your components/pages/services via the command line.

Ionic’s combination with Angular means that you will be using TypeScript by default which is an awesome subset of JavaScript and allows you to define types while having object oriented JavaScript code.

TypeScript can also be used in React Native but will take another step to setup initially or you could just check out this template here.

React Native is based on React.js a very popular frontend development library. Its focus is on its reusable components that are shared between mobile and web versions.

Both frameworks use the latest in ES6 practises including classes, arrow functions, templates string etc. Basically, on a core JavaScript level they are both stacking the latest and greatest.

I wouldn’t be too concerned either way here, if you are a fan of Angular and how it scaffolds its projects, services and components then Ionic might be more appealing.

On the flipside if your already familiar with React.js’s style of functional programming than React Native will just be a continuation of that with its own style of native mobile components.

Ease of use

A lot of the ease of use of an Ionic application can to attributed to the readily available list of Native Components and its CLI generator.

Ionic provides these native components plugins such as Geolocation or Google Maps with relative to ease to install.

Simply add them using Cordova (which comes with the Ionic framework)

 ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"
npm install --save @ionic-native/geolocation

And then import them into your project using ES6 import syntax.

import { Geolocation } from '@ionic-native/geolocation';

...

constructor(private geolocation: Geolocation) {}

...

this.geolocation.getCurrentPosition().then((resp) => {
 // resp.coords.latitude
 // resp.coords.longitude
}).catch((error) => {
  console.log('Error getting location', error);
});

let watch = this.geolocation.watchPosition();
watch.subscribe((data) => {
 // data can be a set of coordinates, or an error (if an error occurred).
 // data.coords.latitude
 // data.coords.longitude
});

The documentation for these native plugins is actually quite verbose and its clear how you can utilize various additional methods to get the most out of your desired plugin.

In contrast to this React Native uses APIs that are accessed through the global navigator object. You can then call any relevant methods that are related to the native functionality that you want to use.

For example:

On the navigator.geolocationobject you can call any of the following methods getCurrentPosition(), watchPosition(), and clearWatch().

Check out the full list of React Native API’s here.

Overall, I think I’d edge towards Ionic on this one. Apart from the wide range of documented plugins. The core CLI in combination with Cordova gives you plenty of commands and tools to generate resources, splash images, building tools as well the recently released Ionic Dev which provides you with an app to test your creation on any device you want.

For me, these testing tools allow a dev to access a wide range of devices and increases the accessibility of using Ionic over React Native.

Performance

Perhaps the most defining aspect when comparing both of these technologies, performance is always a big worry when dealing with hybrid mobile applications.

This is where React Native truly stands out. React was fast to begin with and was even comparable to natively developed app speeds for the most part. However with the release of React Fiber  it is now much more responsive to browser events.

Not only this but Fiber assigns different priorities to different types of UI updates with the more important ones taking priority when React re-renders.

For a more detailed guide to React Fiber I’d recommend this post here by Mark Cruz.

To summarize, React Fiber works smarter, not necessarily faster. The priority given to more important tasks results in a faster application.

In comparison to this Ionic is still not bad performance wise. In fact, it has come an awful long way since its first version.

Ionic 3 was released with lazy loading modules taken from Angular. This has certainly increased initial loading times of the application as well as subsequent loading of pages and assets.

Lazy loading enables the app to only load the modules that it needs at any given time.  A great feature undoubtedly but still isn’t up to snuff when compared to React Native’s native component library.

Maintainability

Due to of some platform specific code segments of React Native, the ability to maintain an application is a bit more difficult. Whereas in Ionic, a functionality change for example, will be reflected in both iOS and Android builds, for the most part anyway.

Here is a snippet of how to target Android exclusively in React Native:

import { Platform } from 'react-native';

if (Platform.Version === 25) {
console.log('Running on Nougat!');
}

Importing and using the Platform module is probably the exception rather than the rule here, the majority of React Native components have both an iOS and Android equivalent so in most cases this shouldn’t be necessary.

Its definitely not difficult to target platforms like this but it seems more frequent in comparison to Ionic where I very rarely found myself using platform specific code with the exception of styling some components.

Size

The bundle size of your application plays a big role in defining how big or small your .apk and .ipa files will beI found Ionic to have smaller bundling size overall.

Without doing statistical comparisons for both on compilation code and bundles (which I’ve struggled to find in 2017) theres not much to say here really, React Native’s component library tends to be heavier and this is the price for a faster and closer to native application.

Which is best for you?

Overall, theres quite a lot to digest here. While both are great platforms to launch your app the overall performance benefits for React Native as well as its recently released fiber potential really edges for me.

This really opens up how powerful React Native can be with significant performance enhancements when compared to Ionic.

But don’t get me wrong Ionic really shines in its own way, its fundamental paradigm of write once, use everywhere allows you to usually have consistent code between your iOS and Android versions.

In this way, React Native is more work for its platform specific code but even with this in mind, for me, the performance of React Native still outweighs this benefit.

I have had much more exposure to Ionic thus far but with my recent projects using  React.js and Redux,  I’m really looking forward to applying this way of functional programming to create apps.

At the end of the day, you can use both platforms to achieve your hybrid application goals.  They certainty differ, with React Native really nailing performance and Ionic providing more accessibility.

They both also have a great communities to boot so until one becomes miles ahead of the other your not doing yourself any disservice to your future applications by picking either one.

So if you feel like getting started on either one, I’ve included some sample tutorials that I’d recommend:

 

Proudly published with Gatsby