Kotlin/JS — bu nədir, JavaScript-ə kompilyator və xüsusiyyətlər

Kotlin/JS nədir?

Kotlin/JS — Kotlin kompilyatorunun üç backendindən biridir (JVM və Native ilə yanaşı), Kotlin kodunu JavaScript-ə tərcümə etmək üçün nəzərdə tutulub. JetBrains tərəfindən hazırlanmış Kotlin/JS, sərt statik tipizasiyaya malik dildə veb tətbiqləri yazmağa, eyni zamanda xarici bəyannamələr mexanizmi vasitəsilə JavaScript kitabxanalarının nəhəng ekosisteminə çıxışı qorumağa imkan verir. Kotlin 1.3-də ilk stabil buraxılışından bəri kompilyator eksperimental backenddən sənaye layihələrində istifadə olunan production-ready alətinə qədər yol keçmişdir.

Kotlin/JS-in əsas təyinatı — JavaScript və ya TypeScript əvəzinə Kotlin istifadə edərək frontend inkişafıdır. Tərtibatçılar Kotlin dilinin bütün imkanlarını əldə edirlər: null safety, genişləndirmə funksiyaları, data sinifləri, korutinlər və sealed siniflər. Yaradılan JavaScript kodu istənilən müasir brauzerdə və ya Node.js mühitində işləyə bilər. Kotlin/JS xüsusilə Kotlin Multiplatform layihələrində tələb olunur, burada ümumi modul (commonMain) həm mobil, həm də veb tətbiqləri üçün əlçatandır.

Kotlin/JS ekosisteminə istifadəçi interfeysləri yaratmaq üçün freymvorklar daxildir. Veb üçün Compose Multiplatform Kotlin/JS-i hədəf backend kimi istifadə edir ki, bu da brauzerdə işləyən deklarativ UI komponentləri yaratmağa imkan verir. Alternativ həllərə React üçün Kotlin Wrappers daxildir ki, bunlar React, React Router və Redux üçün type-safe API təmin edir.

Kotlin/JS kompilyatoru necə işləyir

Kompilyasiya Kotlin/JS bir neçə transformasiya mərhələsindən keçir. Mənbə Kotlin kodu əvvəlcə aralıq təmsilə (IR) kompilyasiya olunur, sonra optimallaşdırılır və JavaScript kodu yaradılır. Kotlin 1.8-dən etibarən köhnə backend (AST əsaslı JsBackend) tamamilə IR-backend ilə əvəz olunmuşdur ki, bu da daha yaxşı optimallaşdırma, daha kiçik çıxış kodu ölçüsü və TypeScript uyğunluğu təmin edir.

Əvvəllər Kotlin/JS JsBackend istifadə edirdi ki, bu da birbaşa AST ağacı (Abstract Syntax Tree) ilə işləyirdi. Bu yanaşmanın məhdudiyyətləri var idi: platforma optimallaşdırmalarının dəstəklənməsinin mürəkkəbliyi, bütün backendlər üçün vahid IR-in olmaması və TypeScript bəyannamələri yarada bilməməsi. IR-backend-ə keçid bu problemləri həll etdi, Kotlin-in hər üç backendinin kompilyasiyasını birləşdirdi və çarpaz backend optimallaşdırmalarına yol açdı.

Kotlin/JS kompilyasiya rejimləri

Kotlin/JS çıxış kodunun formatını və optimallaşdırılmasını təyin edən iki kompilyasiya rejimini dəstəkləyir. Production rejimi kompilyasiya, minifikasiya və tree-shaking üçün Webpack istifadə edir. Development rejimi sürətli inkişaf iterasiyası üçün Hot Module Replacement dəstəkləyir. Rejim seçimi build.gradle.kts faylında js.target konfiqurasiyası vasitəsilə tənzimlənir.

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

NPM və JavaScript kitabxanaları ilə inteqrasiya

İnteqrasiya Kotlin/JS-in NPM ekosistemi ilə əlaqəsi build.gradle.kts faylında xüsusi DSL vasitəsilə həyata keçirilir. Tərtibatçı kotlin konfiqurasiyasında npm asılılıqlarını, paketin adını və versiyasını göstərərək bəyan edir. Kotlin/JS avtomatik olaraq npm və ya yarn paket meneceri vasitəsilə paketləri yükləyir. JavaScript kitabxanalarına type-safe girişi təmin etmək üçün external bəyannamələrdən istifadə olunur ki, bunlar kitabxananın tiplərini və funksiyalarını Kotlin kompilyatoru üçün təsvir edir.

External bəyannamələr — external açar sözü ilə işarələnmiş Kotlin bəyannamələridir. Onlar kompilyatora funksiya və ya sinifin reallaşdırmasının Kotlin deyil, JavaScript kodunda olduğunu bildirir. JetBrains Kotlin Wrappers tərkibində məşhur kitabxanalar üçün hazır örtük dəstləri təqdim edir, bunlara React, React Router, Redux, Emotion və MUI daxildir. Hazır örtükləri olmayan kitabxanalar üçün tərtibatçı external bəyannamələri əl ilə yaza və ya Dukat TypeScript bağlayıcı generatorundan istifadə edə bilər.

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

