Ingredientes para hacer una app rebelde

Introducción al stack Rebelde para Android.
Se explican conceptos de la arquitectura Flux, el VirtualDOM y las librerías Anvil y Magellan.
La presentación fue acompañada por una app de ejemplo que se realizó durante la presentación. La misma esta disonible en https://github.com/juanignaciomolina/rebelde-demo

Transcript

1. App Rebelde Ingredientes para hacer una
2. Juan Ignacio Molina github.com/juanignaciomolina/ medium.com/@juanimolina_
3. Intro
4. Revolución francesa(1848)
5. Caída del Muro de Berlín(1989)
6. Android development(2017)
7. Contenidos 1. Intro 2. El stack rebelde 3. La app demo 4. Haciendo una app rebelde 5. Ejemplos concretos del stack 6. Preguntas
8. El stack Rebelde
9. KOTLIN KOTLIN MAgELLAN MAgELLAN Flux ANVIL Flux ANVIL
10. 4 COMPONENTES 4 COMPONENTES INdependientes INdependientes Que FUNCIONAN BIEN Que FUNCIONAN BIEN JUNToS JUNTOS
11. Arquitectura Flux https://github.com/facebook/flux
12. MVP MVC MVVM
13. MVP MVC MVVM Flux Flux
14. Arquitectura Flux 1. Views 2. Actions 3. Dispatcher 4. Store 4 Componentes
15. Arquitectura Flux Fuente: http://fluxxor.com/what-is-flux.html
16. • Redux es un framework que implementa la arquitectura Flux, principalmente utilizado en React. • Redux agrega un 5to componente, los reducers que especifican la forma en la que una action modifica un store. Arquitectura Flux y Redux
17. Arquitectura Flux y Redux Fuente: https://julienrenaux.fr/talks-src/2017/from-redux-to-ngrxstore/#/2/10
18. Arquitectura Flux y Redux Flujo unidireccional Inmutabilidad
19. En mobile usamos Bansa, una implementación de Redux para Android https://github.com/brianegan/bansa
20. 1. View es el componente de UI, puede emitir actions 2. Las actions le solicitan a un reducer que modifique un store 3. Una vez modificado el store, se notifica a la view 4. Una vez notificada la view, se actualizan los componentes de UI Arquitectura Flux y Bansa Resumiendo Bansa...
21. Dibujando vistas con Anvil La capa View de nuestra arquitectura Flux https://github.com/zserge/anvil
22. Dibujando vistas con Anvil
23. Dibujando vistas con Anvil
24. Dibujando vistas con Anvil
25. Dibujando vistas con Anvil override fun view() { frameLayout { backgroundColor(Color.BLACK) size(MATCH, MATCH) v(FloatingActionButton::class.java) { size(WRAP, WRAP) margin(0, 0, dip(16), dip(64)) layoutGravity(BOTTOM or END) imageResource(R.drawable.ic_search) } } }
26. Dibujando vistas con Anvil override fun view() { frameLayout { backgroundColor(Color.BLACK) size(MATCH, MATCH) v(FloatingActionButton::class.java) { size(WRAP, WRAP) margin(0, 0, dip(16), dip(64)) layoutGravity(BOTTOM or END) imageResource(R.drawable.ic_search) } } } Component A Component B
27. Un aspecto fundamental de Anvil es la eficiencia para actualizar la UI, utilizando un Virtual DOM
28. Virtual DOM Conformado por los objetos que se ven en “pantalla”. Hacer cambios es un proceso costoso. Necesario para la interacción con el usuario. DOM Descripción de los elementos de la UI. En memoria únicamente, no en la “pantalla”. Permite comparaciones y cambios rápidos Concepto utilizado por React en Web.
29. Virtual DOM DOM Componente Atributo
30. Virtual DOM DOM Atributo Componente
31. Virtual DOM DOM Anvil.render() Atributo Componente
32. Virtual DOM DOM Anvil.render() Atributo Componente
33. Virtual DOM DOM Atributo Componente
34. Dibujando vistas con Anvil ➔ Reemplaza las vistas en XML por clases directamente en el lenguaje del resto de la app (DSL) ➔ Simplifica el desarrollo, no es necesario obtener referencias forzadas e inseguras a las vistas (es decir, no hacen falta los findViewById(..) ) ➔ El código del comportamiento de la vista puede convivir con el modelado de la misma. ➔ Utiliza el concepto de Virtual DOM para realizar cambios en las vistas con una destacada performance. Resumiendo Anvil...
35. La forma más sencilla de actualizar la UI cada vez que se produce un cambio es volver a leer el Store y renderizar la vista entera nuevamente
36. Uniendo Bansa con Anvil store.subscribe { Anvil.render() }
37. Navegación con Magellan Olvidándonos de las Activities y los Fragments https://github.com/wealthfront/magellan
38. • Utiliza una sola Activity. • Utiliza la clase ScreenContainer, en donde se cargan Screens que contienen a la diferentes UIs, a la que al librería denomina Views. • Implementación muy sencilla, basta con llamar a Navigator#goTo() para navegar de una vista a la otra. Navegación con Magellan
39. Navegación con Magellan View A Screen A
40. View A Screen A Navegación con Magellan Navigator#goTo(ScreenB) View B Screen B
41. Screen A View A Screen A Navegación con Magellan Navigator#goTo(ScreenB) View B Screen B
42. Empresas que usan un sistema de navegación alternativo Scoop Magellan FLOW github.com/square/flow github.com/lyft/scoop github.com/wealthfront/magellan
43. La app Demo
44. • Utiliza todo el Stack Rebelde • App simple, solo una demo • Navegación del tipo Master/Detail • Desarrollo en Android Studio 3.0 La app Demo “El marketplace para el rebelde moderno”
45. Haciendo una App Rebelde
47. Ejemplos Concretos
48. ListView val items = arrayListOf("Anvil","Magellan","Flux","Kotlin") val demoAdapter = RenderableAdapter.withItems(items, { pos, item -> textView { text(item) } }) override fun view() { listView { size(MATCH, MATCH) adapter(demoAdapter) onItemClick { av, v, pos, id -> toast("Clicked on item #" + pos) } } }
49. Soporte XML override fun view() { xml(R.layout.my_layout) { backgroundColor(R.color.my_color) withId(R.id.my_progress_bar) { visible(isMyProgressBarShown) progress(someProgressValue) } } }
50. Conclusiones
51. Conclusiones - Código - Código - bugs - bugs
52. Conclusiones - Código - Código - bugs + calidad - bugs + calidad + VELOCIDAD + VELOCIDAD
53. Conclusiones - Código - Código - bugs + calidad - bugs + calidad + VELOCIDAD + VELOCIDAD + FELICIDAD! + FELICIDAD!
54. Demos github.com/juanignaciomolina/rebelde-demo github.com/juanignaciomolina/ReKo
55. Preguntas? Preguntas?
56. Gracias! Gracias! Juan Ignacio Molina github.com/juanignaciomolina/ medium.com/@juanimolina_