React vs-angular-mobile
This document compares Angular and React frameworks for mobile development, discussing hybrid solutions using Ionic and native solutions using React Native. It provides an overview of Angular and React, describing Angular as an MVC framework with two-way binding and React as a component-based library with unidirectional data flow. It then discusses Ionic as an Angular-based hybrid framework that allows access to some native APIs and React Native, which compiles JavaScript to native code for better performance and full native API access. In the comparison section, it summarizes that Ionic shares more code with the web but has limited performance and native capabilities, while React Native requires more platform-specific code but has native performance and full feature support.
React vs-angular-mobile
- 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
- 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”
- 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