Desarrollo Móvil en Javascript: Cordova y React Native

Charla realizada en StarTechConf 2015.

Transcript

1. D E S A R R O L L O M Ó V I L E N J AVA S C R I P T C O R D O VA Y R E A C T N A T I V E Guillermo Moreno Quiroga @gmq | gmq@guillermomoreno.cl
 Desarrollador en Platanus
2. ¿ P O R Q U É J AVA S C R I P T ?
3. • Se pueden aplicar conocimientos ya adquiridos. • Menor especialización necesaria por parte del desarrollador. • Permite compartir código entre plataformas.
4. M I R A M A M Á : S I N M A N O S , S W I F T, O B J E C T I V E - C O J AVA
5. ¿ C U A L E S S O N N U E S T R A S A LT E R N AT I VA S ? Webview UI Nativa Cordova React Native CocoonJS Titanium NativeScript
7. C O R D O VA : C A PA S Dispositivo Wrapper Webview (HTML/CSS/JS)
8. P L U G I N S cordova plugin add cordova-plugin-contacts //app.js navigator.contacts.pickContact(function(contact){ document.getElementById(‘contacto').textContent = contact.name.formatted; },function(err){ console.log('Error: ' + err); });
9. Cualquier cosa que funcione en una webview es una aplicación válida en Cordova.
10. • Componentes UI que imitan la apariencia nativa • AngularJS • Transiciones y estilos por plataforma • Enfoque en performance • Ionic CLI • ionic serve
 ionic upload - Ionic View
11. E J E M P L O <ion-view view-title="Lista"> <ion-content class="padding"> <ion-list show-delete="true"> <ion-item ng-repeat="item in items">Item {{item.id}} <ion-delete-button class="ion-minus-circled" ng-click="items.splice($index, 1)"> </ion-delete-button> </ion-item> </ion-list> </ion-content> </ion-view>
12. R E A C T N AT I V E
13. R E A C T N AT I V E : C A PA S Dispositivo Motor JS Layout
14. R E A C T N AT I V E E S D I F E R E N T E var StarTechConf = React.createClass({ render: function() { return ( <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> <Text style={{justifyContent: 'center', fontSize: 50, margin: 10}}> StarTechConf </Text> <Text style={{fontSize: 20, marginBottom: 40}}> Esto es un ejemplo. </Text> </View> ); } });
15. J S X Y C S S • Componentes JSX reemplazan a HTML
 • Se usa un subgrupo de propiedades CSS y se declaran en JS <Text> <p> <Image> <img> <View> <div> <TouchableHighlight> <button> <TouchableNativeFeedback> <button> (android) <Text style={fontSize: 20, margin: 10}> <Text style={styles.ejemplo}> var styles = StyleSheet.create({ ejemplo: { fontSize: 20, padding: 20 }, });
16. T H E R E A C T WAY • Flujo en una dirección R E A C T N AT I V E D I F F C A M B I O S V I S TA
17. T H E R E A C T WAY • Componentes declarativos • Se cambian propiedades en vez de estar preocupado de la implementación • Facilita la introducción de desarrolladores nuevos
18. L E A R N O N C E U S E A N Y W H E R E I N D E X . I O S . J S I N D E X . A N D R O I D . J S var StarTechSwitch = React.createClass({ getInitialState : function() { return { SwitchIsOn: true }; }, handleChange: function(value) { console.log('El valor es...', value) this.setState({SwitchIsOn: value}); }, render: function() { return ( <View style={style.view}> <SwitchAndroid value={this.state.SwitchIsOn} onValueChange={this.handleChange} /> </View> ); }, }); var StarTechSwitch = React.createClass({ getInitialState : function() { return { SwitchIsOn: true }; }, handleChange: function(value) { console.log('El valor es...', value) this.setState({SwitchIsOn: value}); }, render: function() { return ( <View style={style.view}> <SwitchIOS value={this.state.SwitchIsOn} onValueChange={this.handleChange} /> </View> ); }, });
19. L E A R N O N C E U S E A N Y W H E R E I N D E X . I O S . J S I N D E X . A N D R O I D . J S var funcionComplicada = require('./funcionComplicada'); var StarTechSwitch = React.createClass({ getInitialState : function() { return { SwitchIsOn: true }; }, handleChange: function(value) { funcionComplicada(value); this.setState({SwitchIsOn: value}); }, render: function() { return ( <View style={style.view}> <SwitchAndroid value={this.state.SwitchIsOn} onValueChange={this.handleChange} /> </View> ); }, }); var funcionComplicada = require('./funcionComplicada'); var StarTechSwitch = React.createClass({ getInitialState : function() { return { SwitchIsOn: true }; }, handleChange: function(value) { funcionComplicada(value); this.setState({SwitchIsOn: value}); }, render: function() { return ( <View style={style.view}> <SwitchIOS value={this.state.SwitchIsOn} onValueChange={this.handleChange} /> </View> ); }, });
20. A C O N S I D E R A R 
 ( N O T O D O E S P E R F E C T O )
21. T I P O S D E A P L I C A C I Ó N • No todo se puede hacer con JavaScript. • Aplicaciones de “contenido” son mucho más apropiadas
22. D E P E N D E N C I A D E T E R C E R O S • Tanto React Native como Cordova dependen de plugins/componentes para interactuar de manera nativa con el dispositivo. • Si no existe, es necesario hacerlo de cero requiriendo conocimiento del lenguaje correspondiente.
23. L O O K & F E E L • HTML/CSS solo pueden imitar el aspecto nativo, nunca igualándolo. • React Native usa componentes pero hay que seguir las guidelines de UX de cada plataforma para lograr un resultado apropiado.
24. – J E F F AT W O O D “ T H E S TAT E O F J AVA S C R I P T O N A N D R O I D I N 2 0 1 5 I S … P O O R ” “In a nutshell, the fastest known Android device available today [Galaxy S6] -- and there are millions of Android devices much slower than that out there -- performs 5× slower than a new iPhone 6s, and a little worse than a 2012 era iPhone 5 in Ember.”
25. C O M PA R A N D O C O R D O VA R E A C T N AT I V E D E S A R R O L L O R Á P I D O R E Q U I E R E U N PA R A D I G M A N U E V O L I B E R TA D G R Á F I C A L I M I TA D O A C O M P O N E N T E S P E R F O R M A N C E L I M I TA D O A W E B V I E W U I N AT I VA P L ATA F O R M A M A D U R A T O D AV Í A E N S U S I N I C I O S S O B R E T O D O E N A N D R O I D
26. • Crear una aplicación híbrida es una alternativa viable • La experiencia de usuario no depende exclusivamente de la herramienta que se usas, depende del cuidado que se ponga en el desarrollo y diseño de la aplicación.
27. R E C U R S O S • https://github.com/facebook/react-native/
 (Código fuente - Ejemplos) • https://facebook.github.io/react-native/
 Documentación React Native • https://ionicframework.com
 Ionic • https://cordova.apache.org
 Apache Cordova
28. ¡ G R A C I A S !