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, функции за разширение, 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 ниво, намаляване на размера на пакета чрез елиминиране на мъртъв код и inline оптимизации, както и поддръжка на TypeScript декларации. IR-бекенд също така осигурява коректна обработка на inline функции, reified generics и 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, включително функционални компоненти, hooks и 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 срещу 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 библиотеки и по-големия брой разработчици на пазара.