React vs angular (mobile first battle)

Download React vs angular (mobile first battle)

Post on 21-Mar-2017

120 views

Category:

Mobile

1 download

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 ( {this.state.toggled} . ); }});

    ReactDOM.render( , document.getElementById('example'));

  • REACT COMPONENTS

    var container = React.createClass({ render: function() { return ( {this.props.containerData} ); }});

    var child = React.createClass({ render: function() { return ( {this.props.childData} ); }});

    ReactDOM.render(

  • 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 APIs

    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

    http://ionihttp://ionicframework.com/docs/componentshttp://ionicframework.com/docs/api/

  • IONIC - NATIVE APIS

    https://market.ionic.io

    Based on plug-ins

    Community

    Create your own

    https://market.ionic.io

  • 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

    Lets 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 setupDevice Only

    More complicated

  • AGENDA

    Angular VS React

    Hybrid solution (Ionic)

    Native solution (react-native)

    Compare

  • QUESTIONS

  • THANK YOU

    michael@haberman.io

    @hab_mic

    mailto:michael@haberman.io?subject=