Belajar Jetpack Compose - Desktop, Web, & Multiplatform

#Pendahuluan

Konsep yang kalian pelajari — composable, state, recomposition, modifier — tidak terbatas di Android. Compose Multiplatform membawa paradigma yang sama ke desktop (JVM), web (Wasm dan JS), dan iOS, dengan berbagi kode UI antar platform.

Ini bukan WebView dan bukan render mandiri seperti Flutter: Compose Multiplatform menggunakan canvas bersama dengan UI toolkit native di setiap target. Satu composable bisa dipakai di Android dan desktop tanpa perubahan.

Episode 17 ini meliputi dasar Compose Multiplatform, target desktop dan web, berbagi komponen, serta batasan dan use case praktisnya.

#Dasar Compose Multiplatform

#Struktur Modul

Project Compose Multiplatform memakai Gradle Kotlin Multiplatform. Kode bersama hidup di commonMain, dan kode spesifik platform di source set masing-masing:

Target Compose Multiplatform

kotlin {
    androidTarget()
    jvm("desktop")
    wasmJs()
 
    sourceSets {
        commonMain.dependencies {
            implementation(compose.runtime)
            implementation(compose.foundation)
            implementation(compose.material3)
            implementation(compose.ui)
        }
        val desktopMain by getting {
            dependencies {
                implementation(compose.desktop.currentOs)
            }
        }
    }
}

commonMain memuat dependency Compose yang dibagi, dan desktopMain menambah compose.desktop untuk target JVM. Android, desktop, dan web memakai UI yang sama dari commonMain.

#Source Set Spesifik Platform

Kode yang bergantung platform dinyatakan dengan expect dan actual:

expect dan actual

expect fun getPlatformName(): String
 
// di desktopMain
actual fun getPlatformName(): String = "Desktop"
 
// di androidMain
actual fun getPlatformName(): String = "Android"

expect mendeklarasikan API bersama, dan actual menyediakan implementasi per platform. Pola ini dipakai untuk hal-hal seperti clipboard, storage, dan notifikasi.

#Deploy ke Desktop dan Web

#Menjalankan di Desktop

Target desktop berjalan sebagai aplikasi JVM mandiri:

./gradlew :composeApp:run

./gradlew :composeApp:run meluncurkan aplikasi desktop dalam mode pengembangan. Untuk distribusi, packageDistributionForCurrentOS menghasilkan installer per OS.

#Web dengan Wasm

Untuk web, Compose dikompilasi ke WebAssembly:

./gradlew :composeApp:wasmJsBrowserRun

./gradlew :composeApp:wasmJsBrowserRun menjalankan aplikasi di browser. Output-nya berupa statis sehingga bisa di-deploy ke hosting mana pun — pola yang cocok untuk dashboard dan tool internal.

#Berbagi Komponen UI

#Satu Composable, Banyak Platform

Fondasi UI yang tidak spesifik platform bisa langsung dibagi:

UI bersama

@Composable
fun KartuPesan(pesan: String) {
    Card(Modifier.fillMaxWidth().padding(8.dp)) {
        Text(pesan, Modifier.padding(12.dp))
    }
}

KartuPesan memakai hanya API umum Compose, sehingga kompilasi untuk Android, desktop, dan web sekaligus. Design system kalian dari episode 6 bisa dipakai lintas target dengan hampir tanpa perubahan.

#Batas Platform

Bagian yang menyentuh API platform — kamera, sensor, framework view Android — tetap harus expect/actual. Untuk UI, Compose Multiplatform menyediakan versi lintas platform dari banyak komponen, tapi beberapa fitur Android khusus tetap membutuhkan batas itu.

#Batasan dan Use Case Praktis

#Kapan Cocok Dipakai

Compose Multiplatform paling cocok untuk: aplikasi dengan logika bisnis besar yang dibagi lintas target, tool internal seperti dashboard dan admin panel, serta tim yang sudah menguasai Kotlin dan Compose. Kode UI yang dibagi memangkas biaya pemeliharaan secara nyata.

#Kapan Belum Cocok

Untuk iOS dengan target consumer yang menginginkan pengalaman native penuh, kematangan platform iOS masih terus berkembang. Untuk web yang sangat bergantung SEO dan accessibility penuh, framework web tradisional tetap lebih pas. Evaluasi batas ini sebelum berkomitmen pada satu target.

#Penutup

Episode 17 menjelajah luar Android: struktur project Compose Multiplatform dengan commonMain dan expect-actual, menjalankan aplikasi di desktop dengan run dan web dengan wasmJsBrowserRun, berbagi komponen UI antar target, serta batasan dan use case praktis kapan Compose Multiplatform paling diuntungkan.

Inti yang harus dibawa pulang:

• Compose Multiplatform membawa Compose ke desktop, web, dan iOS.
• Kode bersama di commonMain, spesifik platform lewat expect dan actual.
• ./gradlew :composeApp:run menjalankan desktop, wasmJsBrowserRun untuk web.
• Composable dengan API umum bisa dipakai lintas target.
• Bagian yang menyentuh platform wajib lewat expect dan actual.
• Evaluasi kematangan tiap target sebelum berkomitmen.

Di episode 18 selanjutnya kita akan membahas custom layouts dan modifiers — membuat composable layout kustom, modifier lanjutan dan pointer input, primitif UI yang reusable, serta membangun komponen kompleks dari dasar.