Compose Multiplatform Best Practices: A Comprehensive Guide

Compose Multiplatform allows you to build user interfaces for Android, iOS, desktop, and web, all from a single codebase using Kotlin and Jetpack Compose. Leveraging this capability effectively requires adhering to best practices that ensure maintainability, performance, and a consistent user experience across different platforms.

What is Compose Multiplatform?

Compose Multiplatform is a declarative UI framework based on Jetpack Compose. It enables developers to write UI code once and deploy it across multiple platforms, including Android, iOS, desktop (JVM), and web. This greatly reduces code duplication and simplifies cross-platform development.

Why Use Compose Multiplatform?

• Code Reusability: Write UI code once and use it across multiple platforms.
• Consistency: Ensure a consistent look and feel across different devices.
• Faster Development: Accelerate the development process by reducing the need for platform-specific code.
• Kotlin Power: Leverage the power and expressiveness of Kotlin for UI development.

Best Practices for Compose Multiplatform

1. Project Structure and Modularization

Organize your project into modules to separate platform-specific code from shared code. This promotes reusability and maintainability.

rootProject.name = "ComposeMultiplatformProject"

include(":shared")
include(":androidApp")
include(":iosApp")
include(":desktopApp")

• shared: Contains the common UI code and business logic.
• androidApp: Contains the Android-specific code.
• iosApp: Contains the iOS-specific code.
• desktopApp: Contains the desktop-specific code.

2. Dependency Management

Use Gradle’s dependency management to share common dependencies across platforms. Centralize dependency versions in gradle.properties or buildSrc to ensure consistency.

// gradle.properties
compose_version=1.5.0
kotlin_version=1.9.0

// shared/build.gradle.kts
dependencies {
    implementation(compose.runtime)
    implementation(compose.ui)
    implementation(compose.material)
    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:$kotlin_coroutines_version")
}

3. Platform-Specific Abstractions

Abstract platform-specific functionalities using interfaces and expect/actual declarations. This allows you to write platform-agnostic code that can be implemented differently on each platform.

Example: DateTime Formatter

First, define an interface in the shared module:

// shared/src/commonMain/kotlin/com/example/DateTimeFormatter.kt
interface DateTimeFormatter {
    fun formatDateTime(timestamp: Long): String
}

Then, provide platform-specific implementations:

// androidApp/src/androidMain/kotlin/com/example/AndroidDateTimeFormatter.kt
import java.text.SimpleDateFormat
import java.util.Date
import java.util.Locale

class AndroidDateTimeFormatter : DateTimeFormatter {
    override fun formatDateTime(timestamp: Long): String {
        val dateFormat = SimpleDateFormat("yyyy-MM-dd HH:mm:ss", Locale.getDefault())
        val date = Date(timestamp)
        return dateFormat.format(date)
    }
}

// iosApp/iosApp/iOSDateTimeFormatter.swift
import Foundation

class iOSDateTimeFormatter: DateTimeFormatter {
    func formatDateTime(timestamp: Int64) -> String {
        let date = Date(timeIntervalSince1970: TimeInterval(timestamp / 1000))
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss"
        return dateFormatter.string(from: date)
    }
}

4. Theme and Styling

Use a consistent theme across all platforms. Leverage Compose’s theming capabilities to define colors, typography, and shapes. You can use platform-specific tweaks where necessary, but strive for a unified look and feel.

// shared/src/commonMain/kotlin/com/example/Theme.kt
import androidx.compose.material.MaterialTheme
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

private val LightColorPalette = lightColors(
    primary = Color(0xFF6200EE),
    primaryVariant = Color(0xFF3700B3),
    secondary = Color(0xFF03DAC5)
)

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colors = LightColorPalette,
        content = content
    )
}

5. UI Layouts

Use Compose’s layout primitives (Column, Row, Box) to create adaptive layouts that work well on different screen sizes. Consider using adaptive design techniques and responsive layouts to provide an optimal user experience on various devices.

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun MyScreenContent() {
    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = "Title")
        Row {
            Text(text = "Subtitle 1")
            Text(text = "Subtitle 2")
        }
    }
}

6. State Management

Employ a robust state management solution to handle UI state in a predictable and efficient manner. Kotlin Multiplatform (KMP) libraries like Decompose and koin can be used for state management and dependency injection.

Example: Using Decompose for State Management

Decompose is a Kotlin Multiplatform library for managing hierarchical component state. Here’s a simple example:

// shared/build.gradle.kts
dependencies {
    implementation("com.arkivanov.decompose:decompose:2.0.0")
    implementation("com.arkivanov.decompose:extensions-compose:2.0.0")
}

// shared/src/commonMain/kotlin/com/example/RootComponent.kt
import com.arkivanov.decompose.ComponentContext
import com.arkivanov.decompose.router.stack.ChildStack
import com.arkivanov.decompose.router.stack.StackNavigation
import com.arkivanov.decompose.router.stack.childStack
import com.arkivanov.decompose.value.Value
import kotlinx.serialization.Serializable

