Ionic(Angular) Hybrid App

vs

React Native Mobile App

KD Chang

About Me

張凱迪（KD Chang）

臺灣大學資管所、經濟系

半路出家的工程師

喜歡 JavaScript, Python,

熱愛用科技和商業打造好用產品

夢想是辦一所心目中理想的學校

想當年...

看看現在...

還有你們

Before React Native...

iOS

Android

Hybrid

Write Once, Run Everywhere !

Write Once, ~~Bug~~ Everywhere !

Hybrid Mobile App

Mobile UI

JS Framework

Device Library

Database(Restful)

+

+

=

Ionic Featured

1. Angular Integrated

2. Minimal DOM manipulation, zero jQuery, and hardware accelerated

3. Mobile like UI components

4. Cordova/Phonegap(ngCordova)

5. Write Once, Run Everywhere !

Ionic Pros

1. Test your idea fast

2. Small file size

3. Easy to migrate from web

4. Write Once, Run Everywhere !

Ionic Cons

1. Can't do complicated app

2. Poor performance with complex components

(e.g. Google Maps)

3. Toyish

Get Started!

// 安裝 ionic, cordova, Node.js 4
$ npm install -g cordova ionic

// init project
$ ionic start myApp tabs

$ cd myApp

// add platform
$ ionic platform add ios

// build app
$ ionic build ios

// emulate, run app 
$ ionic emulate ios 
$ ionic run ios

Ionic Creator

React Native

React Ecosystem

React Pros

1. Good community and ecosystem

2. Native UI component, Good performance!

3. Learn once, write everywhere!

4. Code reuse, from the Web

Requirements

OS X - This guide assumes OS X which is needed for iOS development.
Homebrew is the recommended way to install Watchman and Flow.
Install Node.js 4.0 or newer.
- Install nvm with its setup instructions here. Then run nvm install node && nvm alias default node, which installs the latest version of Node.js and sets up your terminal so you can run it by typing node. With nvm you can install multiple versions of Node.js and easily switch between them.
- New to npm?
brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
brew install flow, if you want to use flow.

Getting Started

$ npm install -g react-native-cli
$ react-native init AwesomeProject

Native Components

// iOS
var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;

var App = React.createClass({
  render: function() {
    return (
      <TabBarIOS>
        <TabBarIOS.Item title="React Native" selected={true}>
          <NavigatorIOS initialRoute={{ title: 'React Native' }} />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  },
});

Native Components

// Android
var React = require('react-native');
var { DrawerLayoutAndroid, ProgressBarAndroid } = React;

var App = React.createClass({
  render: function() {
    return (
      <DrawerLayoutAndroid
        renderNavigationView={() => <Text>React Native</Text>}>
        <ProgressBarAndroid />
      </DrawerLayoutAndroid>
    );
  },
});