Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native 101

React Native 101

Porqué debería usar React Native para desarrollar apps nativas? Qué beneficios tiene React Native?

Esta presentación fue usada para impartir un workshop organizado por @theevnt en la oficina de Tuenti en Madrid.

El proyecto del workshop está publicado en github.com: https://github.com/alexissan/ReactNativeWorkshop

Si necesitas más info acerca del workshop puedes contactarnos:

vpimentel@tuenti.com
asantos@tuenti.com

4de8c7b1a28592282b5d5c2606b6e947?s=128

Alexis Santos Pérez

May 23, 2015
Tweet

Transcript

  1. REACT NATIVE 101 "Inspirado" EN LA CHARLA EN UIKONF DE

    NICK LOCKWOOD
  2. ¿QUÉ ES REACT NATIVE? UN FRAMEWORK PARA ESCRIBIR APPS nativas

    ¡GRACIAS FACEBOOK!
  3. ¡DESARROLLAR APPS NATIVAS YA ES IDEAL!

  4. None
  5. DESARROLLAR APPS EN 2015 1. Ciclo de desarrollo lento 2.

    Ciclo de release eterno 3. Equipos separados por plataforma 4. APIs distintas para hacer lo mismo
  6. ¡USEMOS WEBVIEWS!

  7. None
  8. WEBVIEWS EN 2015 1. Rendimiento pobre 2. Experiencia de usuario

    inferior 3. Funcionalidades nativas limitadas
  9. WEBVIEWS EN 2015 1. RENDIMIENTO POBRE 2. EXPERIENCIA DE USUARIO

    INFERIOR 3. FUNCIONALIDADES NATIVAS LIMITADAS
  10. REACT NATIVE

  11. MISMA EXPERIENCIA DE USUARIO MEJOR EXPERIENCIA DE DESARROLLO

  12. REACT NATIVE EN 2015 1. Ciclo de desarrollo lento Recarga

    instantánea 2. Ciclo de release lento Actualizaciones OTA legales !!! 3. Equipos separados por plataforma Mismas herramientas 4. APIs distintas para hacer lo mismo APIs consistentes
  13. WRITE ONCE, RUN ANYWHERE ESCRIBE UNA VEZ, EJECUTA EN CUALQUIER

    LADO
  14. WRITE ONCE, RUN ANYWHERE ESCRIBE UNA VEZ, EJECUTA EN CUALQUIER

    LADO
  15. DIFERENTES PLATAFORMAS TIENEN DIFERENTES EXPERIENCIAS DE USUARIO

  16. LEARN ONCE, RUN ANYWHERE APRENDE UNA VEZ, EJECUTA EN CUALQUIER

    LADO
  17. REACT NATIVE EN 2015 1. Rendimiento pobre Árbol de vistas

    virtual 2. Experiencia de usuario inferior Vistas nativas 3. Funcionalidades nativas limitadas Fácil de extender
  18. None
  19. APPS EN 2015 ▸ Hacer aplicaciones dinámicas es complicado ▸

    Pocos estados -> muchas transiciones ▸ Escalar aplicaciones web estáticas es mucho más fácil ▸ Petición HTTP -> App -> Respuesta HTML
  20. INTERFACES CON ESTADO MUTABLES

  21. DIFÍCIL DE: 1. Entender 2. Debuggear 3. Mantener 4. Reutilizar

    5. Testear
  22. INTERFACES CON ESTADO MUTABLES VISTAS IMMUTABLES FUNCIONES DE RENDERIZADO PURAS

    FLUJO DE DATOS EN UN SENTIDO
  23. AVISO: JAVASCRIPT

  24. render: function(state) { return ( <View name={state.name} /> ); }

  25. ▸ UI funcional basado en componentes ▸ Árbol de vistas

    virtual ▸ Frontend en JavaScript (ES6, npm, TypeScript...) ▸ Layout con JSX ▸ Estilos inline con Flexbox (Next-Gen CSS) ▸ Backend nativo (UIKit, network, storage, location...)
  26. ¿CÓMO FUNCIONA? ▸ Hilo en segundo plano ejecuta nuestro JavaScript

    ▸ Hilo principal habla con UIKit, red, etc ▸ Comunicación mínima entre ellos ▸ El hilo principal avisa de eventos ▸ JavaScript manda diffs de cambios en vistas
  27. ¿DEBERÍA USARLO? ▸ Muy joven, no es 100% estable/completo ▸

    Comunidad muy activa ▸ Un par de apps de Facebook ya en la AppStore ▸ Disponible para Android pronto ▸ Nuclide: IDE específico próximamente
  28. ENLACES ÚTILES ▸ Documentación oficial ⭐ ▸ Componentes de terceros

    ▸ React Native Playground
  29. ¡A PROGRAMAR!