// JavaScript kitabxanası üçün xarici bəyannamə
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

TypeScript uyğunluğu ilə iş

TypeScript — müasir vebin ayrılmaz hissəsidir və Kotlin/JS .d.ts faylları yaratmaqla onunla uyğunluğu təmin edir. js.generateTsDeclarations = true parametri qurulduqda, kompilyator bütün açıq Kotlin funksiyaları və sinifləri üçün TypeScript bəyannamələri yaradır. Bu, TypeScript layihələrinə Kotlin modullarını tam tip dəstəyi ilə idxal etməyə imkan verir. TypeScript bəyannamələrinin yaradılması yalnız IR-backend ilə işləyir və köhnə backenddən miqrasiyanın əsas səbəblərindən biridir.

Kotlin/JS IR-backend və üstünlükləri

IR-backend (Intermediate Representation) — Kotlin-in hər üç platforması üçün vahid backenddir: JVM, JS və Native. O, hədəf kodu yaratmazdan əvvəl bir neçə optimallaşdırma mərhələsindən keçən ümumi aralıq təmsildən istifadə edir. Kotlin/JS üçün IR-backend Kotlin 1.8.0-dan etibarən məcburi olmuş, deprecated olaraq qeyd edilmiş köhnə AST-based backend-i əvəz etmişdir.

IR-backend-in Kotlin/JS üçün üstünlüklərinə IR səviyyəsində təkmilləşdirilmiş kod optimallaşdırması, ölü kodun silinməsi və inline optimallaşdırmaları hesabına bündl ölçüsünün azaldılması, həmçinin TypeScript bəyannamələrinin dəstəyi daxildir. IR-backend həmçinin JavaScript-ə tərcümə zamanı inline funksiyaların, reified generic-lərin və suspend funksiyaların düzgün işlənməsini təmin edir ki, bu da köhnə backenddə problemli idi.

Kod nümunələri: quraşdırma və inkişaf

Tamhüquqlu Kotlin/JS layihəsi build.gradle.kts konfiqurasiyası ilə başlayır. kotlin multiplatform plugin-i Kotlin/JS-i hədəf platformalardan biri kimi konfiqurasiya etməyə imkan verir. React ilə veb tətbiqi üçün quraşdırma nümunəsinə baxaq.

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

Quraşdırmadan sonra Kotlin-də React komponentləri yazmaq olar. Kotlin Wrappers React üçün type-safe API təmin edir, o cümlədən funksional komponentlər, hook-lar və DSL qurucuları vasitəsilə JSX-əbənzər sintaksis. Counter komponenti nümunəsi useState və hadisə idarəediciləri ilə işi göstərir.

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

Qurğu və yerləşdirmə

Kotlin/JS layihəsinin qurğusu Gradle tapşırıqları vasitəsilə yerinə yetirilir. jsDevelopmentRun inkişaf üçün HMR ilə Webpack dev-server-i işə salır. jsProductionExecutableCompileSync minifikasiya və tree-shaking ilə istehsal bündlü yaradır. Tərtib edilmiş JavaScript-i birləşdirən yekun HTML faylı webpack plugin-i tərəfindən yaradılır və build/dist qovluğunda yerləşir.

// HMR ilə tərtibatçı serverini işə sal
./gradlew jsDevelopmentRun

// Minifikasiya ilə istehsal qurğusu
./gradlew jsProductionExecutableCompileSync

// Nəticə build/dist/productionExecutable/ faylında

Kotlin/JS vs TypeScript: müqayisə

TypeScript — tipli JavaScript sahəsində Kotlin/JS-in əsas rəqibidir. Hər iki dil JavaScript-ə kompilyasiya olunur və dinamik JS üzərində statik tipizasiya əlavə edir. Lakin Kotlin/JS bir sıra üstünlüklər təklif edir: defolt olaraq null safety, sealed siniflər, korutinlər və Kotlin Multiplatform ilə problemsiz inteqrasiya. TypeScript isə daha geniş icmaya, tiplərlə daha çox hazır kitabxanaya və daha yetkin ekosistemə malikdir.

Kotlin/JS ilə inkişaf məhsuldarlığı, artıq layihənin digər hissələrində Kotlin istifadə edən komandalar üçün daha yüksək ola bilər, çünki dillər arasında keçid tələb olunmur. TypeScript Kotlin Multiplatform istifadə olunmayan təmiz veb layihələri üçün daha populyar seçim olaraq qalır. Lakin veb üçün Compose Multiplatform-un artan populyarlığı ilə Kotlin/JS React və Angular-a alternativ olaraq mövqelərini gücləndirir.

Kotlin/JS və TypeScript arasında seçim layihənin kontekstindən asılıdır. Əgər komanda artıq Kotlin Multiplatform istifadə edirsə və ya başlamağı planlaşdırırsa, Kotlin/JS frontend hissəsi üçün məntiqli seçimdir. Təcrid olunmuş veb layihəsi üçün TypeScript, JavaScript kitabxanaları üçün hazır tiplərin mövcudluğu və bazarda daha çox tərtibatçı olması səbəbindən daha praqmatik həll olaraq qalır.