Ionic(Angular) Hybrid App

vs

React Native Mobile App

KD Chang 

About Me

張凱迪（KD Chang）

臺灣大學資管所、經濟系

半路出家的工程師

喜歡 JavaScript, Python, 

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

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

想當年...

看看現在...

還有你們

Before React Native...

Write Once, Run Everywhere !

Write Once, Bug Everywhere !

Hybrid Mobile App

Ionic Featured

Ionic Pros

Ionic Cons

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

Requirements

1. OS X - This guide assumes OS X which is needed for iOS development.
2. Homebrew is the recommended way to install Watchman and Flow.
3. 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?
4. brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
5. 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>
    );
  },
});