Kotlin/JS — що це таке, компілятор у JavaScript та особливості

Що таке Kotlin/JS?

Kotlin/JS — це один із трьох бекендів компілятора Kotlin (поряд із JVM та Native), призначений для трансляції коду Kotlin у JavaScript. Розроблений JetBrains, Kotlin/JS дозволяє писати веб-застосунки мовою із суворою статичною типізацією, зберігаючи доступ до величезної екосистеми JavaScript-бібліотек через механізм зовнішніх оголошень. З моменту першого стабільного релізу в Kotlin 1.3 компілятор пройшов шлях від експериментального бекенду до production-ready інструменту, що використовується в промислових проєктах.

Основне призначення Kotlin/JS — frontend-розробка з використанням Kotlin замість JavaScript або TypeScript. Розробники отримують всі можливості мови Kotlin: null safety, extension-функції, data-класи, корутини та sealed-класи. Згенерований JavaScript-код може виконуватися в будь-якому сучасному браузері або середовищі Node.js. Kotlin/JS особливо затребуваний у проєктах Kotlin Multiplatform, де спільний модуль (commonMain) доступний як для мобільних, так і для веб-застосунків.

Екосистема Kotlin/JS включає фреймворки для створення користувацьких інтерфейсів. Compose Multiplatform для вебу використовує Kotlin/JS як цільовий бекенд, що дозволяє створювати декларативні UI-компоненти, які працюють у браузері. Альтернативні рішення включають обгортки для React — Kotlin Wrappers, які надають type-safe API для React, React Router та Redux.

Як працює компілятор Kotlin/JS

Компіляція Kotlin/JS проходить через кілька етапів трансформації. Вихідний код Kotlin спочатку компілюється в проміжне представлення (IR), потім оптимізується та генерується JavaScript-код. Починаючи з Kotlin 1.8, старий бекенд (JsBackend на основі AST) був повністю замінений на IR-бекенд, який забезпечує кращу оптимізацію, менший розмір вихідного коду та сумісність із TypeScript.

Раніше Kotlin/JS використовував JsBackend, який працював безпосередньо з AST-деревом (Abstract Syntax Tree). Цей підхід мав обмеження: складність підтримки платформенних оптимізацій, відсутність єдиного IR для всіх бекендів та нездатність генерувати TypeScript-декларації. Перехід на IR-бекенд вирішив ці проблеми, уніфікувавши компіляцію всіх трьох бекендів Kotlin та відкривши шлях для крос-бекендних оптимізацій.

Режими компіляції Kotlin/JS

Kotlin/JS підтримує два режими збірки, що визначають формат та оптимізацію вихідного коду. Режим production використовує Webpack для збірки, мініфікації та tree-shaking. Режим development підтримує Hot Module Replacement для швидкої ітерації розробки. Вибір режиму налаштовується в build.gradle.kts через конфігурацію js.target.

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

Інтеграція з NPM та JavaScript-бібліотеками

Інтеграція Kotlin/JS з NPM-екосистемою реалізована через спеціальний DSL у build.gradle.kts. Розробник оголошує npm-залежності в конфігурації kotlin, вказуючи назву пакета та версію. Kotlin/JS автоматично підтягує пакети через менеджер пакетів npm або yarn. Для забезпечення type-safe доступу до JavaScript-бібліотек використовуються external-декларації, які описують типи та функції бібліотеки для компілятора Kotlin.

External-декларації — це оголошення Kotlin, позначені ключовим словом external. Вони повідомляють компілятору, що реалізація функції або класу знаходиться в JavaScript-коді, а не в Kotlin. JetBrains надає готові набори обгорток для популярних бібліотек у складі Kotlin Wrappers, включаючи React, React Router, Redux, Emotion та MUI. Для бібліотек, що не мають готових обгорток, розробник може написати external-декларації вручну або використати генератор TypeScript-прив'язок Dukat.

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

// Зовнішнє оголошення для JavaScript бібліотеки
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

