Kotlin/JS — co to je, kompilátor do JavaScriptu a vlastnosti

Co je Kotlin/JS?

Kotlin/JS — je jedním ze tří backendů kompilátoru Kotlin (vedle JVM a Native), určený pro překlad kódu Kotlin do JavaScriptu. Vyvinutý společností JetBrains, Kotlin/JS umožňuje psát webové aplikace v jazyce s přísnou statickou typizací, přičemž zachovává přístup k obrovskému ekosystému JavaScript knihoven prostřednictvím mechanismu externích deklarací. Od prvního stabilního vydání v Kotlin 1.3 prošel kompilátor cestou od experimentálního backendu k nástroji připravenému pro produkci, používanému v průmyslových projektech.

Hlavním účelem Kotlin/JS — frontendový vývoj s použitím Kotlin místo JavaScriptu nebo TypeScriptu. Vývojáři získávají všechny možnosti jazyka Kotlin: null safety, rozšiřující funkce, datové třídy, korutiny a sealed třídy. Generovaný JavaScript kód lze spustit v libovolném moderním prohlížeči nebo v prostředí Node.js. Kotlin/JS je obzvláště vyhledávaný v projektech Kotlin Multiplatform, kde je společný modul (commonMain) dostupný jak pro mobilní, tak pro webové aplikace.

Ekosystém Kotlin/JS zahrnuje frameworky pro vytváření uživatelských rozhraní. Compose Multiplatform pro web používá Kotlin/JS jako cílový backend, což umožňuje vytvářet deklarativní UI komponenty fungující v prohlížeči. Alternativní řešení zahrnují obaly pro React — Kotlin Wrappers, které poskytují type-safe API pro React, React Router a Redux.

Jak funguje kompilátor Kotlin/JS

Kompilace Kotlin/JS prochází několika fázemi transformace. Zdrojový kód Kotlin je nejprve zkompilován do mezilehlé reprezentace (IR), poté optimalizován a je generován JavaScript kód. Od Kotlin 1.8 byl starý backend (JsBackend založený na AST) zcela nahrazen IR-backendem, který poskytuje lepší optimalizaci, menší velikost výstupního kódu a kompatibilitu s TypeScriptem.

Dříve Kotlin/JS používal JsBackend, který pracoval přímo se stromem AST (Abstract Syntax Tree). Tento přístup měl omezení: složitost podpory platformových optimalizací, chybějící jednotný IR pro všechny backendy a neschopnost generovat TypeScript deklarace. Přechod na IR-backend tyto problémy vyřešil, sjednotil kompilaci všech tří backendů Kotlin a otevřel cestu pro mezibackendové optimalizace.

Režimy kompilace Kotlin/JS

Kotlin/JS podporuje dva režimy kompilace, které určují formát a optimalizaci výstupního kódu. Produkční režim používá Webpack pro kompilaci, minifikaci a tree-shaking. Vývojový režim podporuje Hot Module Replacement pro rychlou iteraci vývoje. Výběr režimu se nastavuje v build.gradle.kts prostřednictvím konfigurace js.target.

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

Integrace s NPM a JavaScript knihovnami

Integrace Kotlin/JS s ekosystémem NPM je realizována prostřednictvím speciálního DSL v build.gradle.kts. Vývojář deklaruje npm závislosti v konfiguraci kotlin, uvedením názvu balíčku a verze. Kotlin/JS automaticky stahuje balíčky prostřednictvím správce balíčků npm nebo yarn. Pro zajištění type-safe přístupu k JavaScript knihovnám se používají externí deklarace, které popisují typy a funkce knihovny pro kompilátor Kotlin.

Externí deklarace — Kotlin deklarace označené klíčovým slovem external. Informují kompilátor, že implementace funkce nebo třídy se nachází v JavaScript kódu, nikoli v Kotlin. JetBrains poskytuje hotové sady obalů pro populární knihovny v rámci Kotlin Wrappers, včetně React, React Router, Redux, Emotion a MUI. Pro knihovny, které nemají hotové obaly, může vývojář napsat externí deklarace ručně nebo použít generátor TypeScript vazeb Dukat.

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

