Adopting Jetpack Compose Safely (Droidcon Lisbon 2023)

Presented as a joint talk with @marcoGomier at Droidcon Lisbon, 2023.09.29.

If you want to start adopting Jetpack Compose in an existing, large codebase worked on by multiple teams, you can’t just add the dependency and start creating composables right away. In such projects, there are already established conventions and architectural decisions that such a revolutionary change might disrupt.

In this talk, we will share our journey of integrating Compose into the TIER app while offering practical tips for tackling common challenges that arise when working with large-scale codebases, like:

- Getting rid of Data binding,
- Migrating to a Unidirectional Data Flow architecture,
- Going Compose-first with a design system,
- Enabling Compose in a multimodule world,
- Getting Android engineers on board with the changes

Transcript

1. @marcoGomier @stewemetal Marco Gomiero Adopting Jetpack Compose Safely 👨💻 Senior Android Engineer @ TIER 
  Google Developer Expert for Kotlin 👨💻 Senior Android Engineer @ TIER 
  Co-organizer of Kotlin Budapest István Juhos
2. Compose 
 in the wild
3. @marcoGomier @stewemetal WHY?
4. @marcoGomier @stewemetal No more 
 RecyclerView Adapters 🥳
5. @marcoGomier @stewemetal Why Compose? 🤓 Less code 😎 More fun 😍 Kotlin
6. @marcoGomier @stewemetal Start using Compose
7. @marcoGomier @stewemetal 🚧 ⛔ Start using Compose
8. @marcoGomier @stewemetal Pre-Compose Architecture 🏗
9. @marcoGomier @stewemetal internal class ArticleDetailsViewModel( ... ) : BaseViewModel() { @get:Bindable var title: String by binding("", BR.title) @get:Bindable var price: String by binding("", BR.price) ... interface Input { val articleId: PublishRelay<String> }ㅤ interface Output { val articleNotFound: PublishRelay<Unit> val articleDetailsUIState: BehaviorRelay<ArticleDetailsUIState> }ㅤ val input = object : Input { override val articleId = PublishRelay.create<String>() } val output = object : Output { override val articleNotFound = PublishRelay.create<Unit>() override val state = BehaviorRelay.create<ArticleDetailsUIState>() } override fun onViewResumed() { super.onViewResumed() input.articleId .flatMap { /* Get stuff from network */ } .observeOn(schedulerProvider.mainThread()) .subscribeOn(schedulerProvider.io()) .subscribe( { data -> // do things title = "Title" output.state.accept(aState) }, { error -> output.hideTopBanner.accept(Unit) }, ) .disposeOnPause() }ㅤ } Pre-Compose ViewModel
10. @marcoGomier @stewemetal internal class ArticleDetailsViewModel( ... ) : BaseViewModel() { @get:Bindable var title: String by binding("", BR.title) @get:Bindable var price: String by binding("", BR.price) ... interface Input { val articleId: PublishRelay<String> }ㅤ interface Output { val articleNotFound: PublishRelay<Unit> val articleDetailsUIState: BehaviorRelay<ArticleDetailsUIState> }ㅤ val input = object : Input { override val articleId = PublishRelay.create<String>() } val output = object : Output { override val articleNotFound = PublishRelay.create<Unit>() override val state = BehaviorRelay.create<ArticleDetailsUIState>() } override fun onViewResumed() { super.onViewResumed() input.articleId .flatMap { /* Get stuff from network */ } .observeOn(schedulerProvider.mainThread()) .subscribeOn(schedulerProvider.io()) .subscribe( { data -> // do things title = "Title" output.state.accept(aState) }, { error -> output.hideTopBanner.accept(Unit) }, ) .disposeOnPause() }ㅤ }
11. @marcoGomier @stewemetal internal class ArticleDetailsViewModel( ... ) : BaseViewModel() { @get:Bindable var title: String by binding("", BR.title) @get:Bindable var price: String by binding("", BR.price) ... interface Input { val articleId: PublishRelay<String> }ㅤ interface Output { val articleNotFound: PublishRelay<Unit> val articleDetailsUIState: BehaviorRelay<ArticleDetailsUIState> }ㅤ val input = object : Input { override val articleId = PublishRelay.create<String>() } val output = object : Output { override val articleNotFound = PublishRelay.create<Unit>() override val state = BehaviorRelay.create<ArticleDetailsUIState>() } override fun onViewResumed() { super.onViewResumed() input.articleId .flatMap { /* Get stuff from network */ } .observeOn(schedulerProvider.mainThread()) .subscribeOn(schedulerProvider.io()) .subscribe( { data -> // do things title = "Title" output.state.accept(aState) }, { error -> output.hideTopBanner.accept(Unit) }, ) .disposeOnPause() }ㅤ } Data Binding 💀 • UI State in bindable properties • Custom binding adapters • Business Logic in the XML • Hard to test • Random tooling issues • KAPT @marcoGomier @stewemetal
12. @marcoGomier @stewemetal @marcoGomier @stewemetal developer.android.com/build/migrate-to-ksp
13. @marcoGomier @stewemetal @marcoGomier @stewemetal developer.android.com/build/migrate-to-ksp issuetracker.google.com/issues/173030256
14. @marcoGomier @stewemetal internal class ArticleDetailsViewModel( ... ) : BaseViewModel() { @get:Bindable var title: String by binding("", BR.title) @get:Bindable var price: String by binding("", BR.price) ... interface Input { val articleId: PublishRelay<String> }ㅤ interface Output { val articleNotFound: PublishRelay<Unit> val articleDetailsUIState: BehaviorRelay<ArticleDetailsUIState> }ㅤ val input = object : Input { override val articleId = PublishRelay.create<String>() } val output = object : Output { override val articleNotFound = PublishRelay.create<Unit>() override val state = BehaviorRelay.create<ArticleDetailsUIState>() } override fun onViewResumed() { super.onViewResumed() input.articleId .flatMap { /* Get stuff from network */ } .subscribe( { data -> // do things title = "Title" output.state.accept(aState)
15. @marcoGomier @stewemetal internal class ArticleDetailsViewModel( ... ) : BaseViewModel() { @get:Bindable var title: String by binding("", BR.title) @get:Bindable var price: String by binding("", BR.price) ... interface Input { val articleId: PublishRelay<String> }ㅤ interface Output { val articleNotFound: PublishRelay<Unit> val articleDetailsUIState: BehaviorRelay<ArticleDetailsUIState> }ㅤ val input = object : Input { override val articleId = PublishRelay.create<String>() } val output = object : Output { override val articleNotFound = PublishRelay.create<Unit>() override val state = BehaviorRelay.create<ArticleDetailsUIState>() } override fun onViewResumed() { super.onViewResumed() input.articleId .flatMap { /* Get stuff from network */ } .subscribe( { data -> // do things title = "Title" output.state.accept(aState) }, { error -> output.hideTopBanner.accept(Unit) }, ) .disposeOnPause() }ㅤ } Legacy ViewModel Multiple Rx Relays • Data Input • Events, Navigation and (some) state @marcoGomier @stewemetal
16. @marcoGomier @stewemetal @get:Bindable var title: String by binding("", BR.title) @get:Bindable var price: String by binding("", BR.price) ... interface Input { val articleId: PublishRelay<String> }ㅤ interface Output { val articleNotFound: PublishRelay<Unit> val articleDetailsUIState: BehaviorRelay<ArticleDetailsUIState> }ㅤ val input = object : Input { override val articleId = PublishRelay.create<String>() } val output = object : Output { override val articleNotFound = PublishRelay.create<Unit>() override val state = BehaviorRelay.create<ArticleDetailsUIState>() } override fun onViewResumed() { super.onViewResumed() input.articleId .flatMap { /* Get stuff from network */ } .subscribe( { data -> // do things title = "Title" output.state.accept(aState) }, { error -> output.hideTopBanner.accept(Unit) }, ) .disposeOnPause() }ㅤ } • UI State split into multiple places • Rx specific boilerplate all over the place @marcoGomier @stewemetal
17. @marcoGomier @stewemetal Just switching to Compose is impossible 😞
18. @marcoGomier @stewemetal Untangling the Spaghetti 🍝
19. @marcoGomier @stewemetal Untangling the spaghetti • Start with a clean slate • Make adoption as easy as possible • Consider MAD Architecture suggestions
20. @marcoGomier @stewemetal Untangling the spaghetti goo.gle/mad • Start with a clean slate • Make adoption as easy as possible • Consider MAD Architecture suggestions
21. @marcoGomier @stewemetal Untangling the spaghetti - UI state, UI events internal class ArticleDetailsViewModel( ... ) : BaseViewModel() { @get:Bindable var title: String by binding("", BR.title) @get:Bindable var price: String by binding("", BR.price) val input = object : Input { override val articleId = PublishRelay.create<String>() } val output = object : Output { override val articleNotFound = PublishRelay.create<Unit>() override val state = BehaviorRelay.create<ArticleDetailsUIState>() } }
22. @marcoGomier @stewemetal internal class ArticleDetailsViewModel( ... ) : BaseViewModel() { @get:Bindable var title: String by binding("", BR.title) @get:Bindable var price: String by binding("", BR.price) val input = object : Input { override val articleId = PublishRelay.create<String>() } val output = object : Output { override val articleNotFound = PublishRelay.create<Unit>() override val state = BehaviorRelay.create<ArticleDetailsUIState>() } } Untangling the spaghetti - UI state, UI events
23. @marcoGomier @stewemetal internal class ArticleDetailsViewModel( ... ) : BaseViewModel() {​ @get:Bindable var title: String by binding("", BR.title) @get:Bindable var price: String by binding("", BR.price) val input = object : Input { override val articleId = PublishRelay.create<String>() } val output = object : Output { override val articleNotFound = PublishRelay.create<Unit>() override val state = BehaviorRelay.create<ArticleDetailsUIState>() } }​ Untangling the spaghetti - UI state, UI events
24. @marcoGomier @stewemetal Untangling the spaghetti - UI state, UI events internal class ArticleDetailsViewModel( ... ) : BaseViewModel() {​ ... }​
25. @marcoGomier @stewemetal Untangling the spaghetti - UI state, UI events internal class ArticleDetailsViewModel( ... ) : BaseViewModel() {​ ... }​ goo.gle/architecture-state-holders
26. @marcoGomier @stewemetal Untangling the spaghetti - UI state, UI events abstract class BaseTierViewModel <​ Stat e​ >( v a​ l initialState: State, ) : ViewModel() { ... }​
27. @marcoGomier @stewemetal Untangling the spaghetti - UI state, UI events abstract class BaseTierViewModel <​ Stat e​ >( v a​ l initialState: State, ) : ViewModel() { private val state = BehaviorSubject.createDefault(initialState) ... }​
28. @marcoGomier @stewemetal Untangling the spaghetti - UI state, UI events abstract class BaseTierViewModel <​ Stat e​ >( v a​ l initialState: State, ) : ViewModel() { private val state = BehaviorSubject.createDefault(initialState) fun state(): Observable<State> = state.hide() ... }​
29. @marcoGomier @stewemetal Untangling the spaghetti - UI state, UI events abstract class BaseTierViewModel <​ Stat e​ >( v a​ l initialState: State, ) : ViewModel() { private val state = BehaviorSubject.createDefault(initialState) fun state(): Observable<State> = state.hide() ... }​ data cla s​ s ArticleDetailsUIStat e​ ( v​ al isLoading: Boolean = true, v​ al title: String, v​ al price: String, v a​ l articleDetailsEvent: ArticleDetailsEvent? = null, )
30. @marcoGomier @stewemetal Untangling the spaghetti - UI state, UI events abstract class BaseTierViewModel <​ Stat e​ >( v a​ l initialState: State, ) : ViewModel() { private val state = BehaviorSubject.createDefault(initialState) fun state(): Observable<State> = state.hide() ... }​ data cla s​ s ArticleDetailsUIStat e​ ( v​ al isLoading: Boolean = true, v​ al title: String, v​ al price: String, v a​ l articleDetailsEvent: ArticleDetailsEvent? = null, )
31. @marcoGomier @stewemetal Untangling the spaghetti - UI state, UI events data cla s​ s ArticleDetailsUIStat e​ ( v​ al isLoading: Boolean = true, v​ al title: String, v​ al price: String, v a​ l articleDetailsEvent: ArticleDetailsEvent? = null, ) abstract class BaseTierViewModel <​ Stat e​ >( v a​ l initialState: State, ) : ViewModel() { private val state = BehaviorSubject.createDefault(initialState) fun state(): Observable<State> = state.hide() ... }​
32. @marcoGomier @stewemetal Untangling the spaghetti - View events abstract class BaseTierViewModel <​ Stat e​ >( val initialState: State, ) : ViewModel() { ... }
33. @marcoGomier @stewemetal Untangling the spaghetti - View events abstract class BaseTierViewModel <​ Stat e​ >( val initialState: State, ) : ViewModel() { ... } goo.gle/architecture-ui-events
34. @marcoGomier @stewemetal Untangling the spaghetti - View events abstract class BaseTierViewModel <​ Stat e​ >( val initialState: State, ) : ViewModel() { ... } goo.gle/architecture-ui-events
35. @marcoGomier @stewemetal Untangling the spaghetti - View events abstract class BaseTierViewModel<ViewEvent, Stat e​ >( val initialState: State, ) : ViewModel() { ... }​ goo.gle/architecture-ui-events
36. @marcoGomier @stewemetal Untangling the spaghetti - View events abstract class BaseTierViewModel<ViewEvent, Stat e​ >( val initialState: State, ) : ViewModel() { ... }​ goo.gle/architecture-ui-events ViewEvent = User + UI logic events
37. @marcoGomier @stewemetal Untangling the spaghetti - View events abstract class BaseTierViewModel <​ ViewEvent, Stat e​ >( val initialState: State, ) : ViewModel() { ... private val events = PublishSubject.create<ViewEvent>().toSerialized() ... }​
38. @marcoGomier @stewemetal Untangling the spaghetti - View events abstract class BaseTierViewModel <​ ViewEvent, Stat e​ >( val initialState: State, ) : ViewModel() { ... private val events = PublishSubject.create<ViewEvent>().toSerialized() protected abstract fun onViewEvent( event: ViewEvent, ) ... }​
39. @marcoGomier @stewemetal Untangling the spaghetti - View events abstract class BaseTierViewModel <​ ViewEvent, Stat e​ >( val initialState: State, ) : ViewModel() { ... private val events = PublishSubject.create<ViewEvent>().toSerialized() protected abstract fun onViewEvent( event: ViewEvent, ) fu n​ triggerViewEvent(event: ViewEvent) { events.onNext(event) } }​
40. @marcoGomier @stewemetal Untangling the spaghetti - View events val input = object : Input { override val articleId = PublishRelay.create<String>() }​​​​ <Button android:onClick="@{ () -> vm.onBuyClicked() }” /> 💀
41. @marcoGomier @stewemetal Untangling the spaghetti - View events val input = object : Input { override val articleId = PublishRelay.create<String>() }​​​​ <Button android:onClick="@{ () -> vm.onBuyClicked() }” /> sealed interface ArticleDetailsViewEvent { data class RenderArticle( val articleId: String ) : ArticleDetailsViewEvent object BuyClicked: ArticleDetailsViewEvent }
42. @marcoGomier @stewemetal Untangling the spaghetti - View events val input = object : Input { override val articleId = PublishRelay.create<String>() }​​​​ <Button android:onClick="@{ () -> vm.onBuyClicked() }” /> sealed interface ArticleDetailsViewEvent { data class RenderArticle( val articleId: String ) : ArticleDetailsViewEvent object BuyClicked: ArticleDetailsViewEvent }
43. @marcoGomier @stewemetal Untangling the spaghetti - View events val input = object : Input { override val articleId = PublishRelay.create<String>() }​​​​ <Button android:onClick="@{ () -> vm.onBuyClicked() }” /> sealed interface ArticleDetailsViewEvent { data class RenderArticle( val articleId: String ) : ArticleDetailsViewEvent object BuyClicked: ArticleDetailsViewEvent }
44. @marcoGomier @stewemetal Untangling the spaghetti - ViewModel testing @Test fun `ArticleDetailsViewModel Test`() {​ }​
45. @marcoGomier @stewemetal Untangling the spaghetti - ViewModel testing @Test fun `ArticleDetailsViewModel Test`() {​ val testObserver = viewModel.state().test() }​
46. @marcoGomier @stewemetal Untangling the spaghetti - ViewModel testing @Test fun `ArticleDetailsViewModel Test`() {​ val testObserver = viewModel.state().test() every { shopUseCase.getArticle(articleId) }​ returns Single.just(defaultArticle) }​
47. @marcoGomier @stewemetal Untangling the spaghetti - ViewModel testing @Test fun `ArticleDetailsViewModel Test`() {​ val testObserver = viewModel.state().test() every { shopUseCase.getArticle(articleId) }​ returns Single.just(defaultArticle) viewModel.triggerViewEvent(RenderArticle(articleId)) }​
48. @marcoGomier @stewemetal Untangling the spaghetti - ViewModel testing @Test fun `ArticleDetailsViewModel Test`() {​ val testObserver = viewModel.state().test() every { shopUseCase.getArticle(articleId) }​ returns Single.just(defaultArticle) viewModel.triggerViewEvent(RenderArticle(articleId)) testObserver.assertValueAt(2) { state -> // … }​ }​
49. @marcoGomier @stewemetal • Already established navigation • Activities and Fragments • Introducing new things one step at a time • Migration hell ❌ Untangling the spaghetti - Compose UI 🫠
50. @marcoGomier @stewemetal • Already established navigation • Activities and Fragments • Introducing new things one step at a time • Migration hell ❌ Untangling the spaghetti - Compose UI 🫠
51. @marcoGomier @stewemetal Untangling the spaghetti - Compose UI abstract class BaseComposeActivity<ViewEvent, State> : AppCompatActivity() { }
52. @marcoGomier @stewemetal Untangling the spaghetti - Compose UI abstract class BaseComposeActivity<ViewEvent, State> : AppCompatActivity() { abstra c​ t v a​ l viewModel: TierViewModel<ViewEvent, State> }
53. @marcoGomier @stewemetal Untangling the spaghetti - Compose UI abstract class BaseComposeActivity<ViewEvent, State> : AppCompatActivity() { abstra c​ t v a​ l viewModel: TierViewModel<ViewEvent, State> abstract val content: @Composable (State) -> Unit }
54. @marcoGomier @stewemetal Untangling the spaghetti - Compose UI abstract class BaseComposeActivity<ViewEvent, State> : AppCompatActivity() { abstra c​ t v a​ l viewModel: TierViewModel<ViewEvent, State> abstract val content: @Composable (State) -> Unit override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) } }
55. @marcoGomier @stewemetal Untangling the spaghetti - Compose UI abstract class BaseComposeActivity<ViewEvent, State> : AppCompatActivity() { abstra c​ t v a​ l viewModel: TierViewModel<ViewEvent, State> abstract val content: @Composable (State) -> Unit override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { } } }
56. @marcoGomier @stewemetal Untangling the spaghetti - Compose UI abstract class BaseComposeActivity<ViewEvent, State> : AppCompatActivity() { abstra c​ t v a​ l viewModel: TierViewModel<ViewEvent, State> abstract val content: @Composable (State) -> Unit override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { val state by viewModel.state() .subscribeAsState(initial = viewModel.initialState) } } }
57. @marcoGomier @stewemetal Untangling the spaghetti - Compose UI abstract class BaseComposeActivity<ViewEvent, State> : AppCompatActivity() { abstra c​ t v a​ l viewModel: TierViewModel<ViewEvent, State> abstract val content: @Composable (State) -> Unit override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { val state by viewModel.state() .subscribeAsState(initial = viewModel.initialState) content(state) } } }
58. @marcoGomier @stewemetal Untangling the spaghetti - Compose UI internal class ArticleDetailsActivity : BaseComposeActivity<ArticleDetailsViewEvent, ArticleDetailsState>() { ... }
59. @marcoGomier @stewemetal Untangling the spaghetti - Compose UI internal class ArticleDetailsActivity : BaseComposeActivity<ArticleDetailsViewEvent, ArticleDetailsState>() { ... override val content = @Composable { state: ArticleDetailsState -> ArticleDetailsScreen( state = state, onBuyButtonClick = { viewModel.triggerViewEvent(BuyClicked) }, ) } }
60. @marcoGomier @stewemetal Untangling the spaghetti - Compose UI internal class ArticleDetailsActivity : BaseComposeActivity<ArticleDetailsViewEvent, ArticleDetailsState>() { ... override val content = @Composable { state: ArticleDetailsState -> ArticleDetailsScreen( state = state, onBuyButtonClick = { viewModel.triggerViewEvent(BuyClicked) }, ) } override fun onCreate(savedInstanceState: Bundle?) { ... viewModel.triggerViewEvent(RenderArticle(articleId)) } }
61. @marcoGomier @stewemetal Gradle Configuration 🐘🧙
62. @marcoGomier @stewemetal Gradle Configuration • Enable Compose only in some modules • Enable and add Compose libraries with one line
63. @marcoGomier @stewemetal Module Configuration → build.gradle plugins { id 'com.tier.app.android.library' id 'com.tier.app.android.library.compose' }
64. @marcoGomier @stewemetal plugins { id 'com.tier.app.android.library' id 'com.tier.app.android.library.compose' } Module Configuration → build.gradle
65. @marcoGomier @stewemetal class AndroidLibraryComposeConventionPlugin : Plugin<Project> { override fun apply(target: Project) { with(target) { pluginManager.apply("com.android.library") val extension = extensions.getByType<LibraryExtension>() extension.apply { composeOptions.kotlinCompilerExtensionVersion = project.COMPOSE_COMPILER buildFeatures.compose = true dependencies { add("implementation", platform(COMPOSE_BOM)) add("implementation", project.COMPOSE_BUNDLE) add("androidTestImplementation", platform(COMPOSE_BOM)) add("androidTestImplementation", project.COMPOSE_TESTING_BUNDLE) add("debugImplementation", project.COMPOSE_TESTING_MANIFEST) } } } } } Module Configuration → Convention Plugin
66. @marcoGomier @stewemetal Gradle Version Catalog [versions] androidx-compose = "1.3.0" androidx-compose-compiler = "1.3.2" androidx-compose-bom = "2023.05.01" [libraries] androidx-compose-foundation = { module = "androidx.compose.foundation:foundation", version.ref = "androidx-compose" } androidx-compose-material = { module = "androidx.compose.material:material", version.ref = "androidx-compose" } androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "androidx-compose-bom" } [bundles] compose = ["androidx-compose-foundation", "androidx-compose-material", "androidx-compose-runtime-rxjava2", "androidx- compose-ui", "androidx-compose-ui-tooling", "androidx-customlayout-poolingcontainer"] compose-testing = ["androidx-compose-ui-test-junit4"] @marcoGomier @stewemetal gradle/libs.versions.toml • Gradle Version Catalog for managing dependencies • Bundles (and BOMs) are awesome to make life easier
67. @marcoGomier @stewemetal Design System
68. @marcoGomier @stewemetal Octopus Design System - B.C. • 100% Views with Data Binding and @BindingAdapters • Verbose component APIs, but good docs • Easy usage with View-based UI
69. @marcoGomier @stewemetal Octopus Design System - B.C. • 100% Views with Data Binding and @BindingAdapters • Verbose component APIs, but good docs • Easy usage with View-based UI OctopusButtonPrimary.kt R.layout.__internal_view_octopus_button R.styleable.OctopusButton R.drawable.__internal_octopus_button_background_primary @marcoGomier @stewemetal
70. @marcoGomier @stewemetal Octopus Design System - B.C. • 100% Views with Data Binding and @BindingAdapters • Verbose component APIs, but good docs • Easy usage with View-based UI • Not fun to maintain 😢 OctopusButtonPrimary.kt R.layout.__internal_view_octopus_button R.styleable.OctopusButton R.drawable.__internal_octopus_button_background_primary @marcoGomier @stewemetal
71. @marcoGomier @stewemetal Octopus Design System What about Compose? 🤔
72. @marcoGomier @stewemetal Octopus Design System • Possible approaches for us @marcoGomier @stewemetal
73. @marcoGomier @stewemetal Octopus Design System • Possible approaches for us Views + AndroidView @Composable fun OctopusButtonPrimary( text: String, onClick: () -> Unit, ) { AndroidView( factory = { context -> OctopusButtonPrimary(context) .apply { setText(text) setOnClickListener { onClick() } ... } }, update = { view -> ... }, ) } @marcoGomier @stewemetal
74. @marcoGomier @stewemetal Octopus Design System • Possible approaches for us Views + AndroidView @Composable fun OctopusButtonPrimary( text: String, onClick: () -> Unit, ) { AndroidView( factory = { context -> OctopusButtonPrimary(context) .apply { setText(text) setOnClickListener { onClick() } ... } }, update = { view -> ... }, ) } @marcoGomier @stewemetal
75. @marcoGomier @stewemetal Octopus Design System • Possible approaches for us @marcoGomier @stewemetal Views + AndroidView @Composable fun OctopusButtonPrimary( text: String, onClick: () -> Unit, ) { AndroidView( factory = { context -> OctopusButtonPrimary(context) .apply { setText(text) setOnClickListener { onClick() } ... } }, update = { view -> ... }, ) }
76. @marcoGomier @stewemetal Octopus Design System • Possible approaches for us @Composable public fun OctopusButtonPrimary( text: String, modifier: Modifier = Modifier, buttonSize: ButtonSize = NORMAL, enabled: Boolean = true, loading: Boolean = false, onClick: () -> Unit, ) { Box() { OctopusRippleTheme() { Button() { Text() } if (loading) { OctopusButtonLoader() } } } } @marcoGomier @stewemetal Reimplement component s​ in ​ Compose
77. @marcoGomier @stewemetal Octopus Design System • Possible approaches for us @Composable public fun OctopusButtonPrimary( text: String, modifier: Modifier = Modifier, buttonSize: ButtonSize = NORMAL, enabled: Boolean = true, loading: Boolean = false, onClick: () -> Unit, ) { Box() { OctopusRippleTheme() { Button() { Text() } if (loading) { OctopusButtonLoader() } } } } @marcoGomier @stewemetal Reimplement component s​ in ​ Compose
78. @marcoGomier @stewemetal • The benefits of pure Compose • Easier to maintain • No attachments to the legacy Views • Easy for teams to adopt Octopus Design System 🤩
79. @marcoGomier @stewemetal • Downsides of our approach • A second implementation to maintain • Keeping them in sync is tedious • New components = twice the work Octopus Design System 🫠
80. @marcoGomier @stewemetal Octopus Design System - Going Compose-first • Use the Compose implementation of components to render the Views • Compose-View interop 💡
81. @marcoGomier @stewemetal Octopus Design System - Going Compose-first • View wrappers using the Compose implementations • Keep original custom attributes working • XML preview support • UI Testing support 🔧
82. @marcoGomier @stewemetal Octopus Design System - Going Compose-first
83. @marcoGomier @stewemetal Octopus Design System - Going Compose-first
84. @marcoGomier @stewemetal Octopus is Compose-first
85. @marcoGomier @stewemetal In-house Compose onboarding 🏠
86. @marcoGomier @stewemetal • Architecture • Octopus DS • Screens Experiments
87. @marcoGomier @stewemetal • Architecture • Octopus DS • Screens Experiments
88. @marcoGomier @stewemetal • Regular 1-hour knowledge sharing sessions The Android Guild
89. @marcoGomier @stewemetal • Regular 1-hour knowledge sharing sessions • A good place to start the onboarding The Android Guild
90. @marcoGomier @stewemetal • Regular 1-hour knowledge sharing sessions • A good place to start the onboarding The Android Guild marcogomiero.com/talks/2022/imperative-vs-declarative-appdevcon/
91. @marcoGomier @stewemetal The Android Guild 🐙 Composing an Octopus
92. @marcoGomier @stewemetal The Android Guild 🐙 Composing an Octopus Compose Shorts
93. @marcoGomier @stewemetal The Android Guild 🐙 Composing an Octopus Compose Shorts
94. @marcoGomier @stewemetal The Android Guild 🐙 Composing an Octopus Compose Shorts
95. @marcoGomier @stewemetal The Android Guild 🐙 Composing an Octopus Compose Shorts
96. @marcoGomier @stewemetal The Android Guild • Materials in the main repo • Sessions are recorded @marcoGomier @stewemetal
97. @marcoGomier @stewemetal Conclusions
98. @marcoGomier @stewemetal It dependsTM
99. @marcoGomier @stewemetal Conclusions • You can’t just start writing Composable functions • Take time to revisit your architecture • A design system will help • Jumping on the Compose Ship Scooter is not a race • Zero ➡ Hero takes time We’re still here 😄
100. Resources • https://developer.android.com/modern-android-development • https://developer.android.com/topic/architecture/ui-layer/stateholders • https://developer.android.com/topic/architecture/ui-layer/events • https://twitter.com/Lojanda/status/1584589111670673409 • https://github.com/android/nowinandroid/tree/main/build-logic • https://www.droidcon.com/2022/06/28/branching-out-to-jetpack-compose/ • https://github.com/androidx/androidx/blob/androidx-main/compose/docs/compose- api-guidelines.md • https://github.com/mrmans0n/compose-rules • https://developer.android.com/build/migrate-to-ksp • https://issuetracker.google.com/issues/173030256 • https://www.istvanjuhos.dev/talks/2023/20230530-composing-a-design-system/
101. @marcoGomier @stewemetal István Juhos 👨💻 Senior Android Engineer @ TIER 
  Co-organizer of Kotlin Budapest 
 Twitter: @stewemetal 
 Github: stewemetal 
 Website: istvanjuhos.dev 
 Mastodon: androiddev.social/@stewemetal 
 Thank you! 👨💻 Senior Android Engineer @ TIER 
  Google Developer Expert for Kotlin Twitter: @marcoGomier 
 Github: prof18 
 Website: marcogomiero.com 
 Mastodon: androiddev.social/@marcogom Marco Gomiero