React vs-angular-mobile

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

THANK YOU

michael@haberman.io

@hab_mic