react vs-angular-mobile
TRANSCRIPT
ANGULAR VS REACT - MOBILEMichael HabermanFreelancer
AGENDA
Angular VS React
Hybrid solution (Ionic)
Native solution (react-native)
Compare
ANGULAR
All around framework
MVC based
Routing
MVCs sync by services / events / root scope
Two way binding via dirty checking
A lot of re-rendering
ANGULAR DIAGRAM
Controller
View
Model
Controller
View
Model
Service
Timer
REACT
Library and not a framework
Handle View only (virtual DOM)
Component based
Unidirectional data flow (NOT one way binding)
Flux
No official router
REACT COMPONENTS
var toggleButton = React.createClass({ getInitialState: function() { return {toggled: false}; }, handleClick: function(event) { this.setState({toggled: !this.state.toggled}); }, render: function() { return ( <p onClick={this.handleClick}> {this.state.toggled} . </p> ); }});
ReactDOM.render( <toggleButton />, document.getElementById('example'));
REACT COMPONENTS
var container = React.createClass({ render: function() { return ( {this.props.containerData} <child childData ={this.props.childData}/> ); }});
var child = React.createClass({ render: function() { return ( {this.props.childData} ); }});
ReactDOM.render( <container containerData=“c” childData=“d" />, document.getElementById('example'));
REACT
setState cause re-render
Virtual DOM: better performance
REACT - FLUX
Actions Dispatcher Stores Component
Component
ComponentBackend
AGENDA
Angular VS React
Hybrid solution (Ionic)
Native solution (react-native)
Compare
GOING TO MOBILE
Mobile Device
Browser
Your App
Responsive
Mobile Device
Hybrid
Native App
Native WebViewYour App
GOING TO MOBILE
Hybrid:
Download from store / play
Allow access to native APIs
Store approval
GOING TO MOBILE
Access to native APIs
Performance
Native look and feel (cross platform)
Touch
Offline
App Store / Google Play
Navigation is harder
Multi devices
IONIC
Framework based on angular
Native plugins
Native look and feel
Allow platform-specific specifications
IONIC
Demo
IONIC - WHY
Rich UI
Easy to learn
Shared code with website
Remote deploy
No special learning
Easy development tools
IONIC - WHY NOT
Limited native API access
Performance limits
Lock-in with Ionic and Angular
AGENDA
Angular VS React
Hybrid solution (Ionic)
Native solution (react-native)
Compare
REACT NATIVE
Javascript framework
Compiles into native app
Uses React as view layer
Special components (translated into native)
Component per platform
“Learn once - write anywhere”
REACT NATIVE
Demo
REACT WHY
Native!
No performance limit
Javascript - libraries
REACT WHY NOT
Less shared code with web (and must be in react as well)
Learning curve
Duplicate coding
Not HTML / CSS
AGENDA
Angular VS React
Hybrid solution (Ionic)
Native solution (react-native)
Compare
COMPARE
IONIC REACT NATIVE
WEB REUSE Most of the code Some of the code
LEARNING Small curve Large curve
PLATFORM SPECIFIC
Minimal (if any) Most of the code
PERFORMANCE Limited As native
NATIVE API Limited UnlimitedPERVIOUS
KOWNLEDGE
AGENDA
Angular VS React
Hybrid solution (Ionic)
Native solution (react-native)
Compare
QUESTIONS