// Externí deklarace pro JavaScript knihovnu
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

Práce s kompatibilitou TypeScript

TypeScript — nedílná součást moderního webu a Kotlin/JS zajišťuje kompatibilitu s ním prostřednictvím generování .d.ts souborů. Při nastavení js.generateTsDeclarations = true kompilátor vytváří TypeScript deklarace pro všechny veřejné Kotlin funkce a třídy. To umožňuje TypeScript projektům importovat Kotlin moduly s plnou podporou typů. Generování TypeScript deklarací funguje pouze s IR-backendem a je jedním z klíčových důvodů migrace ze starého backendu.

IR-backend Kotlin/JS a výhody

IR-backend (Intermediate Representation) — jednotný backend pro všechny tři platformy Kotlin: JVM, JS a Native. Používá společnou mezilehlou reprezentaci, která prochází několika fázemi optimalizace před generováním cílového kódu. Pro Kotlin/JS se IR-backend stal povinným od Kotlin 1.8.0, nahradil starý backend založený na AST, který byl označen jako deprecated.

Výhody IR-backendu pro Kotlin/JS zahrnují vylepšenou optimalizaci kódu na úrovni IR, zmenšení velikosti bundle díky eliminaci mrtvého kódu a inline optimalizacím, stejně jako podporu pro TypeScript deklarace. IR-backend také zajišťuje správné zpracování inline funkcí, reified generics a suspend funkcí při překladu do JavaScriptu, což bylo problematické ve starém backendu.

Příklady kódu: konfigurace a vývoj

Plnohodnotný projekt Kotlin/JS začíná konfigurací build.gradle.kts. Plugin kotlin multiplatform umožňuje nastavit Kotlin/JS jako jednu z cílových platforem. Podívejme se na příklad konfigurace pro webovou aplikaci s Reactem.

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

Po konfiguraci lze psát React komponenty v Kotlin. Kotlin Wrappers poskytují type-safe API pro React, včetně funkcionálních komponent, hooků a syntaxe podobné JSX prostřednictvím DSL stavitelů. Příklad komponenty Counter demonstruje práci s useState a obsluhou událostí.

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

Sestavení a nasazení

Sestavení projektu Kotlin/JS se provádí prostřednictvím Gradle úloh. jsDevelopmentRun spouští vývojový server Webpack s HMR pro vývoj. jsProductionExecutableCompileSync generuje produkční bundle s minifikací a tree-shakingem. Konečný HTML soubor připojující zkompilovaný JavaScript je generován pluginem webpack a nachází se v build/dist.

// Spustit vývojový server s HMR
./gradlew jsDevelopmentRun

// Produkční sestavení s minifikací
./gradlew jsProductionExecutableCompileSync

// Výstup v build/dist/productionExecutable/

Kotlin/JS vs TypeScript: srovnání

TypeScript — hlavní konkurent Kotlin/JS v oblasti typovaného JavaScriptu. Oba jazyky se kompilují do JavaScriptu a přidávají statickou typizaci na dynamický JS. Kotlin/JS však nabízí řadu výhod: null safety ve výchozím nastavení, sealed třídy, korutiny a bezproblémovou integraci s Kotlin Multiplatform. TypeScript má naopak větší komunitu, více hotových knihoven s typy a zralejší ekosystém.

Produktivita vývoje s Kotlin/JS může být vyšší pro týmy, které již používají Kotlin v jiných částech projektu, protože nevyžaduje přepínání mezi jazyky. TypeScript zůstává populárnější volbou pro čistě webové projekty, kde se nepoužívá Kotlin Multiplatform. S rostoucí popularitou Compose Multiplatform pro web si však Kotlin/JS získává pozici jako alternativa k Reactu a Angularu.

Volba mezi Kotlin/JS a TypeScript závisí na kontextu projektu. Pokud tým již používá Kotlin Multiplatform nebo plánuje začít, Kotlin/JS je logickou volbou pro frontendovou část. Pro izolovaný webový projekt zůstává TypeScript pragmatičtějším řešením díky dostupnosti hotových typů pro JavaScript knihovny a většímu počtu vývojářů na trhu.