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.
React Native vs Ionic 2 framework – Hybrid and native apps
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?
React Native vs Ionic 2 framework – Ionic 2 Features:
– 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 https://ionicframework.com/docs/v2/resources/progressive-web-apps/ 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 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.
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.
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.