Kotlin/JS — ce este, compilator în JavaScript și caracteristici

Ce este Kotlin/JS?

Kotlin/JS — este unul dintre cele trei backend-uri ale compilatorului Kotlin (alături de JVM și Native), destinat traducerii codului Kotlin în JavaScript. Dezvoltat de JetBrains, Kotlin/JS permite scrierea de aplicații web într-un limbaj cu tipizare statică strictă, păstrând accesul la imensul ecosistem de biblioteci JavaScript prin mecanismul declarațiilor externe. De la prima lansare stabilă în Kotlin 1.3, compilatorul a parcurs drumul de la un backend experimental la un instrument gata de producție, utilizat în proiecte industriale.

Scopul principal al Kotlin/JS — dezvoltarea frontend folosind Kotlin în loc de JavaScript sau TypeScript. Dezvoltatorii primesc toate capacitățile limbajului Kotlin: null safety, funcții de extensie, clase de date, corutine și clase sealed. Codul JavaScript generat poate rula în orice browser modern sau în mediul Node.js. Kotlin/JS este deosebit de căutat în proiectele Kotlin Multiplatform, unde modulul comun (commonMain) este disponibil atât pentru aplicațiile mobile, cât și pentru cele web.

Ecosistemul Kotlin/JS include framework-uri pentru crearea interfețelor de utilizator. Compose Multiplatform pentru web utilizează Kotlin/JS ca backend țintă, ceea ce permite crearea de componente UI declarative care funcționează în browser. Soluțiile alternative includ wrapper-e pentru React — Kotlin Wrappers, care oferă o API type-safe pentru React, React Router și Redux.

Cum funcționează compilatorul Kotlin/JS

Compilarea Kotlin/JS trece prin mai multe etape de transformare. Codul sursă Kotlin este mai întâi compilat într-o reprezentare intermediară (IR), apoi optimizat și se generează cod JavaScript. Începând cu Kotlin 1.8, vechiul backend (JsBackend bazat pe AST) a fost complet înlocuit cu IR-backend, care asigură o optimizare mai bună, o dimensiune mai mică a codului de ieșire și compatibilitate cu TypeScript.

Anterior, Kotlin/JS utiliza JsBackend, care lucra direct cu arborele AST (Abstract Syntax Tree). Această abordare avea limitări: complexitatea suportului pentru optimizări de platformă, lipsa unui IR unificat pentru toate backend-urile și incapacitatea de a genera declarații TypeScript. Trecerea la IR-backend a rezolvat aceste probleme, unificând compilarea tuturor celor trei backend-uri Kotlin și deschizând calea pentru optimizări cross-backend.

Modurile de compilare Kotlin/JS

Kotlin/JS suportă două moduri de compilare care determină formatul și optimizarea codului de ieșire. Modul production utilizează Webpack pentru compilare, minificare și tree-shaking. Modul development suportă Hot Module Replacement pentru iterarea rapidă a dezvoltării. Selectarea modului se configurează în build.gradle.kts prin configurația js.target.

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

Integrarea cu NPM și bibliotecile JavaScript

Integrarea Kotlin/JS cu ecosistemul NPM este realizată printr-un DSL special în build.gradle.kts. Dezvoltatorul declară dependențele npm în configurația kotlin, specificând numele pachetului și versiunea. Kotlin/JS descarcă automat pachetele prin managerul de pachete npm sau yarn. Pentru a asigura accesul type-safe la bibliotecile JavaScript, se utilizează declarații external, care descriu tipurile și funcțiile bibliotecii pentru compilatorul Kotlin.

Declarațiile external — sunt declarații Kotlin marcate cu cuvântul cheie external. Ele informează compilatorul că implementarea funcției sau clasei se află în codul JavaScript, nu în Kotlin. JetBrains oferă seturi gata făcute de wrapper-e pentru biblioteci populare în cadrul Kotlin Wrappers, inclusiv React, React Router, Redux, Emotion și MUI. Pentru bibliotecile care nu au wrapper-e gata făcute, dezvoltatorul poate scrie declarații external manual sau poate utiliza generatorul de legături TypeScript Dukat.

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

// Declarație externă pentru biblioteca JavaScript
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

Lucrul cu compatibilitatea TypeScript

