Compose: Beyond Android

Jetpack Compose is more than just a modern UI toolkit for Android ; it's a powerful declarative framework built on a platform-agnostic foundation . The true magic lies in its decoupled compiler and runtime.

This session dives deep into these core components. We will explore:
- The Runtime: How compose.runtime manages state (MutableState) , tracks changes (Snapshot) , and executes UI updates (Composer and Recomposer).
- The Compiler: How the compose.compiler (a Kotlin Compiler Plugin) transforms your @Composable functions, injecting the necessary code to enable recomposition .

By understanding this fundamental separation, attendees will see how the same core logic that powers our Android apps is now enabling Compose on new platforms, including Compose for TV and Compose Multiplatform for iOS and Desktop.

Transcript

1. Compose Compiler & Runtime: 
 Beyond Android
2. Bruno Aybar Senior Engineer, Shopify Organizer, Android Dev Peru 
 
 Twitter: @brunoaybarg 
 Github: @Bruno125 Expositor
3. Compose Compiler & Runtime: 
 Beyond Android
4. Toolkit que nos permite construir interfaces describiendo el qué, no el cómo.
5. Usando Compose
6. @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } } Usando Compose
7. 1.Solución 100% orientada a Kotlin 
 Usando Compose @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } }
8. 1.Solución 100% orientada a Kotlin 
 2.UI declarativa, basada en @Composables Usando Compose @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } }
9. @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } } @Composables Usando Compose
10. Usando Compose @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } }
11. Usando Compose @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } }
12. Usando Compose @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } }
13. Usando Compose @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } }
14. Compose UI (Android)
16. Compose Compiler & Runtime: 
 Beyond Android
17. Compose Compiler & Runtime: 
 Beyond Android
18. No es necesario entender a fondo el Compiler / Runtime para usar Compose!
19. Dependencies compose.animation compose.compiler compose.foundation compose.material compose.material3 compose.runtime compose.ui
20. @Composable @Preview fun SurveyAnswer(answer: Answer) { Row { Image(answer.image) Text(answer.text) RadioButton(selected = false, onClick = { /* … */ }) } } compose.foundation compose.material compose.material3 compose.ui
21. compose.foundation compose.material compose.material3 compose.ui Entienden / conocen los elementos de UI
22. compose.ui compose.foundation compose.material Modifier Layout LayoutNode FocusManager Alpha / Blur / Scale ... Box Column Row Size Padding ... Text Button Snackbar Card Scaffold ...
23. compose.foundation compose.material compose.material3 compose.ui Saben cómo renderizar la UI
24. compose.foundation compose.material compose.material3 compose.ui Saben cómo renderizar la UI ❌ ¿cuándo?
25. Recomposición Los elementos de UI necesitan volver a renderizarse bajo distintas circunstancias
26. compose.runtime Saben cómo renderizar la UI ❌ ¿cuándo? compose.compiler
27. Recomposición Los elementos de UI necesitan volver a renderizarse bajo distintas circunstancias (ej. cuando los estados mutan)
28. @Composable fun Counter() { val count = remember { mutableStateOf(0) } Button( onClick = { count.value += 1 }, content = { Text("value: ${count.value}") } ) }
29. @Composable MutableState Snapshot actualiza value registra el cambio Write 
 Observer Write 
 Observer Write 
 Observer Write 
 Observer notify notify notify notify @Composable MutableState @Composable MutableState
30. Write 
 Observer Write 
 Observer Write 
 Observer Write 
 Observer notify notify notify notify Snapshot
31. class Recomposer(...) { ... suspend fun recomposeAndApplyChanges(...) { ... val observer = Snapshot.registerApplyObserver { changed, _ -> appliedChanges.offer(changed) } } ... }
32. Snapshot Recomposer MutableState registra el cam bio noti fi ca cambios
33. setContent { ...} Composition crea (o accede a) un crea (o accede a) un se adhiere al padre AndroidOwner
 (AndroidComposeView)
34. Composition
35. SlotTable Composer tiene un tiene un Composition
 (CompositionImpl)
36. 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.
37. 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.
38. otTable Composer tiene un tiene un Composition
 (CompositionImpl) Recomposer.current() parentReference
39. Snapshot Recomposer Composer MutableState registra el cam bio noti fi ca cambios avisa que una 
 recomposición podría ser necesaria
41. mDevConf 2020
42. @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } } ItemRow Row Image Column Text Text
43. ItemRow Row Image Column Text Text compose/runtime
44. compose/runtime
45. compose/runtime
46. compose/runtime compose/ui
47. Compose Runtime La recomposición no es ✨ magia✨ Registra los cambios de estado en 
 tiempo de ejecución (Snapshot) Ejecuta las recomposiciones que 
 hagan falta, en base a los cambios 
 pendientes (Composer) 1 2 3
48. compose.runtime Saben cómo renderizar la UI ❌ ¿cuándo? compose.compiler
49. Compose Compiler (Kotlin Compiler Plugin)
50. Kotlin es un lenguaje: 
 - compilado - no tan dinámico
51. Kotlin Compiler Plugins pueden… Modificar la representación interna 
 (IR) del código Generar nuevas clases Realizar static-analysis del código 1 2 3
52. Source: "Jetpack Compose Internals", Chapter 2. 
 Author: Jorge Castillo
53. @Composable fun Greetings(name: String) { Text("Hello ${name}") }
54. @Composable fun Greetings(name: String, $composer) { $composer.start(123) Text("Hello ${name}", $composer) $composer.end() }
55. * 3. Composable Function Skipping * 4. Comparison Propagation * 5. Recomposability * 6. Source location information (when enabled) */ class ComposableFunctionBodyTransformer( context: IrPluginContext, … ) : { } Android Code Search
56. /** * This IR Transform is responsible for the main transformations of the body of a composable * function. * * 1. Control-Flow Group Generation * 2. Default arguments * 3. Composable Function Skipping * 4. Comparison Propagation * 5. Recomposability * 6. Source location information (when enabled) */ class ComposableFunctionBodyTransformer( context: IrPluginContext, … ) : { }
58. Meetup: Android Dev Peru
59. compose/runtime compose/ui
60. compose/runtime compose/ui compose/compiler
61. Compose Runtime + Compose Compiler Compose UI (Android)
62. Compose Runtime + Compose Compiler Compose UI (iOS / Desktop / Web)
63. Compose Runtime La recomposición no es ✨ magia✨ Registra los cambios de estado en 
 tiempo de ejecución (Snapshot) Ejecuta las recomposiciones que 
 hagan falta, en base a los cambios 
 pendientes (Composer) 1 2 3
64. /** * An Applier is responsible for applying the tree-based * operations that get emitted during a composition. * Every [Composer] has an [Applier] which it * uses to emit a [ComposeNode]. * */ interface Applier<N> { … }
65. Compose UI (iOS / Desktop / Web) Compose UI Applier<Android>
67. Compose Runtime + Compose Compiler Compose UI (iOS / Desktop / Web)
70. Alpha release announced 
 on May 17th
72. Compose Runtime + Compose Compiler Compose Multiplatform (iOS / Desktop / Web)
73. Compose Compiler & Runtime: 
 Beyond Android
74. Bruno Aybar Senior Engineer @ Shopify Mentor @ DeepSkill, Talently 
 
 Twitter: @brunoaybarg 
 Github: @Bruno125 Gracias!