react native - t3chfest 2016

Except where otherwise noted, this work is licensed under: http://creativecommons.org/licenses/by-nc-sa/3.0/

React Native

¡Todo el poder de React en tus manos!

Leganés, 11 y 12 de febrero

Eduard Tomàs Avellana

¿Quien soy yo?• Desarrollador empedernido• Padre orgulloso• Cervecero insaciable

• @eiximenis

¿Donde Trabajo?http://www.plainconcepts.com

Oficinas en Madrid, Bilbao, Barcelona, Seattle, Dubai, Londres

¿Qué es React?• ReactJs: Librería para UI de JavaScript para el desarrollo web

• Basada en un modelo “data flow” y “single source of truth”

Data flow• Los datos deben viajar en una sola dirección

• Desde la “fuente” hacia la vistes

• Bindings bidireccionales “are evil”

Single source of truth• Solo hay una fuente de datos que tiene “la verdad”

• Los demás... Imágenes inmutables

• La mutabilidad “de la verdad” está centralizada y controlada

JSX• JSX es un lenguaje que permite representar funciones JavaScript

utilizando etiquetas “tipo HTML”

React Native• El core de React es totalmente independiente del DOM

• Los conceptos base de React son independientes del desarrollo web

• JSX es independiente de HTML

React Native• Teoricamente se podría reimplementar React.DOM para que

renderizase algo que no fuese DOM

• Y en la práctica también. Y el resultado es React Native

React Native vs...

React Native• Workflow de desarrollo web• Herramientas de desarrollo web• El lenguaje de la web

• Pero una aplicación Nativa

¿Nativa de verdad?• React Native usa un engine de JS que ejecuta el código JS en un

thread aparte• Este thread se comunica via mensajes con el thread de UI• JSX genera elementos nativos de UI

• Ventajas de app nativa (UI nativa, no web view)• Ventajas de “app web”: modificar código y “F5”

¿Estilos?• React Native tiene una implementación de CSS propia

• React Native tiene una implementación de CSS pròpia

• Posicionamiento flexbox

• Parecida pero no igual a la CSS de web

¿Más allá de React?• Para aplicaciones pequeñas React solo funciona muy bien

• Para aplicaciones grandes, necesitas algun patrón arquitectónico

• Flux, Redux,...

¿Dudas?• Desarrollador empedernido• Padre orgulloso• Cervecero insaciable

• @eiximenis