Робота з TypeScript-сумісністю

TypeScript — невід'ємна частина сучасного вебу, і Kotlin/JS забезпечує сумісність із ним через генерацію файлів .d.ts. При налаштуванні js.generateTsDeclarations = true компілятор створює TypeScript-декларації для всіх публічних функцій та класів Kotlin. Це дозволяє TypeScript-проєктам імпортувати модулі Kotlin з повною підтримкою типів. Генерація TypeScript-декларацій працює лише з IR-бекендом і є однією з ключових причин міграції зі старого бекенду.

IR-бекенд Kotlin/JS та переваги

IR-бекенд (Intermediate Representation) — це єдиний бекенд для всіх трьох платформ Kotlin: JVM, JS та Native. Він використовує спільне проміжне представлення, яке проходить через кілька етапів оптимізації перед генерацією цільового коду. Для Kotlin/JS IR-бекенд став обов'язковим починаючи з Kotlin 1.8.0, замінивши старий AST-бекенд, який був позначений як deprecated.

Переваги IR-бекенду для Kotlin/JS включають покращену оптимізацію коду на рівні IR, зменшення розміру бандла за рахунок dead code elimination та inline-оптимізацій, а також підтримку TypeScript-декларацій. IR-бекенд також забезпечує коректну обробку inline-функцій, reified-дженериків та suspend-функцій при трансляції в JavaScript, що було проблематично в старому бекенді.

Приклади коду: налаштування та розробка

Повноцінний проєкт Kotlin/JS починається з конфігурації build.gradle.kts. Плагін kotlin multiplatform дозволяє налаштувати Kotlin/JS як одну з цільових платформ. Розглянемо приклад налаштування для веб-застосунку з 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))
}

Після налаштування можна писати React-компоненти на Kotlin. Kotlin Wrappers надають type-safe API для React, включаючи функціональні компоненти, хуки та JSX-подібний синтаксис через DSL-побудовники. Приклад компонента Counter демонструє роботу з useState та обробниками подій.

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

Збірка та розгортання

Збірка проєкту Kotlin/JS виконується через Gradle-задачі. jsDevelopmentRun запускає dev-сервер Webpack з HMR для розробки. jsProductionExecutableCompileSync генерує production-бандл з мініфікацією та tree-shaking. Фінальний HTML-файл, що підключає скомпільований JavaScript, генерується плагіном webpack і розташовується в build/dist.

// Запустити dev-сервер з HMR
./gradlew jsDevelopmentRun

// Production збірка з мініфікацією
./gradlew jsProductionExecutableCompileSync

// Результат у build/dist/productionExecutable/

Kotlin/JS vs TypeScript: порівняння

TypeScript — основний конкурент Kotlin/JS у галузі типізованого JavaScript. Обидві мови компілюються в JavaScript і додають статичну типізацію поверх динамічного JS. Однак Kotlin/JS пропонує ряд переваг: null safety за замовчуванням, sealed-класи, корутини та безшовну інтеграцію з Kotlin Multiplatform. TypeScript, у свою чергу, має більшу спільноту, більше готових бібліотек із типами та більш зрілу екосистему.

Продуктивність розробки на Kotlin/JS може бути вищою для команд, які вже використовують Kotlin в інших частинах проєкту, оскільки не потрібне перемикання між мовами. TypeScript залишається більш популярним вибором для чистих веб-проєктів, де не використовується Kotlin Multiplatform. Однак зі зростанням популярності Compose Multiplatform для вебу Kotlin/JS набирає позиції як альтернатива React та Angular.

Вибір між Kotlin/JS та TypeScript залежить від контексту проєкту. Якщо команда вже використовує Kotlin Multiplatform або планує почати, Kotlin/JS — логічний вибір для frontend-частини. Для ізольованого веб-проєкту TypeScript залишається більш прагматичним рішенням завдяки доступності готових типів для JavaScript-бібліотек та більшій кількості розробників на ринку.