Cross platform mobile application frameworks

Native

Hybrid

Cross-platform

(Ionic2 vs. NativeScript vs React Native)

Classic way:

Native apps(iOS, Android)

• performance
• different codebases and languages

Sencha/ExtJS, Xamarin

• Proprietary
• Expensive

2017 way:

 the creation of mobile applications through web technologies (i.e., HTML, CSS, JavaScript, etc.).

Hybrid apps 

• Good performance
• Ionic 2 is a hybrid mobile development framework
• Truly platform-independent applications
• Use Cordova as a bridge to native controls
• HTML/CSS3 based layout familiar for webdevs
• Apps running in WebView
• Single codebase for cross-platform development

Ionic (v1, v2)

Cross-platform native

• Even better performance
• Directly access all native platform APIs
• More platform-specific code
• Can use JS (but no DOM)
• Complexity of the development itself
  

NativeScript + Angular2, React Native

Ionic2

• Angular 2 - cutting edge of mobile/web development 
• PWA (Progressive Web App): getting the app-like experience by using the modern web technologies
• Ionic 1 - ngCordova to access native API (wraps the native functionality to AngularJS libraries)

Ionic 2 supports Ionic Native which does the same thing as ngCordova, but more smoothly. For example, it wraps the plugin callbacks in Promises or an Observable, so a common interface is provided for all plugins, supporting the ease of use of native functionalities.

Title Text

Text

import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any = HelloIonicPage;
  pages: Array<{title: string, component: any}>;

  constructor(
    public platform: Platform,
    public menu: MenuController
  ) {
    this.initializeApp();
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage },
    ];
  }
  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
  openPage(page) {
    this.menu.close();
    this.nav.setRoot(page.component);
  }
}

Ionic CLI

The Ionic CLI is the primary tool used during the process of developing an Ionic app. The CLI contains a number of commands crucial for Ionic development, such as start, build, serve, and run. It also contains commands like emulate and info, which can be helpful in certain situations.

$npm install -g ionic cordova

$ionic start sampleProject --v2

$ cd sampleProject
$ ionic serve

Pros:

• Hybrid web development support. Same code-based can be used to develop applications for Android, iOS, Windows Phone, and web.

• VERY fast development-testing cycle. You write the code and test it on the browser, no need for heavy emulator loading.

• Allow you to write code in TypeScript, making the transition from AngularJS 2 very easy.

• The same language (TypeScript) can be used to develop applications for every platform.

• Its plugin system makes it available for you to use any kind of native functionalities of devices.

Cons:

• Performance issues may occur if you need to use a lot of callbacks to the native code.

• The same UI look in all the devices may be a deal breaker for those who prefer the native UI look.

• Development of highly advanced graphics or highly interactive transitions can be a complex job.

React Native

import React, { Component } from 'react';
import { Image, ScrollView, Text } from 'react-native';

class AwkwardScrollingImageWithText extends Component {
  render() {
    return (
      <ScrollView>
        <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} />
        <Text>
          On iOS, a React Native ScrollView uses a native UIScrollView.
          On Android, it uses a native ScrollView.

          On iOS, a React Native Image uses a native UIImageView.
          On Android, it uses a native ImageView.

          React Native wraps the fundamental native components, giving you
          the performance of a native app, plus the clean design of React.
        </Text>
      </ScrollView>
    );
  }
}

React Native

"With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React"

Virtual DOM for updating the UI

 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. Unlike Ionic, it is not designed to write once, run everywhere, so you need to change some platform specific code in your program, because the purpose is to create the most native look as possible.

Unlike Ionic 2, both ReactNative and NativeScript uses the native UI components from native OS of specific platforms, so you are writing the components in JavaScript, but they are actually using those native components behind the scene.

npm install -g react-native-cli
$ react-native init sampleApp
$ cd sampleApp
$ react-native start

Pros:

• You can use the same code-base (most of the time) to develop applications for Android, iOS, Windows Phone.

• Similar to React ES6, you can use JSX to program your application with combined JavaScript, HTML and JSX.

• Much better performance than Cordova in Ionic. Hardware functionalities are processed by the specific platform, and not by Cordova.

• ReactNative uses multiple cores simultaneously so your JavaScript code runs on one core and the app view runs on another core

Cons:

• The process of conversion of HTML code to native code can be buggy at times, and to fix the problems, you need to understand ObjC/Swift.

• Originally created for iOS, so many components for the Android may require some work from your side.

• The use of JavaScript (or ES6) may you give the outdated feeling, especially if you are coming from TypeScript background.

NativeScript

Unlike ReactNative, NativeScript uses the native UI code (for respective Android and iOS phones) even though you are writing the code in TypeScript/JavaScript. If we consider the performance side, then NativeScript really has the edge over ReactNative, because it is using AngularJS 2 structure for creating components.

With TypeScript and Angular 2, you can very easily create components for mobile apps using a declarative style. Claiming to support “write it once, run it everywhere”, the same Angular 2 code can be utilized for the UI for all the platforms it is targeting. NativeScript is a real cross-platform, which means 100% Native API access and its mission is to allow people to use the same code-base for all the platforms.

by Telerik

More mature than React Native (2.0 vs beta)

NativeScript

tns create HelloWorld --template nativescript-template-ng-tutorial

tns run

Pros:

• Real cross-platform support. Single code-base for developing apps for all the supported platforms.
• 100% Native API access. You can access the hardware features like camera, touch, calendar, phone calls, etc. all with TypeScript/JavaScript code.
• Uses the AngularJS 2 so you can easily transfer your previous web components in your applications.
• Very good support from Telerik.

Cons:

• Many plugins need to be downloaded separately for the components. Not all plugins are available or verified (i.e., thoroughly tested).
• App size is much larger than ReactNative and Ionic 2. If your users have slow internet connection, then it may be a problem for you.
• There’s no support of HTML and DOM in NativeScript, so you need to learn different UI components to build UI of the applications.

Title Text

• http://www.discoversdk.com/blog/ionic-2-vs-reactnative-vs-nativescriptBullet Two
• http://thinkapps.com/blog/development/develop-for-ios-v-android-cross-platform-tools/
• https://facebook.github.io/react-native/
• http://ionicframework.com/docs/
• http://docs.nativescript.org/angular/tutorial/ng-chapter-0