ANGULARVS REACT MOBILE FIRST BATTLE Michael Haberman
AGENDA AngularVS 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 HandleView 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 AngularVS React Hybrid solution (Ionic) Native solution (react-native) Compare
GOINGTO MOBILE Mobile Device Browser Your website Responsive Mobile Device Hybrid Native App Native WebView Your website
GOINGTO MOBILE Hybrid: Download from store / play (store approval) Allow access to native APIs
GOINGTO 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 AngularVS 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 AngularVS 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 Unlimited PERVIOUS KOWNLEDGE
COMPARE IONIC REACT NATIVE UI HTML-CSS
 Easy to implement common ui Gets difficult with animation JSX-STYLES Great experience Harder implementation NATIVE API Plug-in based TCP based
COMPARE IONIC REACT NATIVE DEPLOYMENT Web based + store Store only * DEBUG Within browser & device Easy to setup Device Only More complicated
AGENDA AngularVS React Hybrid solution (Ionic) Native solution (react-native) Compare
QUESTIONS
THANKYOU michael@haberman.io @hab_mic

React vs angular (mobile first battle)