interface RootComponent {
    val stack: Value<ChildStack<*, Child>>

    sealed class Child {
        class ScreenA(val component: ScreenAComponent) : Child()
        class ScreenB(val component: ScreenBComponent) : Child()
    }
}

class DefaultRootComponent(
    componentContext: ComponentContext
) : RootComponent {
    private val navigation = StackNavigation<Config>()

    private val stack = childStack(
        source = navigation,
        serializer = Config.serializer(),
        initialConfiguration = Config.ScreenA,
        childFactory = ::createChild
    )

    override val stack: Value<ChildStack<*, RootComponent.Child>> = stack

    private fun createChild(config: Config, componentContext: ComponentContext): RootComponent.Child =
        when (config) {
            is Config.ScreenA -> RootComponent.Child.ScreenA(ScreenAComponent(componentContext))
            is Config.ScreenB -> RootComponent.Child.ScreenB(ScreenBComponent(componentContext))
        }

    @Serializable
    sealed class Config {
        @Serializable
        data object ScreenA : Config()

        @Serializable
        data object ScreenB : Config()
    }
}

class ScreenAComponent(componentContext: ComponentContext) : ComponentContext by componentContext {
    // Screen A logic here
}

class ScreenBComponent(componentContext: ComponentContext) : ComponentContext by componentContext {
    // Screen B logic here
}

7. Testing

Write comprehensive tests for your shared code. Use Kotlin’s multiplatform testing capabilities to run tests on different platforms. This ensures that your code behaves correctly across all supported environments.

// shared/build.gradle.kts
sourceSets {
    val commonTest by getting {
        dependencies {
            implementation(kotlin("test"))
        }
    }
}

8. Optimize Performance

Pay attention to performance, especially when targeting mobile devices. Use Compose’s profiling tools to identify and address performance bottlenecks. Optimize composables to minimize recompositions and avoid unnecessary allocations.

• Use remember to cache expensive calculations.
• Use derivedStateOf to compute derived states efficiently.
• Use Immutable and Stable annotations to help Compose optimize recompositions.

import androidx.compose.runtime.*

@Composable
fun MyComposable(data: List<Int>) {
    val sum = remember(data) {
        data.sum() // Expensive calculation
    }

    Text("Sum: $sum")
}

9. Navigation

Implement a navigation solution that works seamlessly across platforms. Libraries like Decompose offer navigation capabilities for KMP projects.

import com.arkivanov.decompose.router.stack.*
import com.arkivanov.decompose.value.Value

interface RootComponent {
    val stack: Value<ChildStack<*, Child>>

    fun navigateToScreenA()
    fun navigateToScreenB()

    sealed class Child {
        class ScreenA(val component: ScreenAComponent) : Child()
        class ScreenB(val component: ScreenBComponent) : Child()
    }
}

class DefaultRootComponent(
    componentContext: ComponentContext
) : RootComponent {
    private val navigation = StackNavigation<Config>()

    private val stack = childStack(
        source = navigation,
        serializer = Config.serializer(),
        initialConfiguration = Config.ScreenA,
        childFactory = ::createChild
    )

    override val stack: Value<ChildStack<*, RootComponent.Child>> = stack

    override fun navigateToScreenA() {
        navigation.push(Config.ScreenA)
    }

    override fun navigateToScreenB() {
        navigation.push(Config.ScreenB)
    }

    private fun createChild(config: Config, componentContext: ComponentContext): RootComponent.Child =
        when (config) {
            is Config.ScreenA -> RootComponent.Child.ScreenA(ScreenAComponent(componentContext))
            is Config.ScreenB -> RootComponent.Child.ScreenB(ScreenBComponent(componentContext))
        }

    @Serializable
    sealed class Config {
        @Serializable
        data object ScreenA : Config()

        @Serializable
        data object ScreenB : Config()
    }
}

10. Accessibility

Ensure your UI is accessible to all users, including those with disabilities. Use Compose’s accessibility APIs to provide meaningful descriptions and labels for UI elements.

import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics

@Composable
fun MyAccessibleButton(onClick: () -> Unit) {
    Button(
        onClick = onClick,
        modifier = Modifier.semantics {
            contentDescription = "Click to perform action"
        }
    ) {
        Text("Click Me")
    }
}

Conclusion

Adhering to these best practices when developing with Compose Multiplatform will help you create robust, maintainable, and performant applications that run seamlessly across multiple platforms. Proper project structure, platform-specific abstractions, consistent theming, state management, testing, and performance optimization are crucial for success. By following these guidelines, you can maximize code reuse and provide a consistent and enjoyable user experience on Android, iOS, desktop, and web.