Ionic vs React Native – What is the best choice for your mobile app?

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)

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

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:

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:

 

Common Ionic 3 Development Mistakes

WRITTEN BY GARETH DUNNE @JSDIARIES

As I have got to terms with many of Ionic’s development ways I have encountered a whole host of different errors that has slowed my development down.

In many ways, this is key to learning the framework, however I thought I’d share some of the more frustrating moments that I encountered so that a developer may be able to be more aware in his/her app building process.

I decided to create this post after seeing a simliar post from Toptals most common ionic development mistakes.

Again, if your looking to expand your Ionic knowledge I highly recommend this Ionic 2 cookbook.

These mistakes stem from an app that I made called CoffeeTrail.

Android Coffee Finder Application CoffeeTrail
CoffeeTrail

It’ll be on the iOS store very soon but be sure to check it out on Android here.

Cordova Documentation

The Ionic framework is built on top of Apache Cordova.
Cordova is responsible for packaging your HTML5 app as a native app that can run in Android, iOS, and other platforms. They have documentation that is both informative and verbose and should be read frequently when experiencing bugs and errors.

This seems to be relatively simple idea but one I was consistently ignoring at the start of my development. Whenever I would search for specific Ionic errors I would limit my search to all things Ionic, including the Ionic forums, stack overflow etc.

A lot of the time I would actually find a solution by looking at the Cordova documentation.

As Cordova is really the bread and butter of an Ionic application it can really help to examine information about specific plugins that power your application.

There is a significant amount of useful documentation here, especially for platform specific information for Android and iOS:


Ionic View

One of the handiest ways to produce an .ipa file without owning a Mac is to use Ionic Package. Ionic Package builds your application in its own cloud so that you can download it from their server.

However, you still have to run around many configuration steps to produce an .ipa file.

My advice here is to meticulously follow the Ionic Documentation to do this.

And any time you want to generate a Apple keychain file or p12 from a Windows machine have a look at this guide here.

Once finished you can view your application via the Ionic View app here.

This is very useful for testing your application across a wide range of device since you are testing it on a server just download the Ionic View app onto your desired device and test it out.

Configuration

Just because we are developing hybrid applications does not mean we don’t have to still specifically cater to each platform in some shape or form. I quickly found this out when using the Google Maps SDK.

When building with Android I had no problems and the map, locations and assets would be retrieved from the Google servers without an issue.

However when building for iOS the map would never display like so.

Ionic Google Maps Error
Ionic Google Maps Error
.

And after checking the network requests in the Safari there seemed to be no problems. With no errors logged after debugging and confirming that the map element is actually loaded I initially I thought this must be a style issue with the div map element but after some deliberation I found out in the Cordova documentation some extra information was needed in my config.xml file. specifically for iOS.

According to the docs , applications without any tags only have file requests from urls that are allowed.

Resources

When you are ready to build your application to production you will need to generate your image resources for your project.

We can do this using the command :

A lot of the time my original splash image wasn’t at the correct resolution to be transformed into various other dimensions for mobile tablet etc. Ensure that you can correct this as the resources step is required for building to iOS or Android.

For more information check out the resources in the Ionic Docs.

Serving your application

Whenever you use the command:

Your application is wrapped in a display for each platform. This is also the case if you use Google’s developer tools mobile responsive view, your application will render the components relevant to Android or iOS and even Windows.

While this is undoubtedly useful to preview platform specific components do not assume that the behavior here is representative of what will actually happen on an emulator or a real device.

This may seem obvious; however, I was initially confused by this as the -labs display resembles an authentic emulator. For actual emulators you can use Xcode for iOS or Android SDK Tools for Android applications.

So these are just a few of obstacles I encountered throughout my development time with Ionic. If you are looking for some valuable tutorials and resources, feel free to check out my previous post regarding excellent learning tutorials for Ionic.

Ionic 3 Release – Whats New?

WRITTEN BY GARETH DUNNE @JSDIARIES

Ionic 3 has released and with it, has brought some impressive but not overbearing changes to the Ionic framework.

While sites like Toptal have previously covered performance differences between Ionic 1 and 2.
This post will cover the upgrade from Ionic 2 to 3 and the performance differences that come with it.

Similar to the Angular 4 release, this isn’t a core change to the platform, rather it is adding some improvements to your applications that will increase overall performance and allows hybrid app development to come a few steps close to being on par with its native development counterparts.

As always here is some useful Ionic reading material. And here is the official post from the Ionic team specifying all the changes.

Updating from Ionic 2

Updating from Ionic 2 is actually quite a simple process. This video from Paul Halliday simplifies the process even further:

Angular 4

Ionic has been updated to be compatible with Angular 4 and all the features that come with it. You can find our Angular 4 release post here.

And the official Angular blog covers it here aswell.

Lazy Loading

One of the most notable features of the release, lazy loading provides us with the ability to breakdown our bundles for our application even further.

This allows our application to only load certain bundles/modules when they are actually needed. When you lazy load, your application performance improves, particular as the app is starting up because all the modules that were previously loaded in our app.module.ts are not requested at once rather they are loaded on a page by page basis.

I would highly recommend checking out Paul Hallidays tutorial on this:

TypeScript 2.1 and 2.2 compatibility

As specified on the official Ionic blog. Ionic 3 has been updated to be compatibly with Typescript versions 2.1 and 2.2. This is inline with **Angular 4 ** being compatible with these versions as well. More information can be found here.

A Promising future

So that just about summarizes the main changse for Ionic 3. I don’t think anyone can deny the momentum and progression that this framework has going for it.

While originally I was concentrating on all things Angular. Ionic has really provided such a sleek way to use web technologies in order to reach such a wider userbase and to target them more personally through mobile applications.

If you needed even more detail regarding Ionic 3 changes please check our Joshua Morony’s detailed guide here:

I highly recommend all his content as it provides a huge insight into all potential features you might want to implement into your application.