React Vs angular in the fight to be the best at mobile. Reviews the native vs hybrid solution, also address both angular 1.x and angular 2.x

1. ANGULARVS REACT
MOBILE FIRST BATTLE
Michael Haberman

2. AGENDA
AngularVS React
Hybrid solution (Ionic)
Native solution (react-native)
Compare

3. ANGULAR 1.X
All around framework by Google
MVC based
Using dirty check to allow two way binding

4. MVC
Controller
View
Model
Controller
View
Model
Service
Timer

5. 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”

6. 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

7. REACT
Library by Facebook
JS, JSX and styles
HandleView only
Component based
Unidirectional data flow (NOT one way binding)
Flux
Redux

8. COMPONENT BASED?
Both Angular 2.x & React

9. COMPONENTS
Component
Component
Component

10. 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')
);

11. 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')
);

12. COMPONENTS RENDERING
item #1
item #2
item #3
item #4
item #5
item #6
item #7
props.items.map
(…)
props.items[2].name= “newValue”

13. COMPONENT BASED?
Component is view layer only
What about all the rest?

14. UNIDIRECTIONAL
Actions Dispatcher Stores Component
Component
ComponentBackend

15. AGENDA
AngularVS React
Hybrid solution (Ionic)
Native solution (react-native)
Compare

16. GOINGTO MOBILE
Mobile Device
Browser
Your website
Responsive
Mobile Device
Hybrid
Native App
Native WebView
Your website

17. GOINGTO MOBILE
Hybrid:
Download from store / play (store approval)
Allow access to native APIs

18. GOINGTO MOBILE
Javascript
Cordova
Ionic

19. IONIC - FEATURES (ECO SYSTEM)
UI components
Native API’s
Push notification
Deployment
Ionic view
Package
Analytics
Database
Feedback
Auth

20. IONIC - UI COMPONENTS
http://ionicframework.com/docs/components
http://ionicframework.com/docs/api/
Cross platform UI components

21. IONIC - NATIVE APIS
https://market.ionic.io
Based on plug-ins
Community
Create your own

22. 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

23. IONIC -VIEW
Let other people get your app
They should install ionic view
Your app is available through ionic view
Great for QA teams

24. IONIC - WHY
Rich UI
Easy to learn - previous angular knowledge
Shared code with website
Remote deploy

25. IONIC - WHY NOT
Limited native API access
Performance limits (Angular 1.x even worth)
Might not feel “native”

26. AGENDA
AngularVS React
Hybrid solution (Ionic)
Native solution (react-native)
Compare

27. REACT NATIVE
Javascript framework
Compiles into native app
Uses React as view layer
“Learn once - write anywhere”

28. REACT NATIVE
Mobile Device
React Native
Native App

29. REACT NATIVE
Components
Native API
Styles
Touch
Network
Animation

30. REACT NATIVE - COMPONENTS
Not HTML - platform specific
Let’s see the list

31. REACT NATIVE - APIS
API are platform specific
API are async
use async / await pattern
TCP based

32. REACT NATIVE - APIS

33. REACT WHY
Native!
No performance limit
Javascript - libraries

34. REACT WHY NOT
Less shared code with web (and must be in react as well)
Learning curve
Duplicate coding
Not HTML / CSS

35. AGENDA
AngularVS React
Hybrid solution (Ionic)
Native solution (react-native)
Compare

36. 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

37. 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

38. COMPARE
IONIC REACT NATIVE
DEPLOYMENT
Web based +
store
Store only *
DEBUG
Within browser & device
Easy to setup
Device Only
More complicated

39. AGENDA
AngularVS React
Hybrid solution (Ionic)
Native solution (react-native)
Compare

40. QUESTIONS

41. THANKYOU
michael@haberman.io
@hab_mic