Kotlin/JS — apa itu, kompiler ke JavaScript dan fitur

Apa itu Kotlin/JS?

Kotlin/JS — adalah salah satu dari tiga backend kompiler Kotlin (di samping JVM dan Native), yang ditujukan untuk menerjemahkan kode Kotlin ke JavaScript. Dikembangkan oleh JetBrains, Kotlin/JS memungkinkan penulisan aplikasi web dalam bahasa dengan pengetikan statis yang ketat, sambil mempertahankan akses ke ekosistem besar pustaka JavaScript melalui mekanisme deklarasi eksternal. Sejak rilis stabil pertama di Kotlin 1.3, kompiler telah berevolusi dari backend eksperimental menjadi alat siap produksi yang digunakan dalam proyek industri.

Tujuan utama Kotlin/JS — pengembangan frontend menggunakan Kotlin alih-alih JavaScript atau TypeScript. Pengembang mendapatkan semua kemampuan bahasa Kotlin: null safety, fungsi ekstensi, kelas data, coroutine, dan kelas sealed. Kode JavaScript yang dihasilkan dapat dijalankan di browser modern mana pun atau di lingkungan Node.js. Kotlin/JS sangat diminati dalam proyek Kotlin Multiplatform, di mana modul bersama (commonMain) tersedia untuk aplikasi seluler dan web.

Ekosistem Kotlin/JS mencakup kerangka kerja untuk membuat antarmuka pengguna. Compose Multiplatform untuk web menggunakan Kotlin/JS sebagai backend target, yang memungkinkan pembuatan komponen UI deklaratif yang berfungsi di browser. Solusi alternatif mencakup wrapper untuk React — Kotlin Wrappers, yang menyediakan API type-safe untuk React, React Router, dan Redux.

Bagaimana cara kerja kompiler Kotlin/JS

Kompilasi Kotlin/JS melewati beberapa tahap transformasi. Kode sumber Kotlin pertama-tama dikompilasi ke representasi perantara (IR), kemudian dioptimalkan dan kode JavaScript dihasilkan. Mulai dari Kotlin 1.8, backend lama (JsBackend berbasis AST) telah sepenuhnya digantikan oleh IR-backend, yang memberikan optimasi yang lebih baik, ukuran kode keluaran yang lebih kecil, dan kompatibilitas dengan TypeScript.

Sebelumnya, Kotlin/JS menggunakan JsBackend, yang bekerja langsung dengan pohon AST (Abstract Syntax Tree). Pendekatan ini memiliki keterbatasan: kompleksitas dukungan untuk optimasi platform, tidak adanya IR terpadu untuk semua backend, dan ketidakmampuan untuk menghasilkan deklarasi TypeScript. Transisi ke IR-backend memecahkan masalah ini, menyatukan kompilasi ketiga backend Kotlin dan membuka jalan untuk optimasi lintas-backend.

Mode kompilasi Kotlin/JS

Kotlin/JS mendukung dua mode kompilasi yang menentukan format dan optimasi kode keluaran. Mode production menggunakan Webpack untuk kompilasi, minifikasi, dan tree-shaking. Mode development mendukung Hot Module Replacement untuk iterasi pengembangan yang cepat. Pemilihan mode dikonfigurasi di build.gradle.kts melalui konfigurasi js.target.

kotlin {
    js {
        browser {
            webpackTask {
                outputFileName = "app.js"
            }
        }
        binaries.executable()
    }
}

Integrasi dengan NPM dan pustaka JavaScript

Integrasi Kotlin/JS dengan ekosistem NPM diimplementasikan melalui DSL khusus di build.gradle.kts. Pengembang mendeklarasikan dependensi npm dalam konfigurasi kotlin, menentukan nama paket dan versi. Kotlin/JS secara otomatis mengunduh paket melalui manajer paket npm atau yarn. Untuk menyediakan akses type-safe ke pustaka JavaScript, digunakan deklarasi external, yang mendeskripsikan tipe dan fungsi pustaka untuk kompiler Kotlin.

Deklarasi external — adalah deklarasi Kotlin yang ditandai dengan kata kunci external. Mereka memberi tahu kompiler bahwa implementasi fungsi atau kelas berada dalam kode JavaScript, bukan di Kotlin. JetBrains menyediakan set wrapper siap pakai untuk pustaka populer sebagai bagian dari Kotlin Wrappers, termasuk React, React Router, Redux, Emotion, dan MUI. Untuk pustaka yang tidak memiliki wrapper siap pakai, pengembang dapat menulis deklarasi external secara manual atau menggunakan generator pengikatan TypeScript Dukat.

kotlin {
    js {
        browser { }
        npm {
            dependency("react", "18.3.1")
            dependency("react-dom", "18.3.1")
            devDependency("webpack", "5.92.0")
        }
    }
}

// Deklarasi eksternal untuk pustaka JavaScript
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

Bekerja dengan kompatibilitas TypeScript

