Post on 21-Mar-2017
transcript
ANGULAR VS REACTMOBILE FIRST BATTLEMichael Haberman
AGENDA
Angular VS React
Hybrid solution (Ionic)
Native solution (react-native)
Compare
ANGULAR 1.X
All around framework by Google
MVC based
Using dirty check to allow two way binding
MVC
Controller
View
Model
Controller
View
Model
Service
Timer
MVC - OVER RENDERING
item #1
item #2
item #3
item #4
item #5
item #6
item #7
ng-repeat=‘item in items’
$scope.items[2].name= “newValue”
ANGULAR 2.X
All around framework by Google
You can choose your architecture
MV*, Flux, Redux…
Component based
No more performance limit due to dirty check
REACT
Library by Facebook
JS, JSX and styles
Handle View only
Component based
Unidirectional data flow (NOT one way binding)
Flux
Redux
COMPONENT BASED?
Both Angular 2.x & React
COMPONENTS
Component
Component
Component
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'));
COMPONENTS RENDERING
item #1
item #2
item #3
item #4
item #5
item #6
item #7
props.items.map(…)
props.items[2].name= “newValue”
COMPONENT BASED?
Component is view layer only
What about all the rest?
UNIDIRECTIONAL
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 website
Responsive
Mobile Device
Hybrid
Native App
Native WebViewYour website
GOING TO MOBILE
Hybrid:
Download from store / play (store approval)
Allow access to native APIs
GOING TO MOBILE
Javascript
Cordova
Ionic
IONIC - FEATURES (ECO SYSTEM)
UI components
Native API’s
Push notification
Deployment
Ionic view
Package
Analytics
Database
Feedback
Auth
IONIC - UI COMPONENTS
http://ionicframework.com/docs/components
http://ionicframework.com/docs/api/
Cross platform UI components
IONIC - NATIVE APIS
https://market.ionic.io
Based on plug-ins
Community
Create your own
IONIC - DEPLOY
Deployment is problematic
Native package contains all resources (web & native)
Native package contains native & index.html
How to support update?
How to avoid previous versions
IONIC - VIEW
Let other people get your app
They should install ionic view
Your app is available through ionic view
Great for QA teams
IONIC - WHY
Rich UI
Easy to learn - previous angular knowledge
Shared code with website
Remote deploy
IONIC - WHY NOT
Limited native API access
Performance limits (Angular 1.x even worth)
Might not feel “native”
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
“Learn once - write anywhere”
REACT NATIVE
Mobile Device
React Native
Native App
REACT NATIVE
Components
Native API
Styles
Touch
Network
Animation
REACT NATIVE - COMPONENTS
Not HTML - platform specific
Let’s see the list
REACT NATIVE - APIS
API are platform specific
API are async
use async / await pattern
TCP based
REACT NATIVE - APIS
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
COMPARE
IONIC REACT NATIVE
UIHTML-CSS
Easy to implement common uiGets difficult with animation
JSX-STYLESGreat experience
Harder implementation
NATIVE APIPlug-in based TCP based
COMPARE
IONIC REACT NATIVE
DEPLOYMENTWeb based +
store Store only *
DEBUG Within browser & deviceEasy to setup
Device OnlyMore complicated
AGENDA
Angular VS React
Hybrid solution (Ionic)
Native solution (react-native)
Compare
QUESTIONS