Compose Multiplatform App: Best Practices in Jetpack Compose for Cross-Platform Development

Jetpack Compose has revolutionized Android UI development, offering a declarative and reactive approach to building user interfaces. However, its potential extends far beyond Android with Compose Multiplatform. This framework enables developers to write UI code once and deploy it across multiple platforms, including Android, iOS, Desktop (JVM), and Web. While this cross-platform capability is powerful, it requires adhering to best practices to ensure maintainability, performance, and a consistent user experience. This blog post dives deep into the best practices for developing Compose Multiplatform applications.

What is Compose Multiplatform?

Compose Multiplatform is a declarative UI framework developed by JetBrains based on Google’s Jetpack Compose. It allows developers to create cross-platform applications using Kotlin, with a single codebase shared across multiple target platforms. By leveraging the power of Kotlin Multiplatform (KMP), UI components and logic can be written once and rendered natively on each platform, providing a truly native feel.

Why Choose Compose Multiplatform?

• Code Reuse: Write UI code once and use it across multiple platforms, reducing development time and costs.
• Native Performance: Native rendering on each platform ensures optimal performance.
• Shared Business Logic: Easily share business logic and data models across platforms, improving maintainability.
• Modern UI: Benefit from Jetpack Compose’s declarative and reactive UI approach.

Best Practices for Compose Multiplatform Development

1. Project Structure and Organization

A well-structured project is crucial for managing complexity and maintaining scalability. Consider the following project structure:

root/
├── androidApp/          // Android-specific code
├── iosApp/              // iOS-specific code
├── desktopApp/         // Desktop-specific code
├── webApp/             // Web-specific code
├── shared/               // Common code
│   ├── src/
│   │   ├── commonMain/    // Code shared across all platforms
│   │   ├── androidMain/   // Android-specific common code
│   │   ├── iosMain/       // iOS-specific common code
│   │   ├── desktopMain/  // Desktop-specific common code
│   │   ├── jsMain/        // Web-specific common code
│   └── build.gradle.kts
├── build.gradle.kts    // Root build file
├── settings.gradle.kts // Settings file

Explanation:

• androidApp, iosApp, desktopApp, and webApp: These directories contain the platform-specific entry points and configurations.
• shared: This module houses the shared codebase, including UI components, business logic, and data models. It further divides into platform-specific sources within the src directory.

2. Dependency Management

Centralize dependency management using Kotlin’s version catalog to maintain consistent versions across the project.

Step 1: Define Versions in settings.gradle.kts

dependencyResolutionManagement {
    versionCatalogs {
        create("libs") {
            version("compose", "1.5.1")
            version("composeCompiler", "1.5.1")

            library("compose-ui", "androidx.compose.ui:ui:${versions.getValue("compose")}")
            library("compose-material", "androidx.compose.material:material:${versions.getValue("compose")}")
            library("compose-preview", "androidx.compose.ui:ui-tooling-preview:${versions.getValue("compose")}")
            library("compose-test", "androidx.compose.ui:ui-test-junit4:${versions.getValue("compose")}")
            library("desktop-compose", "org.jetbrains.compose.ui:ui-tooling-preview:${versions.getValue("compose")}")

            alias("compose-ui").to("compose-ui")
            alias("compose-material").to("compose-material")
            alias("compose-preview").to("compose-preview")
            alias("compose-test").to("compose-test")
            alias("desktop-compose").to("desktop-compose")
        }
    }
}

Step 2: Use Dependencies in build.gradle.kts (Shared Module)

dependencies {
    implementation(libs.compose.ui)
    implementation(libs.compose.material)
    implementation(libs.compose.preview)
    debugImplementation(libs.compose.test)
}

Benefits:

• Avoids version conflicts.
• Simplifies dependency updates.
• Improves code readability.

3. Abstraction and Platform-Specific Implementations

Abstract platform-specific functionalities using interfaces or abstract classes in the commonMain source set. Provide concrete implementations in the platform-specific source sets (e.g., androidMain, iosMain).

Example: Platform-Specific File System Access

Step 1: Define Abstraction in commonMain

interface FileSystem {
    fun readFile(path: String): String?
    fun writeFile(path: String, content: String): Boolean
}

expect val fileSystem: FileSystem

Step 2: Implement on Android (androidMain)

import java.io.File

actual val fileSystem: FileSystem = object : FileSystem {
    override fun readFile(path: String): String? {
        return try {
            File(path).readText()
        } catch (e: Exception) {
            null
        }
    }

    override fun writeFile(path: String, content: String): Boolean {
        return try {
            File(path).writeText(content)
            true
        } catch (e: Exception) {
            false
        }
    }
}

Step 3: Implement on iOS (iosMain)

import platform.Foundation.NSString
import platform.Foundation.NSFileManager
import platform.Foundation.writeToFile
import platform.Foundation.stringWithContentsOfFile
import platform.Foundation.NSUTF8StringEncoding
import platform.Foundation.NSError

actual val fileSystem: FileSystem = object : FileSystem {
    override fun readFile(path: String): String? {
        val fileManager = NSFileManager.defaultManager
        if (fileManager.fileExistsAtPath(path)) {
            val content = NSString.stringWithContentsOfFile(
                path,
                encoding = NSUTF8StringEncoding,
                error = null
            ) as? String
            return content
        }
        return null
    }

    override fun writeFile(path: String, content: String): Boolean {
        val nsString = content as NSString
        var error: NSError? = null
        val result = nsString.writeToFile(path, true, NSUTF8StringEncoding, error)
        return result
    }
}

Step 4: Implement on Desktop (desktopMain)

import java.io.File