TypeScript — bagian integral dari web modern, dan Kotlin/JS memastikan kompatibilitas dengannya melalui pembuatan file .d.ts. Saat mengatur js.generateTsDeclarations = true, kompiler membuat deklarasi TypeScript untuk semua fungsi dan kelas publik Kotlin. Ini memungkinkan proyek TypeScript untuk mengimpor modul Kotlin dengan dukungan tipe penuh. Pembuatan deklarasi TypeScript hanya berfungsi dengan IR-backend dan merupakan salah satu alasan utama migrasi dari backend lama.

IR-backend Kotlin/JS dan keunggulan

IR-backend (Intermediate Representation) — adalah backend terpadu untuk ketiga platform Kotlin: JVM, JS, dan Native. Ini menggunakan representasi perantara bersama yang melewati beberapa tahap optimasi sebelum menghasilkan kode target. Untuk Kotlin/JS, IR-backend menjadi wajib mulai dari Kotlin 1.8.0, menggantikan backend lama berbasis AST yang telah ditandai sebagai deprecated.

Keunggulan IR-backend untuk Kotlin/JS mencakup optimasi kode yang lebih baik di tingkat IR, pengurangan ukuran bundle melalui eliminasi kode mati dan optimasi inline, serta dukungan untuk deklarasi TypeScript. IR-backend juga memastikan pemrosesan yang benar dari fungsi inline, generic reified, dan fungsi suspend saat diterjemahkan ke JavaScript, yang bermasalah di backend lama.

Contoh kode: konfigurasi dan pengembangan

Proyek Kotlin/JS yang lengkap dimulai dengan konfigurasi build.gradle.kts. Plugin kotlin multiplatform memungkinkan konfigurasi Kotlin/JS sebagai salah satu platform target. Mari kita lihat contoh konfigurasi untuk aplikasi web dengan React.

plugins {
    kotlin("multiplatform") version "2.0.21"
    id("org.jetbrains.kotlin-wrappers") version "1.0.0-pre.775"
}

kotlin {
    js {
        browser { }
        binaries.executable()
        generateTsDeclarations = true
    }
}

dependencies {
    implementation(enwraps(react, reactDom))
}

Setelah konfigurasi, komponen React dapat ditulis dalam Kotlin. Kotlin Wrappers menyediakan API type-safe untuk React, termasuk komponen fungsional, hook, dan sintaks mirip JSX melalui pembangun DSL. Contoh komponen Counter mendemonstrasikan kerja dengan useState dan penanganan peristiwa.

@OptIn(ExperimentalWrapperApi::class)
val Counter = FC<Props> {
    var count = useState(0)

    div {
        +"Counter value: ${count.component1()}"
        button {
            onClick = { count.component2()(count.component1() + 1) }
            +"Increment"
        }
    }
}

fun main() {
    createRoot(document.getElementById("root")!!).render(
        createElement(Counter)
    )
}

Pembangunan dan penyebaran

Pembangunan proyek Kotlin/JS dilakukan melalui tugas Gradle. jsDevelopmentRun menjalankan server pengembangan Webpack dengan HMR untuk pengembangan. jsProductionExecutableCompileSync menghasilkan bundle produksi dengan minifikasi dan tree-shaking. File HTML akhir yang menghubungkan JavaScript yang dikompilasi dihasilkan oleh plugin webpack dan terletak di build/dist.

// Jalankan server dev dengan HMR
./gradlew jsDevelopmentRun

// Bangun produksi dengan minifikasi
./gradlew jsProductionExecutableCompileSync

// Keluaran di build/dist/productionExecutable/

Kotlin/JS vs TypeScript: perbandingan

TypeScript — pesaing utama Kotlin/JS dalam bidang JavaScript yang diketik. Kedua bahasa dikompilasi ke JavaScript dan menambahkan pengetikan statis di atas JS dinamis. Namun Kotlin/JS menawarkan sejumlah keunggulan: null safety secara default, kelas sealed, coroutine, dan integrasi mulus dengan Kotlin Multiplatform. TypeScript, pada gilirannya, memiliki komunitas yang lebih luas, lebih banyak pustaka siap pakai dengan tipe, dan ekosistem yang lebih matang.

Produktivitas pengembangan dengan Kotlin/JS bisa lebih tinggi untuk tim yang sudah menggunakan Kotlin di bagian lain proyek, karena tidak memerlukan peralihan antar bahasa. TypeScript tetap menjadi pilihan populer untuk proyek web murni di mana Kotlin Multiplatform tidak digunakan. Namun dengan meningkatnya popularitas Compose Multiplatform untuk web, Kotlin/JS mendapatkan posisi sebagai alternatif untuk React dan Angular.

Pilihan antara Kotlin/JS dan TypeScript tergantung pada konteks proyek. Jika tim sudah menggunakan Kotlin Multiplatform atau berencana untuk memulai, Kotlin/JS adalah pilihan logis untuk bagian frontend. Untuk proyek web terisolasi, TypeScript tetap menjadi solusi yang lebih pragmatis karena ketersediaan tipe siap pakai untuk pustaka JavaScript dan lebih banyak pengembang di pasar.