In this talk I presented to differences between Angular with Ionic and React Native

1. ANGULARVS REACT - MOBILE
Michael Haberman
Freelancer

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

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

4. ANGULAR DIAGRAM
Controller
View
Model
Controller
View
Model
Service
Timer

5. REACT
Library and not a framework
HandleView only (virtual DOM)
Component based
Unidirectional data flow (NOT one way binding)
Flux
No official router

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

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

8. REACT
setState cause re-render
Virtual DOM: better performance

9. REACT - FLUX
Actions Dispatcher Stores Component
Component
ComponentBackend

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

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

12. GOINGTO MOBILE
Hybrid:
Download from store / play
Allow access to native APIs
Store approval

13. GOINGTO MOBILE
Access to native APIs
Performance
Native look and feel (cross platform)
Touch
Offline
App Store / Google Play
Navigation is harder
Multi devices

14. IONIC
Framework based on angular
Native plugins
Native look and feel
Allow platform-specific specifications

15. IONIC
Demo

16. IONIC - WHY
Rich UI
Easy to learn
Shared code with website
Remote deploy
No special learning
Easy development tools

17. IONIC - WHY NOT
Limited native API access
Performance limits
Lock-in with Ionic and Angular

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

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

20. REACT NATIVE
Demo

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

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

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

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

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

26. QUESTIONS

27. THANKYOU
michael@haberman.io
@hab_mic