mDevCamp Prague: Beyond the UI

Much in the same way that Coroutines revolutionized reactive architecture, Compose challenges us to rethink how we design applications. While traditionally seen as a UI toolkit, Compose — and specifically Compose Multiplatform — can play a much larger role in our applications. By leveraging its declarative and state-driven nature, we can build, model, and manage application state in a way that is consistent, scalable, and platform-agnostic.

Transcript

1. Beyond the UI Compose as a Foundation for Multiplatform Apps mDevCamp - June '25 ! Ash Davies | ashdavies.dev Android GDE Berlin
2. Jetpack Compose UI github.com/androidx/androidx/tree/ androidx-main/compose/ui ashdavies.dev
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
4. Jetpack Compose UI github.com/androidx/androidx/tree/ androidx-main/compose/ui ashdavies.dev
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
6. Android Layouts Lifecycle ashdavies.dev
7. Android Layouts Lifecycle Abstraction ashdavies.dev
8. Android Layouts Lifecycle Abstraction ashdavies.dev
9. Android Layouts Kotlin Interop ashdavies.dev
10. XML?! ashdavies.dev
11. Jetpack Compose UI ! 1.0 (July 2021) ashdavies.dev
12. Declarative UI Framework Compose UI ashdavies.dev
13. Intelligent Recomposition ! Compose UI @Composable fun ClickCounter(clicks: Int, onClick: () -> Unit) { Button(onClick = onClick) { Text("I've been clicked $clicks times") } } ashdavies.dev
14. Kotlin Language Features ! Compose UI — Default parameters — Higher order functions — Trailing lambdas — Scopes / Receivers — Delegated properties — ... ashdavies.dev
15. Jetpack Compose UI Under-the-hood medium.com/androiddevelopers/under-the-hood-of-jetpack-compose-part-2-of-2-37b2c20c6cdd
16. What tree structure does the Compose runtime output? ashdavies.dev
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
18. ⚠ Compose != Compose UI ashdavies.dev
19. Kotlin Multiplatform Stable (1.9.20) ashdavies.dev
20. The Before Times ashdavies.dev
21. The Before Times ashdavies.dev
22. ashdavies.dev
23. Compose Multiplatform v1.0 | 2021 ashdavies.dev
24. github.com/JetBrains/compose-multiplatform-core
25. Compose Multiplatform Migration — Change artifact coordinates — Do nothing — Profit ashdavies.dev
26. ashdavies.dev
27. Hype Driven Development ashdavies.dev/talks/hype-driven-development-berlin-devfest/
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
29. // Compiled Compose code fun Counter($composer: Composer) { $composer.startRestartGroup(-1913267612) /* ... */ $composer.endRestartGroup() } // Compiled Coroutines code fun counter($completion: Continuation) { /* ... */ } ashdavies.dev
30. KotlinX Coroutines ashdavies.dev
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
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
33. KotlinX Coroutines — Lightweight memory usage — Structured concurrency — Cancellation propagation — Lifecycle aware ashdavies.dev
34. KotlinX Coroutines — Native library — Imperative syntax — suspend fun ashdavies.dev
35. Reactive Architecture — Push (not pull) — Unidirectional Data Flow — Declarative — Idempotent ashdavies.dev
36. downloadManager .downloadFile("https://.../") .addOnCompletionListener { result -> fileManager .saveFile("storage/file", result) .addOnCompletionListener { success -> if (success) { println("Downloaded file successfully") } } } } ashdavies.dev
37. downloadManager .downloadFile("https://.../") .flatMap { result -> fileManager.saveFile("storage/file", result) } .observe { success -> if (success) { println("Downloaded file successfully") } } ashdavies.dev
38. val file = downloadFile("https://.../") val success = fileManager.saveFile("storage/file", file) if (success) { println("Downloaded file successfully") } ashdavies.dev
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
40. RootNode ChildNode ChildNode ChildNode ChildNode ChildNode ChildNode ChildNode ChildNode ChildNode ChildNode ChildNode ashdavies.dev
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
42. github.com/cashapp/molecule
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
44. Testing @Test fun counter() = runTest { moleculeFlow(RecompositionMode.Immediate) { Counter() }.test { assertEquals(0, awaitItem()) assertEquals(1, awaitItem()) assertEquals(2, awaitItem()) cancel() } } ashdavies.dev
45. ashdavies.dev
46. Turbine flowOf("one", "two").test { assertEquals("one", awaitItem()) assertEquals("two", awaitItem()) awaitComplete() } ashdavies.dev
47. Architecture ashdavies.dev
48. Navigation ashdavies.dev
49. Jetpack Navigation 3 android-developers.googleblog.com/2025/05/announcing-jetpack-navigation-3-for-compose.html
50. Pre-Compose Era ashdavies.dev
51. Tooling in Compose Multiplatform ashdavies.dev
52. Decompose & Essenty arkivanov.github.io/Decompose ashdavies.dev
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
54. adrielcafe/voyager voyager.adriel.cafe ashdavies.dev
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
56. appyx bumble-tech.github.io/appyx ashdavies.dev
57. PreCompose github.com/Tlaster/PreCompose ashdavies.dev
58. github.com/cashapp/molecule
59. github.com/slackhq/circuit
60. Circuit State @Parcelize data object HomeScreen : Screen { data class State( val title: String, ): CircuitUiState } ashdavies.dev
61. Circuit Presenter class HomePresenter : Presenter<HomeScreen.State> { @Composable override fun present(): HomeScreen.State { return HomeScreen.State("Hello World") } } ashdavies.dev
62. Circuit UI @Composable fun HomeScreen( state: HomeScreen.State, modifier: Modifier = Modifier, ) { Text( text = state.title, modifier = modifier, ) } ashdavies.dev
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
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
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
66. youtube.com/watch?v=ZIr_uuN8FEw
67. But Why? ashdavies.dev
68. ashdavies.dev
69. Prototyping ! ashdavies.dev
70. github.com/JetBrains/compose-hot-reload
71. Recomposition ! ashdavies.dev
72. Stability ⚖ — org.jetbrains.kotlinx:kotlinx-collections-immutable — composeCompiler.stabilityConfigurationFile — @Immutable — @Stable developer.android.com/develop/ui/compose/performance/stability
73. Remember ! ashdavies.dev
74. Remember ! var path by remember { mutableStateOf("https://.../") } val file = remember(path) { downloadManager.downloadFile(path) } ashdavies.dev
75. Remember ! var path by remember { mutableStateOf("https://.../") } val file = rememberSaveable(path) { // Must be Parcelable on Android! downloadManager.downloadFile(path) } ashdavies.dev
76. Circuit rememberRetained() ashdavies.dev
77. rememberRetainedCoroutineScope() Retaining Beyond ViewModels chrisbanes.me/posts/retaining-beyond-viewmodels
78. Consistent State Pa!erns — Hoisting, unidirectional data flow — Shared reactive state handling ashdavies.dev
79. Compose Multiplatform Material Theming MaterialTheme( colorScheme = /* ... */, typography = /* ... */, shapes = /* ... */, ) { // M3 app content } ashdavies.dev
80. ashdavies.dev
81. @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
82. IDE-First Experience — JetBrains tools tightly integrated — Live previews and navigation supported ashdavies.dev
83. 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
84. Thank You! Ash Davies | ashdavies.dev Android GDE Berlin