Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Except where otherwise noted, this work is licensed under:
http://creativecommons.org/licenses/by-nc-sa/3.0/
React Native
...
¿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 “singl...
Data flow
• Los datos deben viajar en una sola dirección
• Desde la “fuente” hacia la vistes
• Bindings bidireccionales “a...
Single source of truth
• Solo hay una fuente de datos que tiene “la verdad”
• Los demás... Imágenes inmutables
• La mutabi...
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 d...
React Native
• Teoricamente se podría reimplementar React.DOM para que
renderizase algo que no fuese DOM
• Y en la práctic...
React Native vs...
React Native
• Workflow de desarrollo web
• Herramientas de desarrollo web
• El lenguaje de la web
• Pero una aplicación N...
¿Nativa de verdad?
• React Native usa un engine de JS que ejecuta el código JS en un
thread aparte
• Este thread se comuni...
¿Estilos?
• React Native tiene una implementación de CSS propia
• React Native tiene una implementación
de CSS pròpia
• Po...
¿Más allá de React?
• Para aplicaciones pequeñas React solo funciona muy bien
• Para aplicaciones grandes, necesitas algun...
¿Dudas?
• Desarrollador empedernido
• Padre orgulloso
• Cervecero insaciable
• @eiximenis
Upcoming SlideShare
Loading in …5
×

React native - t3chfest 2016

Charla sobre React Native en la T3chFest 2016.

  • Be the first to comment

React native - t3chfest 2016

  1. 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. 2. ¿Quien soy yo? • Desarrollador empedernido • Padre orgulloso • Cervecero insaciable • @eiximenis
  3. 3. ¿Donde Trabajo? http://www.plainconcepts.com Oficinas en Madrid, Bilbao, Barcelona, Seattle, Dubai, Londres
  4. 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. 5. Data flow • Los datos deben viajar en una sola dirección • Desde la “fuente” hacia la vistes • Bindings bidireccionales “are evil”
  6. 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. 7. JSX • JSX es un lenguaje que permite representar funciones JavaScript utilizando etiquetas “tipo HTML”
  8. 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. 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. 10. React Native vs...
  11. 11. React Native • Workflow de desarrollo web • Herramientas de desarrollo web • El lenguaje de la web • Pero una aplicación Nativa
  12. 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. 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. 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. 15. ¿Dudas? • Desarrollador empedernido • Padre orgulloso • Cervecero insaciable • @eiximenis

×