Compose Compiler & Runtime @CanyuDev • Can Yumusak

What is a @Composable? • @Composable functions are DSLs • Composition: @Composable → Composition Tree • @Composable updates its node on recomposition @CanyuDev

@Composable Superpowers @CanyuDev

🥸 Context aware • Only callable from other @Composable • @Composable ≡ suspend @CanyuDev

🔄 Restartable Code-Blocks Application() TopAppBar() Counter() Text() Button() @CanyuDev

⏭ Skippable Code-Blocks Application() TopAppBar() Counter() Text() Button() @CanyuDev

🧠 Memoization • Values can be retained between compositions • Skip if unchanged input ⏭ val result = remember(input) { anExpensiveComputation(input) } @CanyuDev

Kotlin Code Journey Kotlin Compiler *.kt *.kt *.kt *.kt *.kt *.class ▶ 
 Running App Compose UI Compose Runtime @CanyuDev

Compose Compiler Plugin @CanyuDev

💡 Kotlin Compiler Plugin • Hook into Compiler, modify ByteCode • Popular Example • kotlinx.serialization @CanyuDev

🔎 Code Generation • Disclaimer: Everything is simplified~ @Composable fun Counter() { var count by remember { mutableStateOf(0) } Text( text = "Count: $count", modifier = Modifier.clickable { count ++ }, ) } @CanyuDev

🔎 Code Generation fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) if (changed = = 0 & & composer.getSkipping()) { composer.skipToGroupEnd() } else { var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count”, Modifier.clickable { count + + }, ) } composer.endRestartGroup() ? . let { it.updateScope { composer, force -> Counter(composer, changed or 1) } } } @CanyuDev

🔎 Code Generation: Passing Context fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) if (changed = = 0 & & composer.getSkipping()) { composer.skipToGroupEnd() } else { var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count”, Modifier.clickable { count + + }, ) } composer.endRestartGroup() ? . let { it.updateScope { composer, force -> Counter(composer, changed or 1) } } } @CanyuDev

🔎 Code Generation: Skipping fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) if (changed = = 0 & & composer.getSkipping()) { composer.skipToGroupEnd() } else { var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count”, Modifier.clickable { count + + }, ) } composer.endRestartGroup() ? . let { it.updateScope { composer, force -> Counter(composer, changed or 1) } } } @CanyuDev

🔎 Code Generation: Restarting fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) if (changed = = 0 & & composer.getSkipping()) { composer.skipToGroupEnd() } else { var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count”, Modifier.clickable { count + + }, ) } composer.endRestartGroup() ? . let { it.updateScope { composer, force -> Counter(composer, changed or 1) } } } @CanyuDev

🔎 Code Generation: Restarting fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) if (changed = = 0 & & composer.getSkipping()) { composer.skipToGroupEnd() } else { var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count”, Modifier.clickable { count + + }, ) } composer.endRestartGroup() ? . let { it.updateScope { composer, force -> Counter(composer, changed or 1) } } } @CanyuDev

Composition Tree / Slot Table @CanyuDev

@CanyuDev

@CanyuDev

Example fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count", Modifier.clickable { count + + }, ) composer.endRestartGroup() } @CanyuDev

Example: Composition fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count", Modifier.clickable { count + + }, ) composer.endRestartGroup() } @CanyuDev

Example: Composition fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count", Modifier.clickable { count + + }, ) composer.endRestartGroup() } @CanyuDev

Example: Composition fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count", Modifier.clickable { count + + }, ) composer.endRestartGroup() } @CanyuDev

Example: Composition fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count", Modifier.clickable { count + + }, ) composer.endRestartGroup() } @CanyuDev

Example: Composition fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count", Modifier.clickable { count + + }, ) composer.endRestartGroup() } @CanyuDev

Example: Composition fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count", Modifier.clickable { count + + }, ) composer.endRestartGroup() } @CanyuDev

Example: Composition fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count", Modifier.clickable { count + + }, ) composer.endRestartGroup() } @CanyuDev

Example: Composition fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count", Modifier.clickable { count + + }, ) composer.endRestartGroup() } @CanyuDev

Example: Composition Result @CanyuDev

Example: Recompostion fun Counter(composer: Composer, changed: Int) { composer.startRestartGroup(001) var count by remember(composer, 0) { mutableStateOf(0) } Text( composer, 0, "Count: $count", Modifier.clickable { count + + }, ) composer.endRestartGroup() } @CanyuDev ↩

Recomposition • “State” is observed by runtime 🔍 • “State” read attributed “UpdateScope” • Assigned “UpdateScope” is invoked @CanyuDev

“Remember” Operator @Composable fun Application() { val state = remember() { "test" } Text(state) } @CanyuDev

“Remember” Operator fun Application(…) { val remembered = composer.rememberedValue() val value: String if (remembered != Composer.Companion.Empty) { value = remembered as String } else { val newValue = “test" // { "test" } composer.updateRememberedValue(newValue) value = newValue } Text(value) } @CanyuDev

“Remember” Operator fun Application(…) { val remembered = composer.rememberedValue() val value: String if (remembered != Composer.Companion.Empty) { value = remembered as String } else { val newValue = “test" // { "test" } composer.updateRememberedValue(newValue) value = newValue } Text(value) } @CanyuDev

“Remember” Operator fun Application(…) { val remembered = composer.rememberedValue() val value: String if (remembered != Composer.Companion.Empty) { value = remembered as String } else { val newValue = “test" // { "test" } composer.updateRememberedValue(newValue) value = newValue } Text(value) } @CanyuDev

“Remember” Operator fun Application(…) { val remembered = composer.rememberedValue() val value: String if (remembered != Composer.Companion.Empty) { value = remembered as String } else { val newValue = “test” // { "test" } composer.updateRememberedValue(newValue) value = newValue } Text(value) } @CanyuDev

“Remember” Operator fun Application(…) { val remembered = composer.rememberedValue() val value: String if (remembered != Composer.Companion.Empty) { value = remembered as String } else { val newValue = “test" // { "test" } composer.updateRememberedValue(newValue) value = newValue } Text(value) } @CanyuDev ↩

“Remember” Operator fun Application(…) { val remembered = composer.rememberedValue() val value: String if (remembered != Composer.Companion.Empty) { value = remembered as String } else { val newValue = “test" // { "test" } composer.updateRememberedValue(newValue) value = newValue } Text(value) } @CanyuDev ↩

💥 What about if/else? • Group ID mismatch detection • Solved by deleting group in slot table • Expensive but Rare @CanyuDev

🔑 Key Takeaways • Compiler Plugin generates Code • Generated code reads / writes <> Slot Table • Skip known code parts • Only emit new changes @CanyuDev

🧐 Summary • Compose Runtime is a very powerful diffing tool • Many other applications! @CanyuDev Jetpack Compose internals Jorge Castillo

Questions? @CanyuDev 👋 That’s it folks Can Yumusak