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 [email protected]
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...