Charla sobre React Native en la T3chFest 2016.

1. 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
EduardTomàs Avellana

2. ¿Quien soy yo?
• Desarrollador empedernido
• Padre orgulloso
• Cervecero insaciable
• @eiximenis

3. ¿Donde Trabajo?
http://www.plainconcepts.com
Oficinas en Madrid, Bilbao,
Barcelona, Seattle, Dubai, Londres

4. ¿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”

5. Data flow
• Los datos deben viajar en una sola dirección
• Desde la “fuente” hacia la vistes
• Bindings bidireccionales “are evil”

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

7. JSX
• JSX es un lenguaje que permite representar funciones JavaScript
utilizando etiquetas “tipo HTML”

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

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

10. React Native vs...

11. React Native
• Workflow de desarrollo web
• Herramientas de desarrollo web
• El lenguaje de la web
• Pero una aplicación Nativa

12. ¿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”

13. ¿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

14. ¿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,...

15. ¿Dudas?
• Desarrollador empedernido
• Padre orgulloso
• Cervecero insaciable
• @eiximenis