Aplicaciones móviles multiplataforma con React Native y Redux

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.

Transcript

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