Lo mejor y peor de React Native @ValenciaJS

1. Lo mejor y peor de React Native

2. Marcel Kalveram @marcelkalveram

4. Prepd getprepd.com

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"

19. https://github.com/wearehanno/valencia-js

22. Componentes

23. View android.view UIView

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

25. Navegación TabNavigator StackNavigator

26. Estilos

28. 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

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

33. getpepperoni.com UI toolkits NativeBase nativebase.io

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

41. 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

44. Alert

46. AsyncStorage

48. CameraRoll

50. GeoLocation

52. Linking

56. Share

57. Plugins de terceros

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

64. MainApplication.java

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/

81. Integración continua

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

90. ListView renderSectionHeader renderRow renderRow renderRow

91. React Native 0.43

92. 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

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Similar a Lo mejor y peor de React Native @ValenciaJS

Similar a Lo mejor y peor de React Native @ValenciaJS(20)

Último

Último(20)

Lo mejor y peor de React Native @ValenciaJS