Kotlin/JS — nedir, JavaScript derleyicisi ve özellikler

Kotlin/JS Nedir?

Kotlin/JS, Kotlin derleyicisinin üç backend'inden biridir (JVM ve Native ile birlikte) ve Kotlin kodunu JavaScript'e çevirmek için tasarlanmıştır. JetBrains tarafından geliştirilen Kotlin/JS, harici bildirimler aracılığıyla JavaScript kütüphane ekosistemine erişimi korurken, katı statik tiplemeli bir dilde web uygulamaları yazmayı sağlar. Kotlin 1.3'teki ilk kararlı sürümünden bu yana derleyici, deneysel bir backend'den endüstriyel projelerde kullanılan üretime hazır bir araca dönüşmüştür.

Kotlin/JS'nin temel amacı, JavaScript veya TypeScript yerine Kotlin kullanarak frontend geliştirmedir. Geliştiriciler Kotlin dilinin tüm özelliklerini alır: null safety, genişletme fonksiyonları, veri sınıfları, coroutine'ler ve sealed sınıflar. Oluşturulan JavaScript kodu herhangi bir modern tarayıcıda veya Node.js ortamında çalışabilir. Kotlin/JS, paylaşılan modülün (commonMain) hem mobil hem de web uygulamaları için kullanılabildiği Kotlin Multiplatform projelerinde özellikle değerlidir.

Kotlin/JS ekosistemi, kullanıcı arayüzleri oluşturmak için framework'ler içerir. Web için Compose Multiplatform, hedef backend olarak Kotlin/JS'yi kullanır ve tarayıcıda çalışan bildirimsel UI bileşenleri oluşturmayı sağlar. Alternatif çözümler arasında React için sarmalayıcılar — Kotlin Wrappers bulunur ve React, React Router ve Redux için type-safe API sağlar.

Kotlin/JS Derleyicisi Nasıl Çalışır

Derleme Kotlin/JS'de birkaç dönüşüm aşamasından geçer. Kaynak Kotlin kodu önce bir ara temsile (IR) derlenir, ardından optimize edilir ve son olarak JavaScript kodu oluşturulur. Kotlin 1.8'den itibaren eski backend (AST tabanlı JsBackend) tamamen IR backend ile değiştirilmiştir; bu, daha iyi optimizasyon, daha küçük çıktı kodu boyutu ve TypeScript uyumluluğu sağlar.

Daha önce Kotlin/JS, doğrudan AST (Soyut Sözdizimi Ağacı) ile çalışan JsBackend'i kullanıyordu. Bu yaklaşımın sınırlamaları vardı: platform optimizasyonlarını desteklemede zorluk, tüm backend'ler için birleşik bir IR eksikliği ve TypeScript bildirimleri oluşturamama. IR backend'e geçiş bu sorunları çözdü, üç Kotlin backend'inde derlemeyi birleştirdi ve backendler arası optimizasyonların yolunu açtı.

Kotlin/JS Derleme Modları

Kotlin/JS, çıktı kodunun biçimini ve optimizasyonunu belirleyen iki derleme modunu destekler. Üretim modu, paketleme, küçültme ve tree-shaking için Webpack kullanır. Geliştirme modu, hızlı geliştirme iterasyonu için Hot Module Replacement'ı destekler. Mod seçimi, js.target yapılandırması aracılığıyla build.gradle.kts'de yapılandırılır.

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

NPM ve JavaScript Kütüphaneleriyle Entegrasyon

Kotlin/JS'nin NPM ekosistemiyle entegrasyonu, build.gradle.kts'de özel bir DSL aracılığıyla uygulanır. Geliştirici, kotlin yapılandırmasında npm bağımlılıklarını bildirir, paket adını ve sürümünü belirtir. Kotlin/JS, npm veya yarn paket yöneticisi aracılığıyla paketleri otomatik olarak alır. JavaScript kütüphanelerine type-safe erişim sağlamak için, Kotlin derleyicisine kütüphane türlerini ve işlevlerini tanımlayan harici bildirimler kullanılır.

Harici bildirimler, external anahtar sözcüğüyle işaretlenmiş Kotlin bildirimleridir. Derleyiciye işlev veya sınıfın uygulamasının Kotlin'de değil, JavaScript kodunda olduğunu bildirirler. JetBrains, Kotlin Wrappers'ın bir parçası olarak popüler kütüphaneler için hazır sarmalayıcı setleri sağlar; bunlar arasında React, React Router, Redux, Emotion ve MUI bulunur. Hazır sarmalayıcısı olmayan kütüphaneler için geliştirici, harici bildirimleri manuel olarak yazabilir veya Dukat TypeScript bağlama oluşturucuyu kullanabilir.

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

// JavaScript kütüphanesi için harici bildirim
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

