Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compose Migration Side Effects - What Can Go Wr...

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.

István Juhos

May 24, 2024
Tweet

More Decks by István Juhos

Other Decks in Programming

Transcript

  1. #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.
  2. #KotlinConf istvanjuhos.dev - the old lab • Our codebase is

    our lab • You don’t have an old lab? Lab of the Lost
  3. #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 ✅
  4. #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 😬
  5. #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 😬
  6. #KotlinConf istvanjuhos.dev • No 💰 or business case to rewrite

    existing features Codebase fragmentation + Compose 🤔
  7. #KotlinConf istvanjuhos.dev • No 💰 or business case to rewrite

    existing features • Other migrations, refactoring, and modularization might be in progress Codebase fragmentation + Compose 🤔
  8. #KotlinConf istvanjuhos.dev • More context switching (Views vs. Compose) •

    UI tests need to be Compose-aware for hybrid screens Mixing Views and Compose 🤔
  9. #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 🤔
  10. #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
  11. #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
  12. #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
  13. #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
  14. #KotlinConf istvanjuhos.dev • Spacings? • Dimensions? • Custom semantic colors,

    sizes, typography, etc.? Compose theme - is Material enough? 🤔
  15. #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
  16. #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
  17. #KotlinConf istvanjuhos.dev DemoAppTheme { Column( modifier = Modifier .padding( all

    = DemoAppTheme.spacings.small ) ) { Text( text = "", style = DemoAppTheme.typography.title1 ) } } Compose theme 😌
  18. #KotlinConf istvanjuhos.dev Worth mentioning • Navigation • Composable code organization

    • @Previews • Overusing ComposeView / AbstractComposeView
  19. #KotlinConf istvanjuhos.dev Worth mentioning • Navigation • Composable code organization

    • @Previews • Overusing ComposeView / AbstractComposeView • Performance impact
  20. #KotlinConf istvanjuhos.dev Worth mentioning • Navigation • Composable code organization

    • @Previews • Overusing ComposeView / AbstractComposeView • Performance impact • Convincing iOS engineers to look into KMP / CMP
  21. 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.