Lo mejor y peor de React Native @ValenciaJS

325 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Internet
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
325
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Lo mejor y peor de React Native @ValenciaJS

  1. 1. Lo mejor y peor de React Native
  2. 2. Marcel Kalveram @marcelkalveram
  3. 3. Prepd getprepd.com
  4. 4. Por qué React Native?
  5. 5. 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
  6. 6. 80 % Aproximadamente el 80% del código JavaScript se comparte entre iOS y Android
  7. 7. Compatibilidad iOS 8.0+Android 4.1 
 (API 16)
  8. 8. Tecnología
  9. 9. clases template strings destructuring JSX React Native Packager incluye el compilador de Babel
  10. 10. Primeros pasos
  11. 11. facebook.github.io Proceso largo y complejo Windows/Linux no soportan iOS
  12. 12. 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
  13. 13. sketch.expo.io
  14. 14. EcmaScript 6
  15. 15. App "ValenciaJS"
  16. 16. https://github.com/wearehanno/valencia-js
  17. 17. Componentes
  18. 18. View android.view UIView
  19. 19. 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
  20. 20. Navegación TabNavigator StackNavigator
  21. 21. Estilos
  22. 22. backfaceVisibility backgroundColor opacity borderColor borderRadius borderStyle borderWidth alignItems alignSelf flex flexBasis flexDirection flexGrow flexShrink flexWrap justifyContent margin marginBottom marginHorizontal marginLeft marginRight marginTop marginVertical padding paddingBottom paddingHorizontal paddingLeft paddingRight paddingTop paddingVertical position bottom left right top width height minWidth minHeight maxWidth maxHeight overflow zIndex
  23. 23. Flexbox
  24. 24. 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
  25. 25. Platform
  26. 26. getpepperoni.com UI toolkits NativeBase nativebase.io
  27. 27. 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
  28. 28. Depurar código
  29. 29. react-native run-ios xCode simulador react-native run-android Android Studio/Genymotion
  30. 30. ⌘+D (iOS) ⌘+M/CTRL+M (Android)
  31. 31. Hot reloading
  32. 32. APIs
  33. 33. AccessibilityInfo ActionSheetIOS AdSupportIOS Alert AlertIOS Animated AppRegistry AppState AsyncStorage BackAndroid CameraRoll Clipboard DatePickerAndroid Dimensions Easing Geolocation ImageEditor ImagePickerIOS ImageStore InteractionManager Keyboard LayoutAnimation Linking NativeMethodsMixin NetInfo PanResponder PermissionsAndroid PixelRatio PushNotificationIOS Settings Share StatusBarIOS StyleSheet Systrace TimePickerAndroid ToastAndroid Vibration VibrationIOS Layout/Shadow Props
  34. 34. AccessibilityInfo ActionSheetIOS AdSupportIOS Alert AlertIOS Animated AppRegistry AppState AsyncStorage BackAndroid CameraRoll Clipboard DatePickerAndroid Dimensions Easing Geolocation ImageEditor ImagePickerIOS ImageStore InteractionManager Keyboard LayoutAnimation Linking NativeMethodsMixin NetInfo PanResponder PermissionsAndroid PixelRatio PushNotificationIOS Settings Share StatusBarIOS StyleSheet Systrace TimePickerAndroid ToastAndroid Vibration VibrationIOS Layout/Shadow Props
  35. 35. Alert
  36. 36. AccessibilityInfo ActionSheetIOS AdSupportIOS Alert AlertIOS Animated AppRegistry AppState AsyncStorage BackAndroid CameraRoll Clipboard DatePickerAndroid Dimensions Easing Geolocation ImageEditor ImagePickerIOS ImageStore InteractionManager Keyboard LayoutAnimation Linking NativeMethodsMixin NetInfo PanResponder PermissionsAndroid PixelRatio PushNotificationIOS Settings Share StatusBarIOS StyleSheet Systrace TimePickerAndroid ToastAndroid Vibration VibrationIOS Layout/Shadow Props
  37. 37. AsyncStorage
  38. 38. AccessibilityInfo ActionSheetIOS AdSupportIOS Alert AlertIOS Animated AppRegistry AppState AsyncStorage BackAndroid CameraRoll Clipboard DatePickerAndroid Dimensions Easing Geolocation ImageEditor ImagePickerIOS ImageStore InteractionManager Keyboard LayoutAnimation Linking NativeMethodsMixin NetInfo PanResponder PermissionsAndroid PixelRatio PushNotificationIOS Settings Share StatusBarIOS StyleSheet Systrace TimePickerAndroid ToastAndroid Vibration VibrationIOS Layout/Shadow Props
  39. 39. CameraRoll
  40. 40. AccessibilityInfo ActionSheetIOS AdSupportIOS Alert AlertIOS Animated AppRegistry AppState AsyncStorage BackAndroid CameraRoll Clipboard DatePickerAndroid Dimensions Easing Geolocation ImageEditor ImagePickerIOS ImageStore InteractionManager Keyboard LayoutAnimation Linking NativeMethodsMixin NetInfo PanResponder PermissionsAndroid PixelRatio PushNotificationIOS Settings Share StatusBarIOS StyleSheet Systrace TimePickerAndroid ToastAndroid Vibration VibrationIOS Layout/Shadow Props
  41. 41. GeoLocation
  42. 42. AccessibilityInfo ActionSheetIOS AdSupportIOS Alert AlertIOS Animated AppRegistry AppState AsyncStorage BackAndroid CameraRoll Clipboard DatePickerAndroid Dimensions Easing Geolocation ImageEditor ImagePickerIOS ImageStore InteractionManager Keyboard LayoutAnimation Linking NativeMethodsMixin NetInfo PanResponder PermissionsAndroid PixelRatio PushNotificationIOS Settings Share StatusBarIOS StyleSheet Systrace TimePickerAndroid ToastAndroid Vibration VibrationIOS Layout/Shadow Props
  43. 43. Linking
  44. 44. AccessibilityInfo ActionSheetIOS AdSupportIOS Alert AlertIOS Animated AppRegistry AppState AsyncStorage BackAndroid CameraRoll Clipboard DatePickerAndroid Dimensions Easing Geolocation ImageEditor ImagePickerIOS ImageStore InteractionManager Keyboard LayoutAnimation Linking NativeMethodsMixin NetInfo PanResponder PermissionsAndroid PixelRatio PushNotificationIOS Settings Share StatusBarIOS StyleSheet Systrace TimePickerAndroid ToastAndroid Vibration VibrationIOS Layout/Shadow Props
  45. 45. NetInfo none | wifi | cell | unknown NONE | BLUETOOTH | DUMMY | ETHERNET | MOBILE | MOBILE_DUN | MOBILE_HIPRI | MOBILE_MMS | MOBILE_SUPL | VPN | WIFI | WIMAX | UNKNOWN
  46. 46. AccessibilityInfo ActionSheetIOS AdSupportIOS Alert AlertIOS Animated AppRegistry AppState AsyncStorage BackAndroid CameraRoll Clipboard DatePickerAndroid Dimensions Easing Geolocation ImageEditor ImagePickerIOS ImageStore InteractionManager Keyboard LayoutAnimation Linking NativeMethodsMixin NetInfo PanResponder PermissionsAndroid PixelRatio PushNotificationIOS Settings Share StatusBarIOS StyleSheet Systrace TimePickerAndroid ToastAndroid Vibration VibrationIOS Layout/Shadow Props
  47. 47. Share
  48. 48. Plugins de terceros
  49. 49. $ react-native link $ react-native link react-native-code-push $ react-native link react-native-airbnb-maps
  50. 50. AppDelegate.m
  51. 51. Info.plist
  52. 52. build.gradle
  53. 53. MainApplication.java
  54. 54. settings.gradle
  55. 55. Comparación
  56. 56. 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
  57. 57. Resumen
  58. 58. 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
  59. 59. Recursos
  60. 60. Gracias a
  61. 61. ¡Muchas gracias!
  62. 62. Código interno
  63. 63. React Native Packager index.bundle.js servidor local Websocket APK IPA Simulador Móvil index.bundle.js UI JS
  64. 64. 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/
  65. 65. Integración continua
  66. 66. Android Studio xCode Google Play iTunes Connect IPAAPK
  67. 67. GitHub Google Play iTunes Connect IPAAPK
  68. 68. GitHub Bitrise Workflow Google Play iTunes Connect IPAAPK Microsoft CodePush CodePush
  69. 69. $ npm install --save react-native-code-push@latest $ react-native link react-native-code-push
  70. 70. $ code-push release-react valenciaJS ios $ code-push release-react valenciaJS android
  71. 71. Bitrise Workflow TestFairy Google Play iTunes Connect IPAAPK Microsoft CodePush CodePush GitHub
  72. 72. ListView renderSectionHeader renderRow renderRow renderRow
  73. 73. React Native 0.43
  74. 74. WebView source uri html https://www.meetup.com/ValenciaJS <html><body>…</body></html>

×