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? (Android Worldwide 2024 April)

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 21, 2024
Tweet

More Decks by István Juhos

Other Decks in Programming

Transcript

  1. #androidww istvanjuhos.dev - the old lab • Our codebase is

    our lab • You don’t have an old lab? Lab of the Lost
  2. #androidww istvanjuhos.dev - the old lab • Our codebase is

    our lab • You don’t have an old lab? • Good or you ✅ Lab of the Lost
  3. #androidww istvanjuhos.dev - the old lab • Our codebase is

    our lab • You don’t have an old lab? • Good or you ✅ • Your current codebase has a high chance of becoming it one day 😬 Lab of the Lost
  4. #androidww istvanjuhos.dev - the old lab • Our codebase is

    our lab • You don’t have an old lab? • Good or you ✅ • Your current codebase has a high chance of becoming it one day 😬 • Let’s be mindful when adopting Compose! Lab of the Lost
  5. #androidww istvanjuhos.dev • No resources or business case to rewrite

    existing features Codebase fragmentation + Compose 🤔
  6. #androidww istvanjuhos.dev • No resources or business case to rewrite

    existing features • Architectural refactoring might be necessary Codebase fragmentation + Compose 🤔
  7. #androidww istvanjuhos.dev • No resources or business case to rewrite

    existing features • Architectural refactoring might be necessary • Creating new features in new modules with Compose is a reasonable direction Codebase fragmentation + Compose 🤔
  8. #androidww istvanjuhos.dev Mixing Views and Compose • We can do

    that • Compose-View interop is supported 🤩
  9. #androidww istvanjuhos.dev • Context switching (Views vs. Compose) • Possible

    performance impact • UI tests need to be Compose-aware for hybrid screens Mixing Views and Compose 🤔
  10. #androidww istvanjuhos.dev • Context switching (Views vs. Compose) • Possible

    performance impact • UI tests need to be Compose-aware for hybrid screens • Extra work based on the complexity of your testing setup Mixing Views and Compose 🤔
  11. #androidww istvanjuhos.dev Compose theme • Theming in Compose is easy

    • More so if we use Material 2/3 as-is 🤩
  12. #androidww 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
  13. #androidww istvanjuhos.dev 🤩 Compose theme using Material DemoAppTheme { Column

    { Text( text = "", style = MaterialTheme.typography.titleLarge ) } }
  14. #androidww istvanjuhos.dev 🤔 Compose theme using 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
  15. #androidww istvanjuhos.dev • Spacings? • Dimensions? • Custom semantic colors,

    sizes, typography? • A custom design system with Compose? 🤔 Compose theme - is Material enough?
  16. #androidww istvanjuhos.dev private val LocalSpacings = compositionLocalOf<DemoSpacings> { error("No spacings

    provided!") } data class DemoSpacings ( val small: Dp = 8.dp, // ... ) Compose theme
  17. #androidww 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
  18. #androidww istvanjuhos.dev Worth mentioning • Navigation • View navigation +

    Compose navigation? • Keeping Activities and Fragments around?
  19. #androidww istvanjuhos.dev Worth mentioning • Navigation • View navigation +

    Compose navigation? • Keeping Activities and Fragments around? • Composable code organization • Are your Composables really reusable?
  20. #androidww istvanjuhos.dev Worth mentioning • Navigation • View navigation +

    Compose navigation? • Keeping Activities and Fragments around? • Composable code organization • Are your Composables really reusable? • Meaningful @Previews
  21. Compose Migration Side Effects - What Can Go Wrong? istvanjuhos.dev

    @stewemetal • Take the low-e ff ort precautions when adopting Compose • Your Compose code will become the “old lab” eventually István Juhos DEXTER'S LABORATORY and all related characters and elements are trademark of and ©Cartoon Network.