Lo mejor y peor de React Native @ValenciaJS

Lo mejor y peor de React Native

Marcel Kalveram @marcelkalveram

Prepd getprepd.com

http://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 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

facebook.github.io

Proceso largo y complejo Windows/Linux no soportan iOS

http://facebook.github.io

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

sketch.expo.io

http://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 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

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

CameraRoll

GeoLocation

Linking

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


IPAAPK

GitHub Bitrise Workflow


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>

Lo mejor y peor de React Native @ValenciaJS

Internet

Transcript of Lo mejor y peor de React Native @ValenciaJS