hybrid vs native - philos.io
TRANSCRIPT
![Page 1: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/1.jpg)
Hybrid vs Native
Hybrid & Native
or
@philos_io
![Page 2: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/2.jpg)
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
![Page 3: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/3.jpg)
![Page 4: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/4.jpg)
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
![Page 5: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/5.jpg)
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
![Page 6: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/6.jpg)
Hybrid Development Cycle: Ionic
HTML5 Framework
Built on top ofAngularJS
Fastest tool to prototype your
idea
AngularJS Directives
![Page 7: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/7.jpg)
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]
![Page 8: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/8.jpg)
Hybrid Development Cycle: Ionic
WhatsApp on Github Ionic Version
![Page 9: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/9.jpg)
Become an hybrid-native Developer: React Native
What is React?
What is hybrid-native?
What is React Native?
![Page 10: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/10.jpg)
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.
![Page 11: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/11.jpg)
var Contact = React.createClass({ render: function() { return <div>Name: {this.props.name}</div>; }});
React.render(<Contact name="John" />, document.body);
What is React?
ReactJS
![Page 12: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/12.jpg)
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
![Page 13: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/13.jpg)
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> ); },});
![Page 14: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/14.jpg)
React Native in a nutshell
Touch Handling Native Components Styles & Layout
ES6 support out of the box Extensibility Polyfill
![Page 15: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/15.jpg)
Hybrid-Native Development Cycle: React Native
WhatsApp on Github React Native Version
![Page 16: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/16.jpg)
![Page 17: Hybrid vs native - Philos.io](https://reader035.vdocuments.net/reader035/viewer/2022080904/55c8e3ebbb61eb616b8b4809/html5/thumbnails/17.jpg)
To Be continued...