Kotlin Academy · Pelajaran

Kotlin/WASM: Mengompilasi ke WebAssembly untuk Peramban

Jadikan Kotlin/WASM sebagai target, integrasikan dengan JavaScript, dan jalankan dalam lingkungan peramban.

Kotlin/WASM: Mengompilasi ke WebAssembly untuk Peramban adalah pelajaran Kotlin Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Kotlin Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Kotlin Academy mencakup 4 pelajaran total.

Apa Itu Kotlin/WASM?

Kotlin/WASM adalah target kompilasi Kotlin yang menghasilkan modul WebAssembly (.wasm) untuk dieksekusi di peramban dan lingkungan eksekusi WASM sisi server. Kotlin/WASM terpisah dari Kotlin/JS serta menyediakan kinerja yang lebih baik dan ukuran biner yang lebih kecil untuk kode yang membutuhkan komputasi berat.

Status Terkini (Kotlin 2.0)

Pada Kotlin 2.0, Kotlin/WASM menargetkan proposal WasmGC — standar W3C yang menghadirkan objek dengan pengumpulan sampah secara bawaan ke WebAssembly. WasmGC didukung di Chrome 119+, Firefox 120+, dan Safari 18+. Kotlin/WASM berstatus Stabil sejak Kotlin 2.1.

Menyiapkan Target Kotlin/WASM

Dalam build.gradle.kts KMP Anda, deklarasikan target WASM dan biner yang dapat dieksekusi:

kotlin {
    wasmJs {
        browser()
        binaries.executable()
    }
    sourceSets {
        val wasmJsMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlinx:kotlinx-browser:0.3")
            }
        }
    }
}

Menulis Kode Kotlin untuk WASM

Kode Kotlin/WASM terlihat seperti Kotlin biasa. Anda dapat berbagi logika dengan target KMP lain melalui commonMain. Akses DOM peramban dilakukan melalui pustaka kotlinx-browser:

import kotlinx.browser.document
import kotlinx.browser.window

fun main() {
    val p = document.createElement("p")
    p.textContent = "Hello from Kotlin/WASM!"
    document.body!!.appendChild(p)
}

Membangun dan Menjalankan

Jalankan ./gradlew wasmJsBrowserDevelopmentRun untuk memulai server pengembangan dengan pemuatan ulang langsung. Untuk build produksi: ./gradlew wasmJsBrowserDistribution. Hasilnya berada di build/dist/wasmJs/productionExecutable/.

Interoperabilitas JavaScript di Kotlin/WASM

Gunakan @JsExport untuk mengekspos fungsi Kotlin ke JavaScript. Gunakan deklarasi external untuk memanggil API JavaScript dari Kotlin:

external fun console_log(msg: String): Unit

@JsExport
fun add(a: Int, b: Int): Int = a + b

Kotlin/WASM vs Kotlin/JS

Kotlin/JS: ditranspilasikan menjadi JavaScript — memiliki akses ke seluruh ekosistem JS, peralatan yang matang, dan berjalan di mana pun JS berjalan. Kotlin/WASM: dikompilasi menjadi WebAssembly — eksekusi lebih cepat untuk kode yang berat dalam komputasi, model memori yang aman terhadap tipe, dan memerlukan dukungan peramban untuk WasmGC. Gunakan Kotlin/JS untuk aplikasi web umum; pertimbangkan Kotlin/WASM untuk modul yang membutuhkan kinerja tinggi.

Compose untuk Web (WASM)

Compose Multiplatform milik JetBrains menargetkan Kotlin/WASM untuk membangun antarmuka web dengan API Compose yang sama seperti yang digunakan di Android dan Desktop. Seluruh antarmuka pengguna dirender ke elemen Canvas melalui WASM:

// build.gradle.kts with Compose Multiplatform
plugins { id("org.jetbrains.compose") }

// In wasmJsMain
@OptIn(ExperimentalComposeUiApi::class)
fun main() = CanvasBasedWindow("MyApp") {
    Text("Hello, Compose WASM!")
}

Ukuran Biner dan Optimasi

Biner WASM dioptimalkan dengan wasm-opt selama build produksi. Penghapusan kode yang tidak digunakan menghilangkan kode pustaka standar Kotlin yang tidak terpakai. Program halo-dunia Kotlin/WASM biasanya berukuran 200–400 KB setelah dikompresi dengan gzip. Aktifkan binaryenArgs = listOf("-O3") untuk optimasi maksimum.

Berbagi Kode dengan JVM dan Native

Karena Kotlin/WASM adalah target KMP, logika domain, algoritma, dan model data dalam commonMain dibagikan secara otomatis. Kode khusus platform (manipulasi DOM, operasi masukan/keluaran berkas) berada di wasmJsMain menggunakan deklarasi actual.

Keterbatasan dan Peta Jalan

Keterbatasan saat ini: tidak ada akses langsung ke paket NPM (gunakan interoperabilitas JS), dukungan penelusuran kesalahan terbatas dibandingkan dengan Kotlin/JS, dan diperlukan dukungan peramban untuk WasmGC (tidak tersedia di peramban lama). Tim Kotlin terus meningkatkan peralatan, kinerja, dan cakupan pustaka standar untuk WASM.

Pemeriksaan Singkat

Proposal WebAssembly apa yang ditargetkan Kotlin/WASM (Kotlin 2.0+) sehingga objek dengan pengumpulan sampah dapat digunakan secara bawaan di WASM?

Ringkasan: Kotlin/WASM

Poin penting:

Kotlin/WASM dikompilasi menjadi WebAssembly melalui proposal WasmGC (Stabil di Kotlin 2.1)
Deklarasikan wasmJs { browser(); binaries.executable() } dalam konfigurasi Gradle KMP
Akses DOM melalui kotlinx-browser; interoperabilitas JS melalui external dan @JsExport
Bangun dengan wasmJsBrowserDistribution; gunakan server pengembangan dengan wasmJsBrowserDevelopmentRun
Bagikan logika domain dalam commonMain; kode khusus platform dalam wasmJsMain

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Kotlin/WASM: Mengompilasi ke WebAssembly untuk Peramban” gratis?

Ya — teks lengkap “Kotlin/WASM: Mengompilasi ke WebAssembly untuk Peramban” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Kotlin Academy, upgrade ke CoddyKit PRO. Kursus Kotlin Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Kotlin/WASM: Mengompilasi ke WebAssembly untuk Peramban”?

Jadikan Kotlin/WASM sebagai target, integrasikan dengan JavaScript, dan jalankan dalam lingkungan peramban. Kamu berlatih Kotlin Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Kotlin Academy?

Tidak diperlukan pengalaman sebelumnya. Kotlin Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Kotlin/WASM: Mengompilasi ke WebAssembly untuk Peramban” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Kotlin Academy ini?

Ya. Setiap pelajaran Kotlin Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Gambaran Umum Kotlin/Native: Target, Rantai Alat, dan Kompilasi
Manajemen Memori di Kotlin/Native: MM Baru
Interoperabilitas C dengan cinterop dan File .def
Kotlin/WASM: Mengompilasi ke WebAssembly untuk Peramban

← Kembali ke Kotlin Academy