La evolución de las aplicaciones móviles se asemeja a la web en general: multiplicidad de plataformas, herramientas y ambientes de desarrollo que hacen del aprendizaje algo extenuante y afectan la productividad. En esta charla daremos un recorrido por el ecosistema de React-Native como una tecnología que nos permite manejar toda esa diversidad y complejidad en un mismo entorno funcional para múltiples plataformas. Adicionalmente, veremos cómo React junto con Redux potencia las mejores prácticas para modularizar y e implementar pruebas en nuestro código.

1. Aplicaciones móviles multiplataforma con React
Native y Redux

2. Presenta tus ideas en Quito Lambda!
Si tienes algo interesante que presentar,
¡ven a presentar con nosotros!
Programación Funcional, DevOps, Cloud Computing, IaaS, Desarrollo Web, React, WebGL, ReasonML
y cualquier cosa interesante
info@stackbuilders.com

3. Introducción
La diversidad y complejidad del desarrollo web se ha trasladado a lo mobil:
● Gran variedad de plataformas y dispositivos.
● Muchas versiones de sistemas operativos.
● UX.
● Tooling
● Separación de responsabilidades y testability.

4. React

5. Principios
● Escribir HTML usando JavaScript, incluso con sintaxis como HTML (JSX).
● Componentes reutilizables y componibles.
● Especifica cómo quieres que se vea, no los cambios que deben ocurrir
(VirtualDOM).
● Las vistas son una función del estado.
● Los datos (y el comportamiento) fluyen en una única dirección:
○ De componentes contenedores a componentes contenidos.
● Es sólo JavaScript.

6. JavaScript XML (JSX)
React.createElement(component, props, ...children)

7. Componentes
● Representan una abstracción sobre un elemento de la UI.
● Son independientes.
● Permiten componer comportamiento.
● Tienes dos tipos de atributos:
○ props
○ state

8. Stateful vs Stateless

9. PropTypes

10. PropTypes
● Definir un contrato para las
propiedades.
● Capturar errores en runtime.
● Tener errores más explícitos.

11. React Native

12. React Native
Ya sabías JavaScript y React? Que pasara si te digo que ya estás listo para hacer
aplicaciones tanto para IOS y Android?

13. React-Native - Scaffolding
Gracias a Expo Puedes tener un proyecto y un entorno de desarrollo con tan solo
unos comandos.
exp init my-new-project
cd my-new-project
exp start

14. React-Native - Testing
Adicionalmente, Jest nos proporciona un framework de testing versátil que se
adapta fácilmente a nuestros componentes de React.

15. Redux

16. Los 3 Principios
● Única fuente de verdad
○ Todo se reduce a un store que intuitivamente es como un mapa cuyos valores apuntan a
estados más granulares.
● El estado es de solo lectura.
○ No mas setState dentro de tus views.
● Los cambios son realizados con funciones puras.
○ Acciones puras.
○ Reducers puros.
○ Thunks que se puede inyectar.

17. Easy as 1-2-3!

18. Overview

19. Actions
● Son objetos planos de JS.
● Son una composición de un type y un payload.
● No tienen efectos secundarios.

20. Actions - TypeScript al rescate!

21. Async Actions
No todos nuestros programas pueden ser puros. Mucho menos una interfaz
gráfica tan susceptible a side effects tanto de la mano del usuario como de APIs
externas.

22. State
● Contiene el estado global de mi aplicación.
○ Ya no tengo un estado distribuido entre muchos componentes, ni tengo que buscarme la vida
para coordinar todos esos componentes.
● Cada componente puede suscribirse a la parte que le interese del estado
global.
● El estado es inmutable.

23. Reducers
● Convierten un acción en un cambio en el estado.
○ En realidad construyen un nuevo estado con la acción y el estado anterior.
● No tienen efectos secundarios.

24. Separando la lógica de la presentación
Redux promueve un patrón de arquitectura de software que nos permite separar
completamente los componentes presentacionales de aquellos que manipulan la
lógica de nuestra interfaz.

25. Demo
Talk is cheap, show me the code!

26. Preguntas?

27. Stack Builders
Presenta tus ideas
info@stackbuilders.com
Trabaja con nosotros
stackbuilders.com/join
Facebook: /QuitoLambda
Twitter: @QuitoLambda
Slack: quitodev.slack.com

28. Referencias
● https://medium.com/@abhayg772/introduction-to-redux-using-react-native-a8f
1e8778333
● https://medium.com/@javascript_7596/react-redux-concept-workflow-cheatsh
eet-be00e3ffa853
● https://reactjs.org/docs/react-without-jsx.html
● https://reactjs.org/docs/context.html
● https://reactjs.org/docs/design-principles.html
● https://bumbu.github.io/simple-redux/
● https://wiki.haskell.org/Smart_constructors