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.

Transcript

1. Compose Migration Side Effects What Can Go Wrong? istvanjuhos.dev István Juhos @stewemetal
2. #androidww istvanjuhos.dev Food for thought - Lab of the Lost
3. #androidww istvanjuhos.dev dexterslab.fandom.com/wiki/Lab_of_the_Lost Food for thought - Lab of the Lost
4. #androidww istvanjuhos.dev dexterslab.fandom.com/wiki/Lab_of_the_Lost Food for thought - Lab of the Lost
5. #androidww istvanjuhos.dev dexterslab.fandom.com/wiki/Lab_of_the_Lost Food for thought - Lab of the Lost
6. #androidww istvanjuhos.dev - the old lab • Our codebase is our lab Lab of the Lost
7. #androidww istvanjuhos.dev - the old lab • Our codebase is our lab • You don’t have an old lab? Lab of the Lost
8. #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
9. #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
10. #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
11. istvanjuhos.dev #androidww Codebase fragmentation
12. #androidww istvanjuhos.dev Codebase fragmentation 2008 Views … 2015 View binding 2019 Data binding 👻 2021 Compose …
13. #androidww istvanjuhos.dev Codebase fragmentation 2008 Views … 2015 View binding 2019 Data binding 👻 2021 Compose …
14. #androidww istvanjuhos.dev Codebase fragmentation 2008 Views … 2015 View binding 2019 Data binding 👻 2021 Compose …
15. #androidww istvanjuhos.dev Codebase fragmentation 2008 Views … 2015 View binding 2019 Data binding 👻 2021 Compose …
16. #androidww istvanjuhos.dev Codebase fragmentation We’d like to use Compose! 🤩
17. #androidww istvanjuhos.dev Codebase fragmentation + Compose 🤔
18. #androidww istvanjuhos.dev • No resources or business case to rewrite existing features Codebase fragmentation + Compose 🤔
19. #androidww istvanjuhos.dev • No resources or business case to rewrite existing features • Architectural refactoring might be necessary Codebase fragmentation + Compose 🤔
20. #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 🤔
21. #androidww istvanjuhos.dev Codebase fragmentation + Compose
22. #androidww istvanjuhos.dev Codebase fragmentation + Compose }Legacy features (old lab)
23. #androidww istvanjuhos.dev Codebase fragmentation + Compose
24. #androidww istvanjuhos.dev Codebase fragmentation + Compose ?
25. #androidww istvanjuhos.dev Codebase fragmentation + Compose ? 🤔
26. istvanjuhos.dev #androidww Mixing Views and Compose
27. #androidww istvanjuhos.dev Mixing Views and Compose • We can do that 🤩
28. #androidww istvanjuhos.dev Mixing Views and Compose • We can do that • Compose-View interop is supported 🤩
29. #androidww istvanjuhos.dev Mixing Views and Compose 🤔
30. #androidww istvanjuhos.dev • Context switching (Views vs. Compose) Mixing Views and Compose 🤔
31. #androidww istvanjuhos.dev • Context switching (Views vs. Compose) • Possible performance impact Mixing Views and Compose 🤔
32. #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 🤔
33. #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 🤔
34. #androidww istvanjuhos.dev Mixing Views and Compose
35. #androidww istvanjuhos.dev Mixing Views and Compose
36. istvanjuhos.dev #androidww Compose theme
37. #androidww istvanjuhos.dev Compose theme • Theming in Compose is easy • More so if we use Material 2/3 as-is 🤩
38. #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
39. #androidww istvanjuhos.dev 🤩 Compose theme using Material DemoAppTheme { Column { Text( text = "", style = MaterialTheme.typography.titleLarge ) } }
40. #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
41. #androidww istvanjuhos.dev Compose theme - is Material enough? 🤔
42. #androidww istvanjuhos.dev Compose theme - is Material enough? 🤔
43. #androidww istvanjuhos.dev • Spacings? • Dimensions? • Custom semantic colors, sizes, typography? • A custom design system with Compose? 🤔 Compose theme - is Material enough?
44. #androidww istvanjuhos.dev Compose theme data class DemoSpacings ( val small: Dp = 8.dp, // ... )
45. #androidww istvanjuhos.dev private val LocalSpacings = compositionLocalOf<DemoSpacings> { error("No spacings provided!") } data class DemoSpacings ( val small: Dp = 8.dp, // ... ) Compose theme
46. #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
47. #androidww istvanjuhos.dev DemoAppTheme { Column( modifier = Modifier .padding( DemoAppTheme.spacings.small ) ) { // ... } } Compose theme 😌
48. #androidww istvanjuhos.dev Compose theme developer.android.com/develop/ui/compose/designsystems/anatomy
49. #androidww istvanjuhos.dev Compose theme developer.android.com/develop/ui/compose/designsystems/anatomy
50. #androidww istvanjuhos.dev Worth mentioning • Navigation • View navigation + Compose navigation? • Keeping Activities and Fragments around?
51. #androidww istvanjuhos.dev Worth mentioning • Navigation • View navigation + Compose navigation? • Keeping Activities and Fragments around? • Composable code organization • Are your Composables really reusable?
52. #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
53. istvanjuhos.dev #androidww Wrapping up 📦
54. #androidww istvanjuhos.dev Resources • dexterslab.fandom.com/wiki/Lab_of_the_Lost • developer.android.com/develop/ui/compose/designsystems/anatomy • marcogomiero.com/talks/2023/path-monolith-multi-module-app- androidmakers/ • istvanjuhos.dev/talks/2023/20231202-compose-view-interop-in-practice/
55. 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.