Tweet
Tweet

Slide 1

Slide 1 text

Compose Migration Side Effects What Can Go Wrong? istvanjuhos.dev István Juhos @stewemetal

Slide 2

Slide 2 text

#androidww istvanjuhos.dev Food for thought - Lab of the Lost

Slide 3

Slide 3 text

#androidww istvanjuhos.dev dexterslab.fandom.com/wiki/Lab_of_the_Lost Food for thought - Lab of the Lost

Slide 4

Slide 4 text

#androidww istvanjuhos.dev dexterslab.fandom.com/wiki/Lab_of_the_Lost Food for thought - Lab of the Lost

Slide 5

Slide 5 text

#androidww istvanjuhos.dev dexterslab.fandom.com/wiki/Lab_of_the_Lost Food for thought - Lab of the Lost

Slide 6

Slide 6 text

#androidww istvanjuhos.dev - the old lab • Our codebase is our lab Lab of the Lost

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

#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

Slide 9

Slide 9 text

#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

Slide 10

Slide 10 text

#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

Slide 11

Slide 11 text

istvanjuhos.dev #androidww Codebase fragmentation

Slide 12

Slide 12 text

#androidww istvanjuhos.dev Codebase fragmentation 2008 Views … 2015 View binding 2019 Data binding 👻 2021 Compose …

Slide 13

Slide 13 text

#androidww istvanjuhos.dev Codebase fragmentation 2008 Views … 2015 View binding 2019 Data binding 👻 2021 Compose …

Slide 14

Slide 14 text

#androidww istvanjuhos.dev Codebase fragmentation 2008 Views … 2015 View binding 2019 Data binding 👻 2021 Compose …

Slide 15

Slide 15 text

#androidww istvanjuhos.dev Codebase fragmentation 2008 Views … 2015 View binding 2019 Data binding 👻 2021 Compose …

Slide 16

Slide 16 text

#androidww istvanjuhos.dev Codebase fragmentation We’d like to use Compose! 🤩

Slide 17

Slide 17 text

#androidww istvanjuhos.dev Codebase fragmentation + Compose 🤔

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

#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 🤔

Slide 21

Slide 21 text

#androidww istvanjuhos.dev Codebase fragmentation + Compose

Slide 22

Slide 22 text

#androidww istvanjuhos.dev Codebase fragmentation + Compose }Legacy features (old lab)

Slide 23

Slide 23 text

#androidww istvanjuhos.dev Codebase fragmentation + Compose

Slide 24

Slide 24 text

#androidww istvanjuhos.dev Codebase fragmentation + Compose ?

Slide 25

Slide 25 text

#androidww istvanjuhos.dev Codebase fragmentation + Compose ? 🤔

Slide 26

Slide 26 text

istvanjuhos.dev #androidww Mixing Views and Compose

Slide 27

Slide 27 text

#androidww istvanjuhos.dev Mixing Views and Compose • We can do that 🤩

Slide 28

Slide 28 text

#androidww istvanjuhos.dev Mixing Views and Compose • We can do that • Compose-View interop is supported 🤩

Slide 29

Slide 29 text

#androidww istvanjuhos.dev Mixing Views and Compose 🤔

Slide 30

Slide 30 text

#androidww istvanjuhos.dev • Context switching (Views vs. Compose) Mixing Views and Compose 🤔

Slide 31

Slide 31 text

#androidww istvanjuhos.dev • Context switching (Views vs. Compose) • Possible performance impact Mixing Views and Compose 🤔

Slide 32

Slide 32 text

#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 🤔

Slide 33

Slide 33 text

#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 🤔

Slide 34

Slide 34 text

#androidww istvanjuhos.dev Mixing Views and Compose

Slide 35

Slide 35 text

#androidww istvanjuhos.dev Mixing Views and Compose

Slide 36

Slide 36 text

istvanjuhos.dev #androidww Compose theme

Slide 37

Slide 37 text

#androidww istvanjuhos.dev Compose theme • Theming in Compose is easy • More so if we use Material 2/3 as-is 🤩

Slide 38

Slide 38 text

#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

Slide 39

Slide 39 text

#androidww istvanjuhos.dev 🤩 Compose theme using Material DemoAppTheme { Column { Text( text = "", style = MaterialTheme.typography.titleLarge ) } }

Slide 40

Slide 40 text

#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

Slide 41

Slide 41 text

#androidww istvanjuhos.dev Compose theme - is Material enough? 🤔

Slide 42

Slide 42 text

#androidww istvanjuhos.dev Compose theme - is Material enough? 🤔

Slide 43

Slide 43 text

#androidww istvanjuhos.dev • Spacings? • Dimensions? • Custom semantic colors, sizes, typography? • A custom design system with Compose? 🤔 Compose theme - is Material enough?

Slide 44

Slide 44 text

#androidww istvanjuhos.dev Compose theme data class DemoSpacings ( val small: Dp = 8.dp, // ... )

Slide 45

Slide 45 text

#androidww istvanjuhos.dev private val LocalSpacings = compositionLocalOf { error("No spacings provided!") } data class DemoSpacings ( val small: Dp = 8.dp, // ... ) Compose theme

Slide 46

Slide 46 text

#androidww istvanjuhos.dev object DemoAppTheme { val spacings: DemoSpacings @Composable @ReadOnlyComposable get() = LocalSpacings.current } private val LocalSpacings = compositionLocalOf { error("No spacings provided!") } data class DemoSpacings ( val small: Dp = 8.dp, // ... ) Compose theme

Slide 47

Slide 47 text

#androidww istvanjuhos.dev DemoAppTheme { Column( modifier = Modifier .padding( DemoAppTheme.spacings.small ) ) { // ... } } Compose theme 😌

Slide 48

Slide 48 text

#androidww istvanjuhos.dev Compose theme developer.android.com/develop/ui/compose/designsystems/anatomy

Slide 49

Slide 49 text

#androidww istvanjuhos.dev Compose theme developer.android.com/develop/ui/compose/designsystems/anatomy

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

#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

Slide 53

Slide 53 text

istvanjuhos.dev #androidww Wrapping up 📦

Slide 54

Slide 54 text

#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/

Slide 55

Slide 55 text

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.