TypeScript Uyumluluğu ile Çalışma

TypeScript modern web'in ayrılmaz bir parçasıdır ve Kotlin/JS, .d.ts dosyası oluşturma yoluyla onunla uyumluluk sağlar. js.generateTsDeclarations = true ayarlandığında, derleyici tüm genel Kotlin işlevleri ve sınıfları için TypeScript bildirimleri oluşturur. Bu, TypeScript projelerinin tam tip desteğiyle Kotlin modüllerini normal npm paketleri olarak içe aktarmasına olanak tanır. TypeScript bildirimi oluşturma yalnızca IR backend ile çalışır ve eski backend'den geçişin temel nedenlerinden biridir.

Kotlin/JS IR Backend ve Avantajları

IR Backend (Intermediate Representation), üç Kotlin platformu (JVM, JS ve Native) için birleşik bir backend'dir. Hedef kodu oluşturmadan önce birkaç optimizasyon aşamasından geçen ortak bir ara temsil kullanır. Kotlin/JS için IR backend, Kotlin 1.8.0'den itibaren zorunlu hale gelmiş ve kullanımdan kaldırıldı olarak işaretlenen eski AST tabanlı backend'in yerini almıştır.

Kotlin/JS için IR backend'in avantajları arasında IR düzeyinde iyileştirilmiş kod optimizasyonu, ölü kod temizleme ve inline optimizasyonlar yoluyla paket boyutunda azalma ve TypeScript bildirimleri desteği bulunur. IR backend ayrıca JavaScript'e çeviri sırasında inline işlevlerin, reified jeneriklerin ve suspend işlevlerinin doğru şekilde işlenmesini sağlar; bu, eski backend'de sorunluydu.

Kod Örnekleri: Kurulum ve Geliştirme

Tam bir Kotlin/JS projesi, build.gradle.kts yapılandırmasıyla başlar. Kotlin multiplatform eklentisi, Kotlin/JS'yi hedef platformlardan biri olarak ayarlamayı sağlar. React ile bir web uygulaması için kurulum örneğine bakalım.

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

Yapılandırmadan sonra, Kotlin'de React bileşenleri yazılabilir. Kotlin Wrappers, işlevsel bileşenler, hooklar ve DSL oluşturucular aracılığıyla JSX benzeri sözdizimi dahil olmak üzere React için type-safe API sağlar. Counter bileşeni örneği, useState ve olay işleyicileriyle çalışmayı gösterir.

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

Derleme ve Dağıtım

Kotlin/JS projesinin derlemesi Gradle görevleri aracılığıyla yapılır. jsDevelopmentRun, geliştirme için HMR ile Webpack geliştirme sunucusunu başlatır. jsProductionExecutableCompileSync, küçültme ve tree-shaking ile üretim paketi oluşturur. Derlenmiş JavaScript'i içeren son HTML dosyası, webpack eklentisi tarafından oluşturulur ve build/dist içine yerleştirilir.

// HMR ile geliştirme sunucusunu başlat
./gradlew jsDevelopmentRun

// Küçültmeyle üretim derlemesi
./gradlew jsProductionExecutableCompileSync

// build/dist/productionExecutable/ içinde çıktı

Kotlin/JS vs TypeScript: Karşılaştırma

TypeScript, tür atanmış JavaScript alanında Kotlin/JS'nin ana rakibidir. Her iki dil de JavaScript'e derlenir ve dinamik JS üzerine statik tipleme ekler. Ancak Kotlin/JS birkaç avantaj sunar: varsayılan olarak null safety, sealed sınıflar, coroutine'ler ve Kotlin Multiplatform ile sorunsuz entegrasyon. TypeScript ise daha büyük bir topluluğa, türleri olan daha fazla hazır kütüphaneye ve daha olgun bir ekosisteme sahiptir.

Kotlin/JS ile geliştirme üretkenliği, projenin diğer bölümlerinde zaten Kotlin kullanan ekipler için daha yüksek olabilir çünkü dil değiştirme gerektirmez. TypeScript, Kotlin Multiplatform'un kullanılmadığı saf web projeleri için daha popüler bir seçim olmaya devam etmektedir. Ancak, web için Compose Multiplatform'un artan popülaritesiyle Kotlin/JS, React ve Angular'a alternatif olarak zemin kazanmaktadır.

Kotlin/JS ve TypeScript arasındaki seçim, proje bağlamına bağlıdır. Ekip zaten Kotlin Multiplatform kullanıyorsa veya başlamayı planlıyorsa, Kotlin/JS frontend kısmı için mantıklı bir seçimdir. İzole bir web projesi için TypeScript, JavaScript kütüphaneleri için hazır türlerin mevcudiyeti ve pazardaki daha fazla geliştirici sayısı nedeniyle daha pragmatik bir çözüm olmaya devam etmektedir.