Compose Migration Side Effects - What Can Go Wrong? (KotlinConf 2024)

Android development has been revolving around the adoption of Compose lately. Compose is still the shiny, new, declarative - and now also multiplatform - way of building UIs. However, there are tons of projects out there that were built with Views, UIKit, or other favored UI solutions of platforms, while engineers also accumulated knowledge about all the quirks, issues, and workarounds with the framework they had to use or have chosen.

In this talk, we'll look at some less-than-ideal scenarios when jumping on the Compose train in a project unprepared might cause long-term headaches, and how we can avoid falling into future traps that we unconsciously set up today.

Transcript

1. Compose Migration Side Effects What Can Go Wrong? istvanjuhos.dev István Juhos @stewemetal
2. #KotlinConf istvanjuhos.dev Food for thought - Lab of the Lost
3. #KotlinConf istvanjuhos.dev dexterslab.fandom.com/wiki/Lab_of_the_Lost Food for thought - Lab of the Lost
4. #KotlinConf istvanjuhos.dev dexterslab.fandom.com/wiki/Lab_of_the_Lost Food for thought - Lab of the Lost Dexter lands in the abandoned part of the lab, 
 where he fi nds many of his neglected inventions.
5. #KotlinConf istvanjuhos.dev - the old lab • Our codebase is our lab Lab of the Lost
6. #KotlinConf istvanjuhos.dev - the old lab • Our codebase is our lab • You don’t have an old lab? Lab of the Lost
7. #KotlinConf istvanjuhos.dev - the old lab • Our codebase is our lab • You don’t have an old lab? • Good or you! Lab of the Lost ✅
8. #KotlinConf istvanjuhos.dev - the old lab • Our codebase is our lab • You don’t have an old lab? • Good or you! • Your current codebase will become it one day Lab of the Lost 😬
9. #KotlinConf istvanjuhos.dev - the old lab • Our codebase is our lab • You don’t have an old lab? • Good or you! • Your current codebase will become it one day (yes, KMP projects too) Lab of the Lost 😬
10. istvanjuhos.dev #KotlinConf Codebase fragmentation
11. #KotlinConf istvanjuhos.dev Codebase fragmentation 2008 Views … 2015 View binding 2019 Data binding 2021 Compose …
12. #KotlinConf istvanjuhos.dev Codebase fragmentation 2008 Views … 2015 View binding 2019 Data binding 2021 Compose …
13. #KotlinConf istvanjuhos.dev Codebase fragmentation 2008 Views … 2015 View binding 2019 2021 Compose … Data binding
14. #KotlinConf istvanjuhos.dev Codebase fragmentation 2008 Views … 2015 View binding 2019 2021 Compose … Data binding 👻
15. #KotlinConf istvanjuhos.dev Codebase fragmentation 2008 Views … 2015 View binding 2019 2021 Compose … Data binding 👻
16. #KotlinConf istvanjuhos.dev Codebase fragmentation + Compose 🤔
17. #KotlinConf istvanjuhos.dev • No 💰 or business case to rewrite existing features Codebase fragmentation + Compose 🤔
18. #KotlinConf istvanjuhos.dev • No 💰 or business case to rewrite existing features • Other migrations, refactoring, and modularization might be in progress Codebase fragmentation + Compose 🤔
19. #KotlinConf istvanjuhos.dev Codebase fragmentation + Compose
20. #KotlinConf istvanjuhos.dev Codebase fragmentation + Compose
21. #KotlinConf istvanjuhos.dev Codebase fragmentation + Compose
22. #KotlinConf istvanjuhos.dev KMP + Compose Multiplatform
23. #KotlinConf istvanjuhos.dev KMP + Compose Multiplatform iOS
24. istvanjuhos.dev #KotlinConf Back to Android…
25. istvanjuhos.dev #KotlinConf Mixing Views and Compose
26. #KotlinConf istvanjuhos.dev Mixing Views and Compose 🤔 Compose == less context switching between XML and code
27. #KotlinConf istvanjuhos.dev • More context switching (Views vs. Compose) Mixing Views and Compose 🤔
28. #KotlinConf istvanjuhos.dev • More context switching (Views vs. Compose) • UI tests need to be Compose-aware for hybrid screens Mixing Views and Compose 🤔
29. #KotlinConf istvanjuhos.dev • More context switching (Views vs. Compose) • UI tests need to be Compose-aware for hybrid screens • Compose-View interop can be overused Mixing Views and Compose 🤔
30. istvanjuhos.dev #KotlinConf Compose theme
31. #KotlinConf istvanjuhos.dev Compose theme • Theming in Compose is kind of easy 🤩
32. #KotlinConf istvanjuhos.dev Compose theme • Theming in Compose is kind of easy if we use Material 2/3 🤔
33. #KotlinConf istvanjuhos.dev @Composable fun DemoAppTheme( darkTheme: Boolean = isSystemInDarkTheme(), dynamicColor: Boolean = true, content: @Composable () -> Unit ) { val colorScheme = when { ... } MaterialTheme( colorScheme = colorScheme, typography = Typography, content = content ) } Compose theme using Material
34. #KotlinConf istvanjuhos.dev @Composable fun DemoAppTheme( darkTheme: Boolean = isSystemInDarkTheme(), dynamicColor: Boolean = true, content: @Composable () -> Unit ) { val colorScheme = when { ... } MaterialTheme( colorScheme = colorScheme, typography = Typography, content = content ) } Compose theme using Material
35. #KotlinConf istvanjuhos.dev Compose theme leaking Material DemoAppTheme { Column { Text( text = "", style = MaterialTheme.typography.titleLarge ) } } cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ material/material/src/commonMain/kotlin/androidx/compose/material/MaterialTheme.kt
36. #KotlinConf istvanjuhos.dev 🤔 Compose theme leaking Material DemoAppTheme { Column { Text( text = "", style = MaterialTheme.typography.titleLarge ) } } cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ material/material/src/commonMain/kotlin/androidx/compose/material/MaterialTheme.kt
37. #KotlinConf istvanjuhos.dev Compose theme - is Material enough? 🤔
38. #KotlinConf istvanjuhos.dev • Spacings? • Dimensions? • Custom semantic colors, sizes, typography, etc.? Compose theme - is Material enough? 🤔
39. #KotlinConf istvanjuhos.dev Compose theme - is Material enough? 🤔 • A custom design system with Compose?
40. #KotlinConf istvanjuhos.dev object DemoAppTheme { val spacings: DemoSpacings @Composable @ReadOnlyComposable get() = LocalSpacings.current } private val LocalSpacings = compositionLocalOf<DemoSpacings> { error("No spacings provided!") } data class DemoSpacings ( val small: Dp = 8.dp, // .. . ) Compose theme
41. #KotlinConf istvanjuhos.dev object DemoAppTheme { val spacings: DemoSpacings @Composable @ReadOnlyComposable get() = LocalSpacings.current } private val LocalSpacings = compositionLocalOf<DemoSpacings> { error("No spacings provided!") } data class DemoSpacings ( val small: Dp = 8.dp, // .. . ) Compose theme
42. #KotlinConf istvanjuhos.dev DemoAppTheme { Column( modifier = Modifier .padding( all = DemoAppTheme.spacings.small ) ) { Text( text = "", style = DemoAppTheme.typography.title1 ) } } Compose theme 😌
43. #KotlinConf istvanjuhos.dev Worth mentioning • Navigation
44. #KotlinConf istvanjuhos.dev Worth mentioning • Navigation • Composable code organization
45. #KotlinConf istvanjuhos.dev Worth mentioning • Navigation • Composable code organization • @Previews
46. #KotlinConf istvanjuhos.dev Worth mentioning • Navigation • Composable code organization • @Previews • Overusing ComposeView / AbstractComposeView
47. #KotlinConf istvanjuhos.dev Worth mentioning • Navigation • Composable code organization • @Previews • Overusing ComposeView / AbstractComposeView • Performance impact
48. #KotlinConf istvanjuhos.dev Worth mentioning • Navigation • Composable code organization • @Previews • Overusing ComposeView / AbstractComposeView • Performance impact • Convincing iOS engineers to look into KMP / CMP
49. istvanjuhos.dev #KotlinConf Wrapping up 📦
50. Compose Migration Side Effects - What Can Go Wrong? istvanjuhos.dev @stewemetal • Finish your existing migrations before adding Compose (MP) to the mix • Take your time to learn about Compose and it’s tooling István Juhos DEXTER'S LABORATORY and all related characters and elements are trademark of and ©Cartoon Network.
51. @stewemetal istvanjuhos.dev Thank you, and don ’ t forget to vote!