Lo mejor y peor de
React Native
Marcel Kalveram
@marcelkalveram
Prepd
getprepd.com
Por qué React Native?
Crea apps nativas con JavaScript y React
Aprender una vez, usar en ambas plataformas
Soporta código nativo donde es necesa...
80 %
Aproximadamente el 80% del
código JavaScript se comparte
entre iOS y Android
Compatibilidad
iOS 8.0+Android 4.1 

(API 16)
Tecnología
clases
template strings
destructuring
JSX
React Native Packager incluye el compilador de Babel
Primeros pasos
facebook.github.io
Proceso largo y complejo
Windows/Linux no soportan iOS
Create React Native
$ npm i -g create-react-native-app
Expo Client
No necesitas xCode o Android Studio
Desarrollo para iOS...
sketch.expo.io
EcmaScript 6
App "ValenciaJS"
https://github.com/wearehanno/valencia-js
Componentes
View
android.view
UIView
Text
TouchableHighlight
Image
imagen estática
puede contener otros elementos Text
imagen dinámica: tiene que ser https en ...
Navegación
TabNavigator StackNavigator
Estilos
backfaceVisibility
backgroundColor
opacity
borderColor
borderRadius
borderStyle
borderWidth
alignItems
alignSelf
flex
flex...
Flexbox
justify-content
align-items
flex-direction
space-around space-between center
flex-start flex-end center
row column
stretch...
Platform
getpepperoni.com
UI toolkits
NativeBase nativebase.io
No hay dimensiones porcentuales (sólo absolutas)
No existe una cascada de estilos
No hay componentes predefinidos
Usa Dime...
Depurar código
react-native run-ios
xCode simulador
react-native run-android
Android Studio/Genymotion
⌘+D (iOS) ⌘+M/CTRL+M (Android)
Hot reloading
APIs
AccessibilityInfo
ActionSheetIOS
AdSupportIOS
Alert
AlertIOS
Animated
AppRegistry
AppState
AsyncStorage
BackAndroid
Camera...
AccessibilityInfo
ActionSheetIOS
AdSupportIOS
Alert
AlertIOS
Animated
AppRegistry
AppState
AsyncStorage
BackAndroid
Camera...
Alert
AccessibilityInfo
ActionSheetIOS
AdSupportIOS
Alert
AlertIOS
Animated
AppRegistry
AppState
AsyncStorage
BackAndroid
Camera...
AsyncStorage
AccessibilityInfo
ActionSheetIOS
AdSupportIOS
Alert
AlertIOS
Animated
AppRegistry
AppState
AsyncStorage
BackAndroid
Camera...
CameraRoll
AccessibilityInfo
ActionSheetIOS
AdSupportIOS
Alert
AlertIOS
Animated
AppRegistry
AppState
AsyncStorage
BackAndroid
Camera...
GeoLocation
AccessibilityInfo
ActionSheetIOS
AdSupportIOS
Alert
AlertIOS
Animated
AppRegistry
AppState
AsyncStorage
BackAndroid
Camera...
Linking
AccessibilityInfo
ActionSheetIOS
AdSupportIOS
Alert
AlertIOS
Animated
AppRegistry
AppState
AsyncStorage
BackAndroid
Camera...
NetInfo
none | wifi | cell | unknown
NONE | BLUETOOTH | DUMMY | ETHERNET |
MOBILE | MOBILE_DUN | MOBILE_HIPRI |
MOBILE_MMS...
AccessibilityInfo
ActionSheetIOS
AdSupportIOS
Alert
AlertIOS
Animated
AppRegistry
AppState
AsyncStorage
BackAndroid
Camera...
Share
Plugins de terceros
$ react-native link
$ react-native link react-native-code-push
$ react-native link react-native-airbnb-maps
AppDelegate.m
Info.plist
build.gradle
MainApplication.java
settings.gradle
Comparación
React Native Ionic 2
Lenguaje React/JSX TypeScript/Angular 2
Plantillas JSX HTML
Hilos de ejecución 2 (UI + lógica) 1
Rend...
Resumen
Mejor rendimiento gracias a código nativo
Mucha repercusión gracias a Facebook
React es cada vez más popular
Curva de apre...
Recursos
Gracias a
¡Muchas gracias!
Código interno
React Native Packager
index.bundle.js
servidor local
Websocket
APK IPA
Simulador
Móvil
index.bundle.js
UI JS
index.bundle.js
App
nativa
MessageQueue
Llamadas
JavaScript -> Native
Callbacks
Native -> JavaScript
peticiones red
render...
Integración continua
Android Studio xCode
Google Play iTunes Connect
IPAAPK
GitHub
Google Play iTunes Connect
IPAAPK
GitHub Bitrise Workflow
Google Play iTunes Connect
IPAAPK
Microsoft
CodePush
CodePush
$ npm install --save react-native-code-push@latest
$ react-native link react-native-code-push
$ code-push release-react valenciaJS ios
$ code-push release-react valenciaJS android
Bitrise Workflow
TestFairy
Google Play iTunes Connect
IPAAPK
Microsoft
CodePush
CodePush
GitHub
ListView
renderSectionHeader
renderRow
renderRow
renderRow
React Native 0.43
WebView
source uri html
https://www.meetup.com/ValenciaJS
<html><body>…</body></html>
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Nächste SlideShare
Wird geladen in …5
×

Lo mejor y peor de React Native @ValenciaJS

377 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
  • Als Erste(r) kommentieren

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

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>

×