TypeScript — o parte integrantă a web-ului modern, iar Kotlin/JS asigură compatibilitatea cu acesta prin generarea fișierelor .d.ts. La setarea js.generateTsDeclarations = true, compilatorul creează declarații TypeScript pentru toate funcțiile și clasele publice Kotlin. Acest lucru permite proiectelor TypeScript să importe module Kotlin cu suport complet de tipuri. Generarea declarațiilor TypeScript funcționează doar cu IR-backend și este unul dintre motivele cheie ale migrării de la vechiul backend.

IR-backend Kotlin/JS și avantaje

IR-backend (Intermediate Representation) — este un backend unificat pentru toate cele trei platforme Kotlin: JVM, JS și Native. Utilizează o reprezentare intermediară comună care trece prin mai multe etape de optimizare înainte de generarea codului țintă. Pentru Kotlin/JS, IR-backend a devenit obligatoriu începând cu Kotlin 1.8.0, înlocuind vechiul backend bazat pe AST care fusese marcat ca deprecated.

Avantajele IR-backend-ului pentru Kotlin/JS includ optimizarea îmbunătățită a codului la nivel de IR, reducerea dimensiunii bundle-ului prin eliminarea codului mort și optimizări inline, precum și suportul pentru declarații TypeScript. IR-backend asigură, de asemenea, procesarea corectă a funcțiilor inline, a generic-urilor reified și a funcțiilor suspend la traducerea în JavaScript, ceea ce era problematic în vechiul backend.

Exemple de cod: configurare și dezvoltare

Un proiect Kotlin/JS complet începe cu configurarea build.gradle.kts. Plugin-ul kotlin multiplatform permite configurarea Kotlin/JS ca una dintre platformele țintă. Să analizăm un exemplu de configurare pentru o aplicație web cu 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))
}

După configurare, se pot scrie componente React în Kotlin. Kotlin Wrappers oferă o API type-safe pentru React, inclusiv componente funcționale, hook-uri și sintaxă asemănătoare JSX prin constructori DSL. Exemplul componentei Counter demonstrează lucrul cu useState și gestionarea evenimentelor.

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

Construirea și implementarea

Construirea proiectului Kotlin/JS se realizează prin sarcini Gradle. jsDevelopmentRun pornește serverul de dezvoltare Webpack cu HMR pentru dezvoltare. jsProductionExecutableCompileSync generează bundle-ul de producție cu minificare și tree-shaking. Fișierul HTML final care conectează JavaScript-ul compilat este generat de plugin-ul webpack și se află în build/dist.

// Pornește serverul de dezvoltare cu HMR
./gradlew jsDevelopmentRun

// Construire de producție cu minificare
./gradlew jsProductionExecutableCompileSync

// Ieșirea în build/dist/productionExecutable/

Kotlin/JS vs TypeScript: comparație

TypeScript — principalul concurent al Kotlin/JS în domeniul JavaScript tipizat. Ambele limbaje se compilează în JavaScript și adaugă tipizare statică peste JS-ul dinamic. Cu toate acestea, Kotlin/JS oferă o serie de avantaje: null safety implicit, clase sealed, corutine și integrare fără probleme cu Kotlin Multiplatform. TypeScript, la rândul său, are o comunitate mai mare, mai multe biblioteci gata făcute cu tipuri și un ecosistem mai matur.

Productivitatea dezvoltării cu Kotlin/JS poate fi mai mare pentru echipele care folosesc deja Kotlin în alte părți ale proiectului, deoarece nu necesită comutarea între limbaje. TypeScript rămâne alegerea mai populară pentru proiectele web pure unde nu se utilizează Kotlin Multiplatform. Cu toate acestea, odată cu creșterea popularității Compose Multiplatform pentru web, Kotlin/JS câștigă teren ca alternativă la React și Angular.

Alegerea între Kotlin/JS și TypeScript depinde de contextul proiectului. Dacă echipa folosește deja Kotlin Multiplatform sau intenționează să înceapă, Kotlin/JS este alegerea logică pentru partea de frontend. Pentru un proiect web izolat, TypeScript rămâne o soluție mai pragmatică datorită disponibilității tipurilor gata pentru bibliotecile JavaScript și a numărului mai mare de dezvoltatori pe piață.