Hybrid vs Native

Hybrid & Native

or

@philos_io

Agenda

• Hybrid Applications

• Native Applications

• Web developers are hybrid developers

o The Ionic Framework by Drifty.co

• Web developers are Native developers

o React Native by Facebook

• Use case: Designing WhatsApp

• Q&A: Feel free to ask your questions as we go

Hybrid Applications

• Using web technologies

• Run inside WebView

• Access Native features using JS-[Java| Swift|Objective-C] bridges, mostly through Cordova

• Faster development cycle -> Faster time to market

• More resource available (Web devs)

• Deploy on App specific stores

Native Applications

• Using higher programming languages

• Access natively all platforms specific APIs

• Perform better

• Touch handling is better

• Very complex animations

• Development lifecycle is tedious and costly

Hybrid Development Cycle: Ionic

HTML5 Framework

Built on top ofAngularJS

Fastest tool to prototype your

idea

AngularJS Directives

Hybrid Development Cycle: Ionic

Workflow

$ npm install ionic -g

$ ionic start whatsapp tabs

$ cd whatsapp

$ ionic serve

$ ionic serve --lab

$ ionic run --livereload

$ ionic run --device --livereload

Useful command

$ ionic templates

$ ionic platform add [android|ios]

$ ionic run --device

$ ionic login

$ ionic upload

$ ionic share davy@philos.io

Hybrid Development Cycle: Ionic

WhatsApp on Github Ionic Version

Become an hybrid-native Developer: React Native

What is React?

What is hybrid-native?

What is React Native?

What is React?

UI Components Virtual DOM Immutable data

Can be used with any other frameworks (Ember, Angular…)

Abstract away the DOM and does all operations on the VD before

updating the real DOM

Data flow in one direction, which brings a simple model to reason

about.

var Contact = React.createClass({ render: function() { return <div>Name: {this.props.name}</div>; }});

React.render(<Contact name="John" />, document.body);

What is React?

ReactJS

Hybrid-Native Development Cycle: React Native

Workflow

$ npm install react-native-cli -g

$ react-native init whatsapp

$ cd whatsapp

$ Open whatsapp on Xcode

$ Build and run whatsapp

Useful command

$ CMD+D or Crtl+D to open contextual window

$ CMD+R to refresh

Hybrid-Native Development Cycle: React Native

React Native in a nutshell

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> ); },});

React Native in a nutshell

Touch Handling Native Components Styles & Layout

ES6 support out of the box Extensibility Polyfill

Hybrid-Native Development Cycle: React Native

WhatsApp on Github React Native Version

To Be continued...