Tweet
Tweet

Slide 1

Slide 1 text

REACT NATIVE 101 "Inspirado" EN LA CHARLA EN UIKONF DE NICK LOCKWOOD

Slide 2

Slide 2 text

¿QUÉ ES REACT NATIVE? UN FRAMEWORK PARA ESCRIBIR APPS nativas ¡GRACIAS FACEBOOK!

Slide 3

Slide 3 text

¡DESARROLLAR APPS NATIVAS YA ES IDEAL!

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

¡USEMOS WEBVIEWS!

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

WEBVIEWS EN 2015 1. Rendimiento pobre 2. Experiencia de usuario inferior 3. Funcionalidades nativas limitadas

Slide 9

Slide 9 text

WEBVIEWS EN 2015 1. RENDIMIENTO POBRE 2. EXPERIENCIA DE USUARIO INFERIOR 3. FUNCIONALIDADES NATIVAS LIMITADAS

Slide 10

Slide 10 text

REACT NATIVE

Slide 11

Slide 11 text

MISMA EXPERIENCIA DE USUARIO MEJOR EXPERIENCIA DE DESARROLLO

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

DIFERENTES PLATAFORMAS TIENEN DIFERENTES EXPERIENCIAS DE USUARIO

Slide 16

Slide 16 text

LEARN ONCE, RUN ANYWHERE APRENDE UNA VEZ, EJECUTA EN CUALQUIER LADO

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

INTERFACES CON ESTADO MUTABLES

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

INTERFACES CON ESTADO MUTABLES VISTAS IMMUTABLES FUNCIONES DE RENDERIZADO PURAS FLUJO DE DATOS EN UN SENTIDO

Slide 23

Slide 23 text

AVISO: JAVASCRIPT

Slide 24

Slide 24 text

render: function(state) { return ( ); }

Slide 25

Slide 25 text

▸ 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...)

Slide 26

Slide 26 text

¿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

Slide 27

Slide 27 text

¿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

Slide 28

Slide 28 text

ENLACES ÚTILES ▸ Documentación oficial ⭐ ▸ Componentes de terceros ▸ React Native Playground

Slide 29

Slide 29 text

¡A PROGRAMAR!