React Native vs Ionic 2 framework: Side-by-Side Comparison

Mobile development has been the part of us since the early creation of software for mobiles. Since the advent of modern smartphones, new development tools are created as mobile-first, meaning that the development of the smallest screen happens initially. The purpose of this article is to highlight the most important conceptual differences for React Native vs Ionic 2 framework and also highlight the pros and cons of both.

We have witnessed hybrid mobile application development frameworks that allow you to use the basic website languages like HTML, CSS and JavaScript for developing mobile apps, and then we witnessed the native frameworks that not only allow you to use web tools for mobile development, but they also use the native API of Android or iOS (for UI and other functionalities) rather than imitating the native look. That gave us two very promising frameworks in the form of Ionic 2, React Native.

Related Reading:

React Native vs Ionic 2 framework – Hybrid and native apps

Hybrid apps are essentially websites embedded in a mobile app through what we call a webview. They are developed using HTML5, CSS, and Javascript, and execute the same code regardless of the platform in which they run. They can, with tools like PhoneGap and Cordova (now called Ionic Native), use the native features of a device, like GPS or camera.

Native apps are developed in the language required by the platform it targets, Objective-C or Swift for iOS, Java for Android, etc. The code written is not shared across platforms and their behavior varies. They have direct access to all features offered by the platform without any restriction.

React Native vs Ionic 2 framework – What to choose for mobile development?

These platforms support the creation of mobile applications through web technologies (i.e., HTML, CSS, JavaScript, etc.). What sets them apart from each other are the features they provide and how they are communicating with the APIs of the specific platforms.

React Native vs Ionic 2 framework – Ionic 2 Features:

Hybrid Mobile app development using HTML, CSS, JavaScript.
– Adopts the design/structure of AngularJS 2
– Hybrid apps are hosted inside a native application which uses the WebView
– Ionic 2 uses WebView (Kind of browser-less web pages loader).
– Apache Cordova (now called Ionic Native) is used in Ionic 2 to access the phone hardware functionality like camera, contacts, gyroscope, etc
– The UI is actually not native (even if it looks native), it is loaded on WebView as typical/normal web pages.
– Ionic 2 supports creation of PWA (Progressive Web App). Read here for more Description.
– Ionic 2 is installed from NPM modules.

$npm install -g ionic cordova

– Ionic 2 provides nice and simple starter projects to get satrted using following commands:

$ionic start sampleProject --v2 blank
$ionic start sampleProject --v2 tabs
$ionic start sampleProject --v2 sidemenu

– Many of the Angular 2 components can be used with no or minimal changes inside your ionic 2 application.
– Ionic 2 is very suitable for prototyping and fast development for the applications

React Native vs Ionic 2 framework – React Native Features:

– Developed by Facebook, ReactNative is an extension of React.js
– Where hybrid apps render using HTML and CSS, React Native will render using native components
– React Native uses Virtual DOM for updating the UI. The advantage here is very responsive UI.
– Uses the native UI components from native OS of specific platforms.
– Focuses heavily on the user-interfaces, and better user experience.
– ReactNative renders the components using native components, even when the code is written in HTML, CSS, JavaScript
– ReactNative is cross-platform, meaning the same code-base can be used to develop applications for both Android and iOS.
– Windows Apps can also be developed using Extensions.
– It’s a kind of a wrapper around native code of specific platforms, so around 85% code is similar, and the final 15% is something you may need to change to suit for a specific platform.
– It uses ES6, so you can use TypeScript similar to AngularJS 2 and Ionic 2
– JSX is supported in ES6, so you will get a similar experience to React ES6
– Install the ReactNative CLI using simple CLI:

$ npm install -g react-native-cli

Getting Started Guide Here
– New project can be created as follows:

$ react-native init sampleApp
$ cd sampleApp
$ react-native start

 Write once, run everywhere

Ionic being true hybrid app will run the same code regardless of the platform. If you use tabs, they will be displayed just as recommended by the platform—at the bottom of the screen in iOS, and at top in Android. Ionic framework will do all the heavy lifting for specific platform.

The goal of RN is not to provide a way to write once, and run everywhere. Rather, they want developers to use the components which best follow the native behaviours of the platform. For example, Android has a highly customisation toolbar; iOS does not.

The language stack

Ionic is a framework based on Google Angular Framework. It is based on Mode-View-Controller pattern as views and logic are clearly separated.

React Native is based on the Javascript framework React and, thus, uses Javascript code that resembles HTML but essentially isn’t—they call it JSX. With that, the display logic is blended in with the business logic.

Development and Testing

With Ionic, you can instantly preview your app in your browser and mobile devices. It instantly refreshes as you make changes to your application.

React Native allows you see the result of your modifications as you make them. No need to recompile, rebuild, etc.; the result is instant in an emulator or a real device.

Plugins and community

PhoneGap and Cordova have been around for a while so there is a high chance that a plugin already exists to expose the native feature you need in your webview. Ionic now also lists Community tested and supported native plugins called Ionic Native. React native is supported by very active open source community.

React Native also hosts very impressive set of Components and native support libraries. React native is supported my Facebook and very active open source community.

Supported platforms

Ionic 2 supports out of the box platforms like Android and iOS and Windows Universal. Additionally Ionic framework is being enhanced to support Progressive web apps, and Native Browser support.

React Native supports Android and iOS. Support for Windows Universal Platform is currently maintained as a separate plugin.

React Native vs Ionic: Which one to use

They both do different things, and both do it well. Choosing between the two more of depends on your project requirements. If your requirement is more performance apps, is closer to native rendering and performance, then you should choose React Native.

If your requirement is decent performance apps, with support for Progressive web apps and Native Browser apps, then you should choose ionic.

Tell us what is your preference and why? by putting a comment below.




One thought on “React Native vs Ionic 2 framework: Side-by-Side Comparison

Leave a Reply

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