Lo mejor y peor de React Native @ValenciaJS
Una charla sobre React Native que di el 23 de Marzo 2017 en el meetup ValenciaJS: https://www.meetup.com/es-ES/ValenciaJS/events/238249872/ En 2016 desarrollé durante seis meses una aplicación para React Native. En esta charla compartí todo lo que he aprendido sobre este framework, y cómo os puede servir para crear una app nativa para iOS y Android al mismo tiempo de manera rápida y ágil. Hablé sobre la parte positiva, y las cosas que aceleraron nuestro proceso de desarrollo, pero también sobre algunos inconvenientes que hay que tener en cuenta. Se trata sobre todo de problemas muy específicos de cada plataforma, poner en marcha un flujo de integración continua y facilitar un proceso sencillo de testar la app con los usuarios. React Native es una buena solución que está muy de moda pero esto no significa que hay que usarlo sin analizar bien las necesidades de tu proyecto. Presenté brevemente una alternativa (Ionic 2) y conté que ventajas tiene en comparación con React Native desde mi punto de vista.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Lo mejor y peor de React Native @ValenciaJS
Similar to Lo mejor y peor de React Native @ValenciaJS (20)
Recently uploaded
Recently uploaded (20)
Lo mejor y peor de React Native @ValenciaJS
- 1. Lo mejor y peor de React Native
- 5. Por qué React Native?
- 6. Crea apps nativas con JavaScript y React Aprender una vez, usar en ambas plataformas Soporta código nativo donde es necesario No es como Titanium, PhoneGap o Ionic 2 No usa el WebView como contenedor No tienes que recompilar cada vez
- 7. 80 % Aproximadamente el 80% del código JavaScript se comparte entre iOS y Android
- 8. Compatibilidad iOS 8.0+Android 4.1 (API 16)
- 9. Tecnología
- 10. clases template strings destructuring JSX React Native Packager incluye el compilador de Babel
- 13. Primeros pasos
- 14. facebook.github.io Proceso largo y complejo Windows/Linux no soportan iOS
- 15. Create React Native $ npm i -g create-react-native-app Expo Client No necesitas xCode o Android Studio Desarrollo para iOS en Windows/Linux $ create-react-native-app my-project $ cd my-project $ npm start
- 16. sketch.expo.io
- 17. EcmaScript 6
- 18. App "ValenciaJS"
- 22. Componentes
- 24. Text TouchableHighlight Image imagen estática puede contener otros elementos Text imagen dinámica: tiene que ser https en iOS hereda estilos usuario hace click sólo un hijo
- 26. Estilos
- 30. Flexbox
- 31. justify-content align-items flex-direction space-around space-between center flex-start flex-end center row column stretch flex-start flex: 1 flex-end
- 32. Platform
- 34. No hay dimensiones porcentuales (sólo absolutas) No existe una cascada de estilos No hay componentes predefinidos Usa Dimensions y Flexbox para todo Utiliza estilos globales Usa Pepperoni o NativeBase
- 35. Depurar código
- 36. react-native run-ios xCode simulador react-native run-android Android Studio/Genymotion
- 37. ⌘+D (iOS) ⌘+M/CTRL+M (Android)
- 39. Hot reloading
- 40. APIs
- 44. Alert
- 46. AsyncStorage
- 48. CameraRoll
- 50. GeoLocation
- 52. Linking
- 54. NetInfo none | wifi | cell | unknown NONE | BLUETOOTH | DUMMY | ETHERNET | MOBILE | MOBILE_DUN | MOBILE_HIPRI | MOBILE_MMS | MOBILE_SUPL | VPN | WIFI | WIMAX | UNKNOWN
- 56. Share
- 58. $ react-native link $ react-native link react-native-code-push $ react-native link react-native-airbnb-maps
- 61. AppDelegate.m
- 62. Info.plist
- 63. build.gradle
- 65. settings.gradle
- 66. Comparación
- 67. React Native Ionic 2 Lenguaje React/JSX TypeScript/Angular 2 Plantillas JSX HTML Hilos de ejecución 2 (UI + lógica) 1 Rendimiento Nativo WebView Componentes predefinidos No Si Plugins npm + Cordova Cordova Soporte para Windows No Si Soporte para escritorios No Si GitHub stars 46.000 28.000
- 68. Resumen
- 69. Mejor rendimiento gracias a código nativo Mucha repercusión gracias a Facebook React es cada vez más popular Curva de aprendizaje muy larga No hay componentes predefinidos No hay soporte para Windows o web
- 70. Recursos
- 75. Gracias a
- 76. ¡Muchas gracias!
- 77. Código interno
- 78. React Native Packager index.bundle.js servidor local Websocket APK IPA Simulador Móvil index.bundle.js UI JS
- 79. index.bundle.js App nativa MessageQueue Llamadas JavaScript -> Native Callbacks Native -> JavaScript peticiones red renderizar elementos animaciones invocación de código nativo respuesta red dimensiones interaction del usuario respuestas de módulos nativos facebook.github.io/react-native/docs/
- 82. Android Studio xCode Google Play iTunes Connect IPAAPK
- 84. GitHub Google Play iTunes Connect IPAAPK
- 86. GitHub Bitrise Workflow Google Play iTunes Connect IPAAPK Microsoft CodePush CodePush
- 87. $ npm install --save react-native-code-push@latest $ react-native link react-native-code-push
- 88. $ code-push release-react valenciaJS ios $ code-push release-react valenciaJS android
- 89. Bitrise Workflow TestFairy Google Play iTunes Connect IPAAPK Microsoft CodePush CodePush GitHub