Droidcon London: Beyond the UI

In this talk, we’ll explore how Compose Multiplatform can reshape not just the user interface, but the entire architecture of your app.

You’ll learn techniques for structuring state, managing business logic, and creating modular, testable, and maintainable systems across platforms.

Whether you’re targeting mobile, desktop, or beyond, this session will give you the tools and perspective to design applications that exploit the efficacy of Compose.

Transcript

1. Beyond the UI Compose as a Foundation for Multiplatform Apps Droidcon London - October '25 ! Ash Davies | ashdavies.dev Android GDE Berlin 1
2. Jetpack Compose UI github.com/androidx/androidx/tree/ androidx-main/compose/ui ashdavies.dev 2
3. @Composable fun JetpackCompose() { Card { var expanded by remember { mutableStateOf(false) } Column(Modifier.clickable { expanded = !expanded }) { Image(painterResource(R.drawable.jetpack_compose)) AnimatedVisibility(expanded) { Text( text = "Jetpack Compose", style = MaterialTheme.typography.bodyLarge, ) } } } } ashdavies.dev 3
4. Jetpack Compose UI github.com/androidx/androidx/tree/ androidx-main/compose/ui ashdavies.dev 4
5. Android Layouts <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button" /> </LinearLayout> ashdavies.dev 5
6. Android Layouts Lifecycle ashdavies.dev 6
7. Android Layouts Lifecycle Abstraction ashdavies.dev 7
8. Android Layouts Lifecycle Abstraction ashdavies.dev 8
9. Android Layouts Kotlin Interop ashdavies.dev 9
10. XML?! ashdavies.dev 10
11. Jetpack Compose UI ! 1.0 (July 2021) ashdavies.dev 11
12. Declarative UI Framework Compose UI ashdavies.dev 12
13. Intelligent Recomposition ! Compose UI @Composable fun ClickCounter(clicks: Int, onClick: () -> Unit) { Button(onClick = onClick) { Text("I've been clicked $clicks times") } } ashdavies.dev 13
14. Kotlin Language Features ! Compose UI — Default parameters — Higher order functions — Trailing lambdas — Scopes / Receivers — Delegated properties — ... ashdavies.dev 14
15. Jetpack Compose UI Under-the-hood medium.com/androiddevelopers/under-the-hood-of-jetpack-compose-part-2-of-2-37b2c20c6cdd 15
16. What tree structure does the Compose runtime output? ashdavies.dev 16
17. Compose is, at its core, a general-purpose tool for managing a tree of nodes of any type ... a “tree of nodes” describes just about anything, and as a result Compose can target just about anything. — Jake Wharton jakewharton.com/a-jetpack-compose-by-any-other-name 17
18. ⚠ Compose != Compose UI ashdavies.dev 18
19. Kotlin Multiplatform Stable (1.9.20) ashdavies.dev 19
20. The Before Times ashdavies.dev 20
21. The Before Times ashdavies.dev 21
22. ashdavies.dev 22
23. Compose Multiplatform v1.0 | 2021 ashdavies.dev 23
24. github.com/JetBrains/compose-multiplatform-core 24
25. Compose Multiplatform Migration — Change artifact coordinates — Do nothing — Profit ashdavies.dev 25
26. ashdavies.dev 26
27. Hype Driven Development ashdavies.dev/talks/hype-driven-development-berlin-devfest/ 27
28. “I suppose it is tempting, if the only tool you have is a hammer, to treat everything as if it were a nail.” — Abraham Maslow ashdavies.dev 28
29. // Compiled Compose code fun Counter($composer: Composer) { $composer.startRestartGroup(-1913267612) /* ... */ $composer.endRestartGroup() } // Compiled Coroutines code fun counter($completion: Continuation) { /* ... */ } ashdavies.dev 29
30. KotlinX Coroutines ashdavies.dev 30
31. @Suppress("DEPRECATION") class CallbackLoginPresenter( private val service: SessionService, private val goTo: (Screen) -> Unit, ) { /* ... */ inner class LoginAsyncTask : AsyncTask<Submit,Void,LoginResult>() { private var username: String = "" override fun doInBackground(vararg events: Submit?): LoginResult { val event = events[0]!! username = event.username return runBlocking { service.login(event.username, event.password) } } override fun onPostExecute(result: LoginResult?) { when (result) { is Success -> goTo(LoggedInScreen(username)) is Failure -> goTo(ErrorScreen(result.throwable?.message ?: "")) else -> {} } } } } speakerdeck.com/ashdavies/droidcon-nyc-demystifying-molecule?slide=27 31
32. Observable.just("Hey") .subscribeOn(Schedulers.io()) .map(String::length) .subscribeOn(Schedulers.computation()) .observeOn(AndroidSchedulers.mainThread()) .doOnSubscribe { doAction() } .flatMap { doAction() Observable.timer(1, TimeUnit.SECONDS) .subscribeOn(Schedulers.single()) .doOnSubscribe { doAction() } } .subscribe { doAction() } proandroiddev.com/how-rxjava-chain-actually-works-2800692f7e13 32
33. KotlinX Coroutines — Lightweight memory usage — Structured concurrency — Cancellation propagation — Lifecycle aware ashdavies.dev 33
34. KotlinX Coroutines — Native library — Imperative syntax — suspend fun ashdavies.dev 34
35. Reactive Architecture — Push (not pull) — Unidirectional Data Flow — Declarative — Idempotent ashdavies.dev 35
36. downloadManager .downloadFile("https://.../") .addOnCompletionListener { result -> fileManager .saveFile("storage/file", result) .addOnCompletionListener { success -> if (success) { println("Downloaded file successfully") } } } } ashdavies.dev 36
37. downloadManager .downloadFile("https://.../") .flatMap { result -> fileManager.saveFile("storage/file", result) } .observe { success -> if (success) { println("Downloaded file successfully") } } ashdavies.dev 37
38. val file = downloadFile("https://.../") val success = fileManager.saveFile("storage/file", file) if (success) { println("Downloaded file successfully") } ashdavies.dev 38
39. - downloadManager - .downloadFile("https://.../") - .flatMap { result -> - fileManager.saveFile("storage/file", result) - } - .observe { success -> - if (success) { - println("Downloaded file successfully") - } - } + downloadManager. + downloadFile("https://.../") + .flatMapLatest { state -> + when (state) { + is State.Loaded -> + stateFileManager + .saveFile("storage/file", state.value) + + else -> state + } + } + .collect { state -> + when (state) { + is State.Saved -> + println("Downloaded file successfully") + + is State.Loading -> + /* ... */ + } + } ashdavies.dev 39
40. RootNode ChildNode ChildNode ChildNode ChildNode ChildNode ChildNode ChildNode ChildNode ChildNode ChildNode ChildNode ashdavies.dev 40
41. val downloadState = downloadManager .downloadFile("https://.../") .collectAsState(State.Downloading) val fileState = when(downloadState) { is State.Loaded -> stateFileManager .saveFile("storage/file", downloadState.value) else -> downloadState } when (fileState) { is State.Loading -> /* ... */ is State.Saved -> LaunchedEffect(fileState) { println("Downloaded file successfully") } } ashdavies.dev 41
42. github.com/cashapp/molecule 42
43. Molecule fun CoroutineScope.launchCounter(): StateFlow<Int> { return launchMolecule(mode = ContextClock) { var count by remember { mutableStateOf(0) } LaunchedEffect(Unit) { while (true) { delay(1_000) count++ } } count } } ashdavies.dev 43
44. Testing @Test fun counter() = runTest { moleculeFlow(RecompositionMode.Immediate) { Counter() }.test { assertEquals(0, awaitItem()) assertEquals(1, awaitItem()) assertEquals(2, awaitItem()) cancel() } } ashdavies.dev 44
45. ashdavies.dev 45
46. Turbine flowOf("one", "two").test { assertEquals("one", awaitItem()) assertEquals("two", awaitItem()) awaitComplete() } ashdavies.dev 46
47. Architecture ashdavies.dev 47
48. Navigation ashdavies.dev 48
49. Jetpack Navigation 3 android-developers.googleblog.com/2025/05/announcing-jetpack-navigation-3-for-compose.html 49
50. Pre-Compose Era ashdavies.dev 50
51. Tooling in Compose Multiplatform ashdavies.dev 51
52. Decompose & Essenty arkivanov.github.io/Decompose ashdavies.dev 52
53. import com.arkivanov.decompose.ComponentContext class DefaultRootComponent( componentContext: ComponentContext, ) : RootComponent, ComponentContext by componentContext { init { lifecycle... // Access the Lifecycle stateKeeper... // Access the StateKeeper instanceKeeper... // Access the InstanceKeeper backHandler... // Access the BackHandler } } ashdavies.dev 53
54. adrielcafe/voyager voyager.adriel.cafe ashdavies.dev 54
55. Voyager class PostListScreen : Screen { @Composable override fun Content() { // ... } @Composable private fun PostCard(post: Post) { val navigator = LocalNavigator.currentOrThrow Card( modifier = Modifier.clickable { navigator.push(PostDetailsScreen(post.id)) } ) { // ... } } } ashdavies.dev 55
56. appyx bumble-tech.github.io/appyx ashdavies.dev 56
57. PreCompose github.com/Tlaster/PreCompose ashdavies.dev 57
58. github.com/cashapp/molecule 58
59. github.com/slackhq/circuit 59
60. Circuit State @Parcelize data object HomeScreen : Screen { data class State( val title: String, ): CircuitUiState } ashdavies.dev 60
61. Circuit Presenter class HomePresenter : Presenter<HomeScreen.State> { @Composable override fun present(): HomeScreen.State { return HomeScreen.State("Hello World") } } ashdavies.dev 61
62. Circuit UI @Composable fun HomeScreen( state: HomeScreen.State, modifier: Modifier = Modifier, ) { Text( text = state.title, modifier = modifier, ) } ashdavies.dev 62
63. Circuit val circuit = Circuit.Builder() .addPresenter<HomeScreen, HomeScreen.State>(HomePresenter()) .addUi<LauncherScreen, LauncherScreen.State> { _, _ -> HomeScreen(state, modifier) } .build() CircuitCompositionLocals(circuit) { val backStack = rememberSaveableBackStack(HomeScreen) NavigableCircuitContent( navigator = rememberCircuitNavigator(backStack), backStack = backStack, ) } ashdavies.dev 63
64. Circuit Navigation @Parcelize data object HomeScreen : Screen { data class State( val title: String, val eventSink: (Event) -> Unit ): CircuitUiState sealed interface Event { data class DetailClicked( val id: String, ): Event } ashdavies.dev 64
65. Circuit Navigation class HomePresenter(private val navigator: Navigator) : Presenter<HomeScreen.State> { @Composable override fun present(): HomeScreen.State { return HomeScreen.State("Hello World") { event -> when (event) { is HomeScreen.Event.DetailClicked -> navigator.goTo(DetailScreen(event.id)) } } } } ashdavies.dev 65
66. youtube.com/watch?v=ZIr_uuN8FEw 66
67. github.com/zacsweers/metro 67
68. RIP Anvil ashdavies.dev 68
69. But Why? ashdavies.dev 69
70. ashdavies.dev 70
71. Prototyping ! ashdavies.dev 71
72. github.com/JetBrains/compose-hot-reload 72
73. Recomposition ! ashdavies.dev 73
74. Stability ⚖ — org.jetbrains.kotlinx:kotlinx-collections-immutable — composeCompiler.stabilityConfigurationFile — @Immutable — @Stable developer.android.com/develop/ui/compose/performance/stability 74
75. Remember ! ashdavies.dev 75
76. Remember ! var path by remember { mutableStateOf("https://.../") } val file = remember(path) { downloadManager.downloadFile(path) } ashdavies.dev 76
77. Remember ! var path by remember { mutableStateOf("https://.../") } val file = rememberSaveable(path) { // Must be Parcelable on Android! downloadManager.downloadFile(path) } ashdavies.dev 77
78. Circuit rememberRetained() ashdavies.dev 78
79. rememberRetainedCoroutineScope() Retaining Beyond ViewModels chrisbanes.me/posts/retaining-beyond-viewmodels 79
80. Consistent State Pa!erns — Hoisting, unidirectional data flow — Shared reactive state handling ashdavies.dev 80
81. Compose Multiplatform Material Theming MaterialTheme( colorScheme = /* ... */, typography = /* ... */, shapes = /* ... */, ) { // M3 app content } ashdavies.dev 81
82. ashdavies.dev 82
83. @Composable fun AppTheme( theme: Theme, content: @Composable () -> Unit ) { AdaptiveTheme( material = { // Tweak this for your Material design MaterialTheme(content = it) }, cupertino = { // Tweak this for your iOS design CupertinoTheme(content = it) }, target = theme, content = content ) } ashdavies.dev 83
84. IDE-First Experience — JetBrains tools tightly integrated — Live previews and navigation supported ashdavies.dev 84
85. Beyond the UI Wrap-Up ✅ Compose is more than a UI toolkit ✅ Enables scalable, shared architecture ✅ Designed for Kotlin-first developers ✅ Multiplatform not just business logic ashdavies.dev 85
86. Thank You! Ash Davies | ashdavies.dev Android GDE Berlin 86