Kotlin Academy · Ders

Kotlin/WASM: Tarayıcı için WebAssembly'ye Derleme

Kotlin/WASM'ı hedefleyin, JavaScript ile bütünleştirin ve bir tarayıcı ortamında çalıştırın.

Kotlin/WASM: Tarayıcı için WebAssembly'ye Derleme, CoddyKit'te ücretsiz bir Kotlin Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Kotlin Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Kotlin Academy kursu toplamda 4 dersten oluşur.

Kotlin/WASM nedir?

Kotlin/WASM, tarayıcılarda ve sunucu tarafındaki WASM çalışma zamanlarında yürütülmek üzere WebAssembly (.wasm) modülleri üreten bir Kotlin derleme hedefidir. Kotlin/JS'den ayrıdır ve yoğun hesaplama yapan kodlar için daha iyi performans ve daha küçük ikili dosya boyutu sağlar.

Güncel durum (Kotlin 2.0)

Kotlin 2.0 itibarıyla Kotlin/WASM, çöp toplanan nesneleri yerel olarak WebAssembly'ye getiren bir W3C standardı olan WasmGC önerisini hedefler. WasmGC; Chrome 119+, Firefox 120+ ve Safari 18+ sürümlerinde desteklenir. Kotlin/WASM, Kotlin 2.1 itibarıyla Kararlı durumdadır.

Kotlin/WASM hedefini kurma

KMP build.gradle.kts dosyanızda WASM hedefini ve çalıştırılabilir bir ikili dosyayı tanımlayın:

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

WASM için Kotlin kodu yazma

Kotlin/WASM kodu, normal Kotlin koduna benzer. commonMain aracılığıyla mantığı diğer KMP hedefleriyle paylaşabilirsiniz. Tarayıcı DOM erişimi kotlinx-browser kütüphanesi üzerinden sağlanır:

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)
}

Derleme ve çalıştırma

Canlı yeniden yükleme özelliğine sahip bir geliştirme sunucusu başlatmak için ./gradlew wasmJsBrowserDevelopmentRun komutunu çalıştırın. Üretim derlemesi için: ./gradlew wasmJsBrowserDistribution. Çıktı build/dist/wasmJs/productionExecutable/ içindedir.

Kotlin/WASM'de JavaScript birlikte çalışabilirliği

Kotlin işlevlerini JavaScript'e açmak için @JsExport kullanın. Kotlin'den JavaScript API'lerini çağırmak için external bildirimlerini kullanın:

external fun console_log(msg: String): Unit

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

Kotlin/WASM ve Kotlin/JS karşılaştırması

Kotlin/JS: JavaScript'e dönüştürür — JavaScript ekosisteminin tamamına erişim sağlar, araçları olgundur ve JavaScript'in çalıştığı her yerde çalışır. Kotlin/WASM: WebAssembly'ye derlenir — hesaplama ağırlıklı kodlarda daha hızlı çalışır, tür güvenli bir bellek modeline sahiptir ve WasmGC tarayıcı desteği gerektirir. Genel web uygulamaları için Kotlin/JS kullanın; performans açısından kritik modüller için Kotlin/WASM'ı değerlendirin.

Web için Compose (WASM)

JetBrains'in Compose Multiplatform çözümü, Android ve Masaüstü'nde kullanılan aynı Compose API'leriyle web kullanıcı arayüzleri oluşturmak için Kotlin/WASM'ı hedefler. Kullanıcı arayüzünün tamamı WASM aracılığıyla bir Canvas öğesine işlenir:

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

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

İkili dosya boyutu ve optimizasyon

WASM ikili dosyaları, üretim derlemeleri sırasında wasm-opt ile optimize edilir. Kullanılmayan Kotlin standart kütüphanesi kodları ağaç budama işlemiyle kaldırılır. Tipik bir Kotlin/WASM hello-world örneği gzip ile sıkıştırıldığında 200–400 KB boyutundadır. En yüksek düzeyde optimizasyon için binaryenArgs = listOf("-O3") seçeneğini etkinleştirin.

JVM ve Native ile kod paylaşma

Kotlin/WASM bir KMP hedefi olduğundan, commonMain içindeki alan mantığı, algoritmalar ve veri modelleri otomatik olarak paylaşılır. Platforma özgü kodlar (DOM işlemleri, dosya girdi/çıktısı), actual bildirimleri kullanılarak wasmJsMain içinde bulunur.

Sınırlamalar ve yol haritası

Güncel sınırlamalar: NPM paketlerine doğrudan erişim yoktur (JavaScript birlikte çalışabilirliğini kullanın), Kotlin/JS'ye kıyasla hata ayıklayıcı desteği sınırlıdır ve WasmGC tarayıcı desteği gereklidir (eski tarayıcılarda bulunmaz). Kotlin ekibi WASM için araçları, performansı ve standart kütüphane kapsamını etkin biçimde geliştirmektedir.

Kısa kontrol

Kotlin/WASM (Kotlin 2.0 ve sonrası), çöp toplanan nesneleri yerel olarak WASM'de etkinleştiren hangi WebAssembly önerisini hedefler?

Özet: Kotlin/WASM

Önemli çıkarımlar:

Kotlin/WASM, WasmGC önerisi aracılığıyla WebAssembly'ye derlenir (Kotlin 2.1'de Kararlı)
KMP Gradle yapılandırmasında wasmJs { browser(); binaries.executable() } tanımlayın
DOM erişimi kotlinx-browser aracılığıyla; JavaScript birlikte çalışabilirliği external ve @JsExport aracılığıyla sağlanır
wasmJsBrowserDistribution ile derleyin; geliştirme sunucusunu wasmJsBrowserDevelopmentRun ile başlatın
Alan mantığını commonMain içinde, platforma özgü ayrıntıları wasmJsMain içinde paylaşın

Sıkça Sorulan Sorular

“Kotlin/WASM: Tarayıcı için WebAssembly'ye Derleme” dersi ücretsiz mi?

Evet — “Kotlin/WASM: Tarayıcı için WebAssembly'ye Derleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Kotlin Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Kotlin Academy kursu toplamda 4 dersten oluşur.

“Kotlin/WASM: Tarayıcı için WebAssembly'ye Derleme” dersinde ne öğreneceğim?

Kotlin/WASM'ı hedefleyin, JavaScript ile bütünleştirin ve bir tarayıcı ortamında çalıştırın. Kotlin Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Kotlin Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Kotlin Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Kotlin/WASM: Tarayıcı için WebAssembly'ye Derleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Kotlin Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Kotlin Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Kotlin/Native'e Genel Bakış: Hedefler, Araç Zinciri ve Derleme
Kotlin/Native'de Bellek Yönetimi: Yeni MM
cinterop ve .def Dosyalarıyla C Birlikte Çalışabilirliği
Kotlin/WASM: Tarayıcı için WebAssembly'ye Derleme

← Kotlin Academy Sayfasına Dön