Conceptos principales de React Native como solución para proyectos mobile crossplatform.

1. Juan Cruz Leyba
Entender
React Native

2. Propósito

3. ¿Por qué
desarrollamos
“apps”?

4. iPhone - 2007

5. iPhone - 2007

6. ¿Por qué
desarrollamos
“apps”?

7. Look and Feel

8. Cómo funciona

9. React

10. React Native

11. Puente

12. Puente
● No transpila código de un lenguaje a otro
● Recibe un JSON serializado
● Genera una pila de mensajes (Message Queue)
● Los envía a la capa correspondiente para
deserializar (JS V8 o capa nativa)
● Batch asíncrono

13. Puente
Message Queue:
2584 I ReactNativeJS: N->JS :
RCTEventEmitter.receiveTouches(["topTouchStart",[{"identifier":0,"locationY":47.9301872253418,"locati
onX":170.43936157226562,"pageY":110.02542877197266,"timestamp":2378613,"target":26,"pageX":24
5.4869842529297}],[0]])
2584 I ReactNativeJS: JS->N : Timing.createTimer([18,130,1477140761852,false])
2584 I ReactNativeJS: JS->N : Timing.createTimer([19,500,1477140761852,false])
2584 I ReactNativeJS: JS->N : UIManager.setJSResponder([23,false])
2584 I ReactNativeJS: N->JS :
RCTEventEmitter.receiveTouches(["topTouchEnd",[{"identifier":0,"locationY":47.9301872253418,"locati
onX":170.43936157226562,"pageY":110.02542877197266,"timestamp":2378703,"target":26,"pageX":24
5.4869842529297}],[0]])
2584 I ReactNativeJS: JS->N : UIManager.clearJSResponder([])
2584 I ReactNativeJS: JS->N : Timing.deleteTimer([19])
2584 I ReactNativeJS: JS->N : Timing.deleteTimer([18])

14. Threads
Javascript (V8 Engine)
Shadow Queue (Layout - GDC Queue)
Main

15. Threads
Javascript (V8 Engine)
Shadow Queue (Layout - GCD Queue)
Main

16. Ventajas
● Performance (90% average)

17. Ventajas
● Performance (90% average)
● Learn once - Write everywhere

18. Ventajas
● Performance (90% average)
● Learn once - Write everywhere
● Debugging and UI Development (live reload)

19. Ventajas
● Performance (90% average)
● Learn once - Write everywhere
● Debugging and UI Development (live reload)
● Team Productivity

20. Ventajas
● Performance (90% average)
● Learn once - Write everywhere
● Debugging and UI Development (live reload)
● Team Productivity
● 3rd-party Libraries.

21. Ventajas
● Performance (90% average)
● Learn once - Write everywhere
● Debugging and UI Development (live reload)
● Team Productivity
● 3rd-party Libraries
● Open Source community

22. Riesgos
● Performance (congestion)

23. Riesgos
● Performance (congestion)
● No major version (yet)

24. Riesgos
● Performance (congestion)
● No major version (yet)
● Limited APIs

25. Riesgos
● Performance (congestion)
● No major version (yet)
● Limited APIs
● FACEBOOK

26. Riesgos
● Performance (congestion)
● No major version (yet)
● Limited APIs
● FACEBOOK
● Windows?

27. Riesgos
● Performance (congestion)
● No major version (yet)
● Limited APIs
● FACEBOOK
● Windows?
● RN is in diapers

28. Demo

29. Herramientas
● Chrome Remote Debugger

30. Herramientas
● Chrome Remote Debugger
● Performance Monitor

31. Herramientas
● Chrome Remote Debugger
● Performance Monitor
● Live Reload

32. Herramientas
● Chrome Remote Debugger
● Performance Monitor
● Live Reload
● MessageQueue Spy

33. Herramientas
● Chrome Remote Debugger
● Performance Monitor
● Live Reload
● MessageQueue Spy
● React Navigation

34. Herramientas
● Chrome Remote Debugger
● Performance Monitor
● Live Reload
● MessageQueue Spy
● React Navigation
● Expo

35. EXPO

36. Expo
● XDE (sort of an IDE but more like a CLI)

37. Expo
● XDE (sort of an IDE but more like a CLI)
● APIs

38. Expo
● XDE (sort of an IDE but more like a CLI)
● APIs
● Remote client

39. Expo
● XDE (sort of an IDE but more like a CLI)
● APIs
● Remote client
● Expo publish (remote server)

40. Expo
● XDE (sort of an IDE but more like a CLI)
● APIs
● Remote client
● Expo publish (remote server)
● Easy archive and deploy

41. Expo
● XDE (sort of an IDE but more like a CLI)
● APIs
● Remote client
● Expo publish (remote server)
● Easy archive and deploy
● Create React Native App (!)

42. @juancitoleyba
github.com/jcleyba
jcleyba@gmail.com

43. CREATE COMMUNITY
W
jobs@santexgroup.com