Compose: Estados y Recomposición

Exploraremos Jetpack Compose, y cómo los conceptos de States y Recomposition hacen posible que tengamos este nuevo paradigma de UI declarativa en Android.

Transcript

1. Compose: Estados y Recomposición
2. @brunoaybarg Bruno125 Bruno Aybar Principal Engineer @ Avantica Android Dev Peru co-organizer brunoaybar.com/slides/compose-state-recomposition.pdf
3. ¿Qué podemos ver aquí? @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } }
4. ¿Qué podemos ver aquí? @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } } 1. Solución 100% orientada a Kotlin 2. UI declarativa, basada en @Composables 3. Composición en lugar de Herencia
5. Activities + Compose class MainActivity: Activity() { override fun onCreate(...) { super.onCreate(...) setContent { AppTheme { MainContent() } } } }
6. Usando Estados @Composable fun Counter() { val count = remember { mutableStateOf(0) } Button( onClick = { count.value += 1 }, content = { Text("value: ${count.value}") } ) }
7. Usando Estados @Composable fun Counter() { val count = remember { mutableStateOf(0) } Button( onClick = { count.value += 1 }, content = { Text("value: ${count.value}") } ) }
8. MutableState State interface MutableState<T> : State<T> { override var value: T operator fun component1(): T operator fun component2(): (T) -> Unit } interface State<T> { val value: T }
9. @Composable fun Counter() { val count = remember { mutableStateOf(0) } Button( onClick = { count.value += 1 }, content = { Text("value: ${count.value}") } ) }
10. Snapshot MutableState MutableState private class SnapshotMutableState<T>( value: T, val policy: SnapshotMutationPolicy<T> ) : StateObject, MutableState<T> { ... } implements
11. SnapshotMutationPolicies
12. Conceptos Clave Snapshot MutableState MutableState private class SnapshotMutableState<T>( value: T, val policy: SnapshotMutationPolicy<T> ) : StateObject, MutableState<T> { ... } implements
13. @Composable fun Counter() { val count = remember { mutableStateOf(0) } Button( onClick = { count.value += 1 }, content = { Text("value: ${count.value}") } ) }
14. Actualizando el value private var next: StateStateRecord<T> = StateStateRecord(value) override var value: T get() = next.readable(this).value set(value) = next.withCurrent { if (!policy.equivalent(it.value, value)) { next.writable(this) { this.value = value } } }
15. Registrando el cambio private var next: StateStateRecord<T> = StateStateRecord(value) override var value: T get() = next.readable(this).value set(value) = next.withCurrent { if (!policy.equivalent(it.value, value)) { next.writable(this) { this.value = value } } }
16. Conectar con el Snapshot inline fun writable(state: StateObject, block: T.() -> R): R { var snapshot: Snapshot = snapshotInitializer return sync { snapshot = Snapshot.current this.writableRecord(state, snapshot).block() }.also { notifyWrite(snapshot, state) } }
17. Conectar con el Snapshot inline fun writable(state: StateObject, block: T.() -> R): R { var snapshot: Snapshot = snapshotInitializer return sync { snapshot = Snapshot.current this.writableRecord(state, snapshot).block() }.also { notifyWrite(snapshot, state) } }
18. @Composable MutableState Snapshot actualiza value registra el cambio Write Observer Write Observer Write Observer Write Observer notify notify notify notify @Composable MutableState @Composable MutableState
19. Nos hace falta algunas piezas…
20. class MainActivity: Activity() { override fun onCreate(...) { super.onCreate(...) setContent { ... } } }
21. fun ComponentActivity.setContent( parent: CompositionReference = Recomposer.current(), content: @Composable () -> Unit ): Composition { }
22. fun ComponentActivity.setContent( parent: CompositionReference = Recomposer.current(), content: @Composable () -> Unit ): Composition { GlobalSnapshotManager.ensureStarted() val composeView: AndroidOwner = window.decorView .findViewById<ViewGroup>(android.R.id.content) .getChildAt(0) as? AndroidOwner ?: AndroidComposeView(this).also { setContentView(it.view, DefaultLayoutParams) } return doSetContent(composeView, parent, content) }
23. fun ComponentActivity.setContent( parent: CompositionReference = Recomposer.current(), content: @Composable () -> Unit ): Composition { GlobalSnapshotManager.ensureStarted() val composeView: AndroidOwner = window.decorView .findViewById<ViewGroup>(android.R.id.content) .getChildAt(0) as? AndroidOwner ?: AndroidComposeView(this).also { setContentView(it.view, DefaultLayoutParams) } return doSetContent(composeView, parent, content) }
24. fun ComponentActivity.setContent( parent: CompositionReference = Recomposer.current(), content: @Composable () -> Unit ): Composition { GlobalSnapshotManager.ensureStarted() val composeView: AndroidOwner = window.decorView .findViewById<ViewGroup>(android.R.id.content) .getChildAt(0) as? AndroidOwner ?: AndroidComposeView(this).also { setContentView(it.view, DefaultLayoutParams) } return doSetContent(composeView, parent, content) }
25. private fun doSetContent( owner: AndroidOwner, parent: CompositionReference, content: @Composable () -> Unit ): Composition { val original = compositionFor( owner.root, UiApplier(owner.root), parent) val wrapped = WrappedComposition(owner, original).also { owner.view.setTag(R.id.wrapped_composition_tag, it) } wrapped.setContent(content) return wrapped }
26. private fun doSetContent( owner: AndroidOwner, parent: CompositionReference, content: @Composable () -> Unit ): Composition { val original = compositionFor( owner.root, UiApplier(owner.root), parent) val wrapped = WrappedComposition(owner, original).also { owner.view.setTag(R.id.wrapped_composition_tag, it) } wrapped.setContent(content) return wrapped }
27. private fun doSetContent( owner: AndroidOwner, parent: CompositionReference, content: @Composable () -> Unit ): Composition { val original = compositionFor( owner.root, UiApplier(owner.root), parent) val wrapped = WrappedComposition(owner, original).also { owner.view.setTag(R.id.wrapped_composition_tag, it) } wrapped.setContent(content) return wrapped }
28. fun compositionFor( key: Any, applier: Applier<*>, parent: CompositionReference, onCreated: () -> Unit = {} ): Composition = Compositions.findOrCreate(key) { CompositionImpl( parent, composerFactory = { slots, rcmpsr -> Composer(slots, applier, rcmpsr) }, onDispose = { Compositions.onDisposed(key) } ).also { onCreated() }
29. setContent { ...} Composition crea (o accede a) un crea (o accede a) un se adhiere al padre Compositions se registra en AndroidOwner (AndroidComposeView)
30. Composition
31. SlotTable Composer tiene un tiene un Composition (CompositionImpl)
32. SlotTable Composer tiene un tiene un Composition (CompositionImpl) 1. Estructura de datos que almacena info de forma lineal utilizando gap buffers. 2. Almacena información que nos servirá al recomponer componentes. 3. Acceso / inserción de orden constante 4. Reestructuración de orden lineal (ya que tiene que mover el gap)
33. SlotTable Composer tiene un tiene un Composition (CompositionImpl) 1. Realiza cambios (basados en positional memoization) sobre el SlotTable. 2. Coordina el "ciclo de vida” de un Composable (onEnter / onLeave) 3. Decide cómo actuar en base a cambios ocurridos en algún otro lugar.
34. Composer tiene un Composition (CompositionImpl) Recomposer.current() parentReference
35. Recomposer Composer Composer Composer Composer se registra se registra se registra se registra
36. Write Observer Write Observer Write Observer Write Observer notify notify notify notify Snapshot
37. Conectar con el Snapshot class Recomposer(...) { ... suspend fun recomposeAndApplyChanges(...) { ... val observer = Snapshot.registerApplyObserver { changed, _ -> appliedChanges.offer(changed) } } ... }
38. Snapshot Recomposer Composer MutableState registra el cam bio notifica cambios solicitud de recomposición
39. ¿Qué hemos explorado? El RUNTIME de Compose Composer Recomposer Snapshot MutableState androidx.compose.runtime …
40. ¿Qué nos hace falta? Hay mucho más por detrás… 1. Hemos visto UN solo tipo de recomposición, la que está basada en estados. Hay más escenarios.
41. ¿Qué nos hace falta? Hay mucho más por detrás… 2. Explorar Compose Compiler Plugin I. Es fundamental para que todo lo anterior funcione correctamente en tiempo de ejecución. II. Realiza optimizaciones a nivel de compilar para evitar recomposiciones innecesarias brunoaybar.com/slides/kapt-vs-plugin.pdf
42. ¿Qué nos hace falta? Hay mucho más por detrás… 3. Compose UI core I. Sabe cómo interoperar con la plataforma (Android) II. Implica flujos de measuring y layout.
43. ¿Qué nos hace falta? Hay mucho más por detrás… 4. Effect Handlers I. onCommit / onDispose II. SideEffect III. DisposableEffect IV. LaunchedEffect V. etc. jorgecastillo.dev/jetpack-compose-effect-handlers
44. Jetpack Compose Recursos Oficiales: - Compose docs (goo.gle/compose-docs) - Compose Pathway (goo.gle/compose-pathway) - Compose Slack (goo.gle/compose-slack) - Official Compose Samples (goo.gle/compose-samples) - Android Code Search (https://cs.android.com/) Por la comunidad: - Compose Academy (https://compose.academy/) - Compose Cookbook (github.com/Gurupreet/ComposeCookBook) - Compose Insights (https://collectednotes.com/brunoaybar/compose- insights)
45. @brunoaybarg Bruno125 Bruno Aybar Software Engineer @ Avantica Android Dev Peru co-organizer brunoaybar.com/slides/compose-state-recomposition.pdf