Kotlin/JS — bu nima, JavaScript-ga kompilyator va xususiyatlari

Kotlin/JS nima?

Kotlin/JS — Kotlin kompilyatorining uchta backendidan biri (JVM va Native bilan birga), Kotlin kodini JavaScript-ga tarjima qilish uchun mo'ljallangan. JetBrains tomonidan ishlab chiqilgan Kotlin/JS, qattiq statik tiplashga ega tilda veb-ilovalar yozish, shu bilan birga tashqi deklaratsiyalar mexanizmi orqali JavaScript kutubxonalarining ulkan ekotizimiga kirishni saqlash imkonini beradi. Kotlin 1.3 dagi birinchi barqaror relizidan beri kompilyator eksperimental backend dan sanoat loyihalarida ishlatiladigan production-ready vositaga qadar rivojlandi.

Kotlin/JS ning asosiy maqsadi — JavaScript yoki TypeScript o'rniga Kotlin yordamida frontend ishlab chiqishdir. Dasturchilar Kotlin tilining barcha imkoniyatlarini oladilar: null safety, kengaytma funksiyalari, data sinflari, korutinlar va sealed sinflar. Yaratilgan JavaScript kodi har qanday zamonaviy brauzerda yoki Node.js muhitida bajarilishi mumkin. Kotlin/JS ayniqsa Kotlin Multiplatform loyihalarida talab qilinadi, bunda umumiy modul (commonMain) mobil va veb-ilovalar uchun ham mavjud.

Kotlin/JS ekotizimiga foydalanuvchi interfeyslarini yaratish uchun freymvorklar kiradi. Veb uchun Compose Multiplatform Kotlin/JS ni maqsadli backend sifatida ishlatadi, bu brauzerda ishlaydigan deklarativ UI komponentlarini yaratish imkonini beradi. Muqobil yechimlarga React uchun Kotlin Wrappers kiradi, ular React, React Router va Redux uchun type-safe API ta'minlaydi.

Kotlin/JS kompilyatori qanday ishlaydi

Kompilyatsiya Kotlin/JS bir necha transformatsiya bosqichlaridan o'tadi. Manba Kotlin kodi avval oraliq tasvirga (IR) kompilyatsiya qilinadi, so'ngra optimallashtiriladi va JavaScript kodi yaratiladi. Kotlin 1.8 dan boshlab, eski backend (AST asosidagi JsBackend) to'liq IR-backend bilan almashtirildi, bu yaxshiroq optimallashtirish, kichikroq chiqish kodi hajmi va TypeScript muvofiqligini ta'minlaydi.

Ilgari Kotlin/JS JsBackend dan foydalangan, u to'g'ridan-to'g'ri AST daraxti (Abstract Syntax Tree) bilan ishlagan. Bu yondashuv cheklovlarga ega edi: platforma optimallashtirishlarini qo'llab-quvvatlash murakkabligi, barcha backendlar uchun yagona IR ning yo'qligi va TypeScript deklaratsiyalarini yaratish imkoniyatining yo'qligi. IR-backend ga o'tish bu muammolarni hal qildi, Kotlin ning uchala backendining kompilyatsiyasini birlashtirdi va o'zaro backend optimallashtirishlariga yo'l ochdi.

Kotlin/JS kompilyatsiya rejimlari

Kotlin/JS chiqish kodining formatini va optimallashtirilishini belgilaydigan ikkita kompilyatsiya rejimini qo'llab-quvvatlaydi. Production rejimi kompilyatsiya, minifikatsiya va tree-shaking uchun Webpack dan foydalanadi. Development rejimi tezkor ishlab chiqish iteratsiyasi uchun Hot Module Replacement ni qo'llab-quvvatlaydi. Rejim tanlovi build.gradle.kts da js.target konfiguratsiyasi orqali sozlanadi.

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

NPM va JavaScript kutubxonalari bilan integratsiya

Integratsiya Kotlin/JS ning NPM ekotizimi bilan bog'lanishi build.gradle.kts da maxsus DSL orqali amalga oshiriladi. Dasturchi kotlin konfiguratsiyasida npm bog'liqliklarini, paket nomi va versiyasini ko'rsatib e'lon qiladi. Kotlin/JS avtomatik ravishda npm yoki yarn paket menejeri orqali paketlarni yuklab oladi. JavaScript kutubxonalariga type-safe kirishni ta'minlash uchun external deklaratsiyalardan foydalaniladi, ular kutubxonaning turlari va funksiyalarini Kotlin kompilyatori uchun tavsiflaydi.

External deklaratsiyalar — external kalit so'zi bilan belgilangan Kotlin deklaratsiyalaridir. Ular kompilyatorga funksiya yoki sinfning amalga oshirilishi Kotlin emas, balki JavaScript kodida ekanligini bildiradi. JetBrains Kotlin Wrappers tarkibida mashhur kutubxonalar uchun tayyor o'ramlar to'plamlarini taqdim etadi, ularga React, React Router, Redux, Emotion va MUI kiradi. Tayyor o'ramlari bo'lmagan kutubxonalar uchun dasturchi external deklaratsiyalarni qo'lda yozishi yoki Dukat TypeScript bog'lovchi generatoridan foydalanishi mumkin.

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

