lo mejor y peor de react native @valenciajs
Post on 21-Apr-2017
83 Views
Preview:
TRANSCRIPT
Lo mejor y peor de React Native
Marcel Kalveram @marcelkalveram
Por qué React Native?
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
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 stringsdestructuring
JSX
React Native Packager incluye el compilador de Babel
Primeros pasos
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
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 iOS
hereda estilos
usuario hace click
sólo un hijo
Navegación
TabNavigator StackNavigator
Estilos
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
Flexbox
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
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 Dimensions y Flexbox para todo Utiliza estilos globales Usa Pepperoni o NativeBase
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 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
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
Alert
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
AsyncStorage
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
CameraRoll
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
GeoLocation
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
Linking
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
NetInfo
none | wifi | cell | unknown
NONE | BLUETOOTH | DUMMY | ETHERNET |MOBILE | MOBILE_DUN | MOBILE_HIPRI | MOBILE_MMS | MOBILE_SUPL | VPN | WIFI | WIMAX | UNKNOWN
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
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
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
Resumen
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
Recursos
Gracias a
¡Muchas gracias!
Código interno
React Native Packager
index.bundle.js
servidor local
Websocket
APK IPA
Simulador
Móvilindex.bundle.js
UI JS
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/
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
TestFairyGoogle Play iTunes Connect
IPAAPK
Microsoft CodePush
CodePush
GitHub
ListView
renderSectionHeaderrenderRow
renderRowrenderRow
React Native 0.43
WebView
source uri html
https://www.meetup.com/ValenciaJS
<html><body>…</body></html>
top related