actual val fileSystem: FileSystem = object : FileSystem {
    override fun readFile(path: String): String? {
        return try {
            File(path).readText()
        } catch (e: Exception) {
            null
        }
    }

    override fun writeFile(path: String, content: String): Boolean {
        return try {
            File(path).writeText(content)
            true
        } catch (e: Exception) {
            false
        }
    }
}

4. UI Layer Development

Keep the UI layer as platform-agnostic as possible. Build composable functions in commonMain, using common abstractions to interact with platform-specific features.

Example: Shared UI Component

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun SharedButton(text: String, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text(text)
    }
}

Then, use it in a common composable:

@Composable
fun CommonScreen() {
    SharedButton(text = "Click Me", onClick = {
        println("Button Clicked")
    })
}

Finally, call this composable from platform-specific entry points:

In Android:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.example.shared.CommonScreen // Replace with the actual path

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CommonScreen()
        }
    }
}

In iOS:

import androidx.compose.ui.window.ComposeUIViewController
import platform.UIKit.UIViewController
import com.example.shared.CommonScreen // Replace with the actual path

fun MainViewController(): UIViewController = ComposeUIViewController {
    CommonScreen()
}

5. State Management

Choose a state management solution that is well-suited for multiplatform projects. Common options include:

• MVI (Model-View-Intent): Architecturally clean, promoting unidirectional data flow and easy testability.
• Redux: A predictable state container with a single source of truth.
• Kotlin Coroutines Flow: Lightweight and reactive, providing a simple way to manage state.

Example: Using Kotlin Coroutines Flow

Define a shared state in commonMain:

import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow

object AppState {
    private val _counter = MutableStateFlow(0)
    val counter: StateFlow = _counter

    fun increment() {
        _counter.value += 1
    }
}

Access and update the state from UI:

import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue

@Composable
fun CounterView() {
    val counter by AppState.counter.collectAsState()

    Text("Counter: $counter")
    SharedButton("Increment") {
        AppState.increment()
    }
}

6. Navigation

Navigation in Compose Multiplatform can be complex due to platform differences. Consider using a shared navigation library or implementing a custom solution that abstracts platform-specific navigation APIs.

Example: Custom Navigation Abstraction

// Common interface in shared module
interface Navigator {
    fun navigate(screen: Screen)
    fun goBack()
}

sealed class Screen {
    object Home : Screen()
    object Details : Screen()
}

expect val navigator: Navigator

@Composable
fun NavigationProvider(content: @Composable () -> Unit) {
    content()
}

Create platform-specific implementations for navigation:

// Android implementation
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
import androidx.navigation.compose.rememberNavController

actual val navigator: Navigator = TODO() // Android specific Navigator

@Composable
actual fun NavigationProvider(content: @Composable () -> Unit) {
    val navController = rememberNavController()
    // Implementation details with Android navigation components
    content()
}

7. Testing

Write comprehensive tests to ensure the correctness and reliability of your application. Use Kotlin’s testing frameworks and libraries, such as JUnit and Kotest, to create unit, integration, and UI tests.

Example: Shared Unit Test

Shared unit test in commonTest:

import kotlin.test.Test
import kotlin.test.assertEquals

class CommonTest {
    @Test
    fun testExample() {
        assertEquals(2 + 2, 4, "Basic arithmetic test")
    }
}

8. Handling Platform-Specific UI Elements

Certain UI elements are inherently platform-specific. For example, Android’s WebView and iOS’s WKWebView. Create platform-specific composables to handle these cases while providing a unified API.

Example: Platform-Specific WebView

@Composable
expect fun PlatformWebView(url: String)

Implement it for Android:

// Android
import android.webkit.WebView
import androidx.compose.runtime.Composable
import androidx.compose.ui.viewinterop.AndroidView

actual @Composable fun PlatformWebView(url: String) {
    AndroidView(factory = { context ->
        WebView(context).apply {
            settings.javaScriptEnabled = true
            loadUrl(url)
        }
    })
}

And for iOS:

// iOS
import platform.UIKit.UIView
import platform.WebKit.WKWebView
import platform.WebKit.WKWebViewConfiguration
import androidx.compose.runtime.Composable
import androidx.compose.ui.interop.UIKitView

actual @Composable fun PlatformWebView(url: String) {
    UIKitView(
        factory = {
            val config = WKWebViewConfiguration()
            val webView = WKWebView(frame = CGRectMake(0.0, 0.0, 0.0, 0.0), configuration = config)
            webView.loadRequest(NSURLRequest(URL = NSURL(string = url)))
            webView
        },
        update = { view ->
            val request = NSURLRequest(URL = NSURL(string = url))
            view.loadRequest(request)
        }
    )
}

9. Continuous Integration and Deployment (CI/CD)

Set up a robust CI/CD pipeline to automate building, testing, and deploying your Compose Multiplatform application to various platforms. Tools like Jenkins, GitHub Actions, and GitLab CI can be configured to handle this process.

Example: GitHub Actions Workflow

name: CI/CD

on:
  push:
    branches:
      - main

jobs:
  build_and_test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - name: Set up JDK
        uses: actions/setup-java@v3
        with:
          java-version: '17'
          distribution: 'temurin'

      - name: Build and Test
        run: ./gradlew build test

Conclusion

Developing Compose Multiplatform applications requires careful planning and adherence to best practices to ensure a scalable, maintainable, and high-performing codebase. By focusing on project structure, dependency management, abstraction, state management, and platform-specific handling, developers can leverage the full potential of Compose Multiplatform. Robust testing and CI/CD pipelines are also essential for delivering a reliable cross-platform experience. Following these best practices will streamline your development process and create robust, unified applications that run smoothly on multiple platforms.