// JavaScript kutubxonasi uchun tashqi deklaratsiya
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

TypeScript muvofiqligi bilan ishlash

TypeScript — zamonaviy vebning ajralmas qismi va Kotlin/JS .d.ts fayllarini yaratish orqali u bilan muvofiqligini ta'minlaydi. js.generateTsDeclarations = true parametri o'rnatilganda, kompilyator barcha ochiq Kotlin funksiyalari va sinflari uchun TypeScript deklaratsiyalarini yaratadi. Bu TypeScript loyihalariga Kotlin modullarini to'liq tip qo'llab-quvvatlashi bilan import qilish imkonini beradi. TypeScript deklaratsiyalarini yaratish faqat IR-backend bilan ishlaydi va eski backend dan migratsiyaning asosiy sabablaridan biridir.

Kotlin/JS IR-backend va afzalliklari

IR-backend (Intermediate Representation) — Kotlin ning uchala platformasi uchun yagona backend: JVM, JS va Native. U maqsadli kodni yaratishdan oldin bir necha optimallashtirish bosqichlaridan o'tadigan umumiy oraliq tasvirdan foydalanadi. Kotlin/JS uchun IR-backend Kotlin 1.8.0 dan boshlab majburiy bo'ldi, eskirgan (deprecated) deb belgilangan eski AST-asosidagi backend ni almashtirdi.

IR-backend ning Kotlin/JS uchun afzalliklariga IR darajasida yaxshilangan kod optimallashtirish, o'lik kodni yo'qotish va inline optimallashtirishlar hisobiga bundle hajmining kamayishi, shuningdek TypeScript deklaratsiyalarini qo'llab-quvvatlash kiradi. IR-backend shuningdek JavaScript ga tarjima qilishda inline funksiyalar, reified generic-lar va suspend funksiyalarning to'g'ri ishlanishini ta'minlaydi, bu eski backend da muammoli edi.

Kod misollari: sozlash va ishlab chiqish

To'liq Kotlin/JS loyihasi build.gradle.kts konfiguratsiyasi bilan boshlanadi. kotlin multiplatform plagini Kotlin/JS ni maqsadli platformalardan biri sifatida sozlash imkonini beradi. React bilan veb-ilova uchun sozlash misolini ko'rib chiqaylik.

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

Sozlashdan so'ng Kotlin da React komponentlarini yozish mumkin. Kotlin Wrappers React uchun type-safe API ta'minlaydi, jumladan funksional komponentlar, hook-lar va DSL quruvchilari orqali JSX-ga o'xshash sintaksis. Counter komponenti misoli useState va hodisa boshqaruvchilari bilan ishlashni ko'rsatadi.

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

Qurish va joylashtirish

Kotlin/JS loyihasini qurish Gradle vazifalari orqali amalga oshiriladi. jsDevelopmentRun ishlab chiqish uchun HMR bilan Webpack dev-server ini ishga tushiradi. jsProductionExecutableCompileSync minifikatsiya va tree-shaking bilan production bundle yaratadi. Kompilyatsiya qilingan JavaScript ni bog'laydigan yakuniy HTML fayli webpack plagini tomonidan yaratiladi va build/dist da joylashadi.

// HMR bilan dev serverini ishga tushirish
./gradlew jsDevelopmentRun

// Minifikatsiya bilan production qurish
./gradlew jsProductionExecutableCompileSync

// Natija build/dist/productionExecutable/ da

Kotlin/JS vs TypeScript: taqqoslash

TypeScript — tipli JavaScript sohasida Kotlin/JS ning asosiy raqobatchisidir. Ikkala til ham JavaScript ga kompilyatsiya qilinadi va dinamik JS ustiga statik tiplashni qo'shadi. Biroq Kotlin/JS bir qator afzalliklarni taklif qiladi: sukut bo'yicha null safety, sealed sinflar, korutinlar va Kotlin Multiplatform bilan uzluksiz integratsiya. TypeScript esa kengroq jamiyatga, turlarga ega ko'proq tayyor kutubxonalarga va yetukroq ekotizimga ega.

Kotlin/JS bilan ishlab chiqish unumdorligi, loyihaning boshqa qismlarida Kotlin dan foydalanadigan jamoalar uchun yuqoriroq bo'lishi mumkin, chunki tillar o'rtasida o'tish talab qilinmaydi. TypeScript Kotlin Multiplatform ishlatilmaydigan sof veb loyihalar uchun mashhurroq tanlov bo'lib qolmoqda. Biroq veb uchun Compose Multiplatform ning o'sib borayotgan mashhurligi bilan Kotlin/JS React va Angular ga alternativ sifatida o'z mavqeini mustahkamlamoqda.

Kotlin/JS va TypeScript o'rtasidagi tanlov loyiha kontekstiga bog'liq. Agar jamoa allaqachon Kotlin Multiplatform dan foydalanayotgan bo'lsa yoki boshlashni rejalashtirayotgan bo'lsa, Kotlin/JS frontend qismi uchun mantiqiy tanlovdir. Izolyatsiya qilingan veb loyihasi uchun TypeScript, JavaScript kutubxonalari uchun tayyor turlarning mavjudligi va bozorda ko'proq dasturchilar borligi sababli pragmatikroq yechim bo'lib qolmoqda.