Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)

Transcript

1. Márton Braun Developer Advocate Blazing Fast UI Development with
2. Demo
3. Setup !// build.gradle.kts plugins { id("org.jetbrains.compose.hot-reload") version "1.0.0-alpha11" }
4. Setup !// build.gradle.kts plugins { id("org.jetbrains.compose.hot-reload") version "1.0.0-alpha11" } !// settings.gradle.kts plugins { id("org.gradle.toolchains.foojay-resolver-convention") version "1.0.0" }
5. Setup !// build.gradle.kts plugins { id("org.jetbrains.compose.hot-reload") version "1.0.0-alpha11" } !// settings.gradle.kts plugins { id("org.gradle.toolchains.foojay-resolver-convention") version "1.0.0" } !// Default in Kotlin 2.2.0 composeCompiler { featureFlags.add(ComposeFeatureFlag.OptimizeNonSkippingGroups) }
6. Setup !// build.gradle.kts plugins { id("org.jetbrains.compose.hot-reload") version "1.0.0-alpha11" } !// settings.gradle.kts plugins { id("org.gradle.toolchains.foojay-resolver-convention") version "1.0.0" } !// Default in Kotlin 2.2.0 composeCompiler { featureFlags.add(ComposeFeatureFlag.OptimizeNonSkippingGroups) }
7. How does it work? Your app’s code Java Runtime Gradle
8. How does it work? Your app’s code JetBrains Runtime Gradle
9. Setup !// build.gradle.kts plugins { id("org.jetbrains.compose.hot-reload") version "1.0.0-alpha11" } !// settings.gradle.kts plugins { id("org.gradle.toolchains.foojay-resolver-convention") version "1.0.0" } !// Default in Kotlin 2.2.0 composeCompiler { featureFlags.add(ComposeFeatureFlag.OptimizeNonSkippingGroups) }
10. How does it work? Your app’s code JetBrains Runtime Gradle
11. Your app’s code JetBrains Runtime Gradle DCEVM How does it work?
12. How does it work? Your app’s code JetBrains Runtime Gradle Hot Reload Agent Recompiler
13. Gradle Recompiler Your app’s code JetBrains Runtime Gradle Hot Reload Agent How does it work?
14. Gradle Recompiler Your app’s code JetBrains Runtime Gradle Hot Reload Agent How does it work?
15. How does it work? Gradle Recompiler Your app’s code JetBrains Runtime Gradle Hot Reload Agent DCEVM
16. How does it work? Gradle Recompiler Your app’s code JetBrains Runtime Gradle Hot Reload Agent
17. How does it work? Gradle Recompiler Your app’s code JetBrains Runtime Gradle Hot Reload Agent
18. How does it work? Gradle Recompiler Dev Tooling Your app’s code JetBrains Runtime Gradle Hot Reload Agent
19. How does it work? Gradle Recompiler Dev Tooling Your app’s code JetBrains Runtime Gradle Hot Reload Agent
20. How does it work? Gradle Recompiler Dev Tooling Your app’s code JetBrains Runtime Gradle Hot Reload Agent
21. How does it work? Gradle Recompiler Dev Tooling Your app’s code JetBrains Runtime Gradle Hot Reload Agent IDE
22. DCEVM Dynamic Code Evolution Virtual Machine class Offset( val x: Int, ) Current Class Loader
23. DCEVM class Offset( val x: Int, val y: Int, ) Dynamic Code Evolution Virtual Machine Side Universe Class Loader class Offset( val x: Int, ) Current Class Loader
24. DCEVM class Offset( val x: Int, val y: Int, ) Dynamic Code Evolution Virtual Machine Current Class Loader
25. What do you mean… “migrate objects”?
26. DCEVM Dynamic Code Evolution Virtual Machine Offset@235235 Offset@534643 Offset@734122 Of class Offset( val x: Int, )
27. DCEVM Dynamic Code Evolution Virtual Machine 42 Header 13 Header 24 Header Offset@235235 Offset@534643 Offset@734122 Of class Offset( val x: Int, )
28. DCEVM Dynamic Code Evolution Virtual Machine 42 Header 13 Header 24 Header Offset@235235 Offset@534643 Offset@734122 Of class Offset( val x: Int, val y: Int, ) +
29. DCEVM Dynamic Code Evolution Virtual Machine 42 Header 13 Header 24 Header Offset@235235 Offset@534643 Offset@734122 Of Offset@235235 Offset@534643 Offset@734 class Offset( val x: Int, val y: Int, ) +
30. DCEVM Dynamic Code Evolution Virtual Machine 42 Header 13 Header 24 Header Offset@235235 Offset@534643 Offset@734122 Of Offset@235235 Offset@534643 Offset@734 42 Header 13 Header Head class Offset( val x: Int, val y: Int, ) +
31. DCEVM Dynamic Code Evolution Virtual Machine 42 Header 13 Header 24 Header Offset@235235 Offset@534643 Offset@734122 Of Offset@235235 Offset@534643 Offset@734 42 Header 13 Header Head 0 0 class Offset( val x: Int, val y: Int, ) +
32. DCEVM Dynamic Code Evolution Virtual Machine Offset@235235 Offset@534643 Offset@734 42 Header 13 Header Head 0 0 class Offset( val x: Int, val y: Int, ) +
33. Compose diffing fun mediumPadding() = 16.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here's a counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } }
34. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here's a counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
35. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here's a counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
36. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here's a counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
37. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here's a counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
38. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here’s a counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
39. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here’s a wonderful counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
40. fun mediumPadding() = 32.dp @Composable fun Counter() { var counter by remember { mutableStateOf(0) } Text("Here’s a wonderful counter:") Card { Button( modifier = Modifier.padding(mediumPadding()), onClick = { counter++ } ) { Text("Clicked $counter times") } } } Compose diffing
41. Structural changes @Composable fun SomeWidget() { Card { Text("A") Card { Text("B") Card { Text("C") } } } }
42. Structural changes @Composable fun SomeWidget() { Card { Text("A") Card { Text("B") Card { Text("C") } } } } CS$SomeWidgetKt$lambda-1.class Function3<ColumnScope, Composer, ...>
43. Structural changes @Composable fun SomeWidget() { Card { Text("A") Card { Text("B") Card { Text("C") } } } } CS$SomeWidgetKt$lambda-2.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-1.class Function3<ColumnScope, Composer, ...>
44. Structural changes @Composable fun SomeWidget() { Card { Text("A") Card { Text("B") Card { Text("C") CS$SomeWidgetKt$lambda-3.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-2.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-1.class Function3<ColumnScope, Composer, ...> } } } }
45. Structural changes @Composable fun SomeWidget() { Card { Text("A") Card { Text("B") Card { Text("C") Surface { Text("D") } } } } } CS$SomeWidgetKt$lambda-3.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-2.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-1.class Function3<ColumnScope, Composer, ...>
46. Structural changes @Composable fun SomeWidget() { Card { Text("A") Card { Text("B") Card { Text("C") Surface { Text("D") } } } } } CS$SomeWidgetKt$lambda-3.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-2.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-1.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-?.class Function2<Composer, ...>
47. Structural changes @Composable fun SomeWidget() { Card { Text("A") Card { Text("B") Card { Text("C") Surface { Text("D") } } } } } CS$SomeWidgetKt$lambda-4.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-3.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-2.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-1.class Function2<Composer, ...>
48. Structural changes @Composable fun SomeWidget() { Card { Text("A") Card { Text("B") Card { Text("C") Surface { Text("D") } } } } } CS$SomeWidgetKt$lambda-4.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-3.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-2.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-1.class Function2<Composer, ...> this: ColumnScope this: ColumnScope this: ColumnScope
49. Structural changes @Composable fun SomeWidget() { Card { Text("A") Card { Text("B") Card { Text("C") Surface { Text("D") } } } } } CS$SomeWidgetKt$lambda-4.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-3.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-2.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-1.class Function2<Composer, ...>
50. Structural changes CS$SomeWidgetKt$lambda-3523533.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-1995335.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-1245234.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-5235232.class Function2<Composer, ...> } } } } @Composable fun SomeWidget() { Card { Text("A") Card { Text("B") Card { Text("C") Surface { Text("D") }
51. Structural changes @Composable fun SomeWidget() { Card { Text("A") Card { Text("B") Card { Text("C") CS$SomeWidgetKt$lambda-3523533.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-1995335.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-1245234.class Function3<ColumnScope, Composer, ...> } } } }
52. Structural changes @Composable fun SomeWidget() { Card { Text("A") Card { Text("B") Card { Text("C") Surface { Text("D") } CS$SomeWidgetKt$lambda-3523533.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-1995335.class Function3<ColumnScope, Composer, ...> } } } } CS$SomeWidgetKt$lambda-1245234.class Function3<ColumnScope, Composer, ...> CS$SomeWidgetKt$lambda-5235232.class Function2<Composer, ...>
53. Demo
54. jb.gg/chr
55. Yes, you’ll need a desktop target.
56. Android app iOS app Compose Multiplatform UI ViewModels Data layer
57. Desktop app Android app iOS app Compose Multiplatform UI ViewModels Data layer
58. Desktop app* Android app iOS app Compose Multiplatform UI ViewModels Data layer Fake data layer
59. Gallery app Android app iOS app Compose Multiplatform UI ViewModels Data layer
63. Kotlin by JetBrains, present and future (office hours) unsolved conf @ 12:00 Márton Braun Sebastian Aigner
64. zsmb.co/talks Márton Braun @zsmb.co Compose Hot Reload jb.gg/chr KotlinConf app jb.gg/kc-app Sebastian Sellmair’s content KotlinConf talk jb.gg/kc25-chr YouTube youtube.com/@s.sellmair Blog blog.sellmair.io Blazing Fast UI Development with