0Pricing
Kotlin Academy · Урок

Kotlin/WASM: компиляция в WebAssembly для браузера

Настройте Kotlin/WASM, интегрируйте его с JavaScript и запустите в браузере

«Kotlin/WASM: компиляция в WebAssembly для браузера» — бесплатный урок Kotlin Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Kotlin Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Kotlin Academy содержит 4 уроков всего.

Что такое Kotlin/WASM

Kotlin/WASM — это целевая платформа компиляции Kotlin, создающая модули WebAssembly (.wasm) для выполнения в браузерах и серверных средах выполнения WASM. Она отделена от Kotlin/JS и обеспечивает более высокую производительность и меньший размер бинарного файла для вычислительно сложного кода.

Текущее состояние (Kotlin 2.0)

По состоянию на Kotlin 2.0 Kotlin/WASM ориентирован на предложение WasmGC — стандарт W3C, обеспечивающий нативную поддержку объектов со сборкой мусора в WebAssembly. WasmGC поддерживается в Chrome 119+, Firefox 120+ и Safari 18+. Начиная с Kotlin 2.1 Kotlin/WASM имеет статус стабильной технологии.

Настройка целевой платформы Kotlin/WASM

В файле build.gradle.kts Вашего KMP-проекта объявите целевую платформу WASM и исполняемый бинарный файл:

kotlin {
    wasmJs {
        browser()
        binaries.executable()
    }
    sourceSets {
        val wasmJsMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlinx:kotlinx-browser:0.3")
            }
        }
    }
}

Написание кода Kotlin для WASM

Код Kotlin/WASM выглядит как обычный код Kotlin. Вы можете совместно использовать логику с другими целевыми платформами KMP через commonMain. Доступ к DOM браузера осуществляется через библиотеку kotlinx-browser:

import kotlinx.browser.document
import kotlinx.browser.window

fun main() {
    val p = document.createElement("p")
    p.textContent = "Hello from Kotlin/WASM!"
    document.body!!.appendChild(p)
}

Сборка и запуск

Запустите ./gradlew wasmJsBrowserDevelopmentRun, чтобы запустить сервер разработки с автоматическим обновлением. Для производственной сборки используйте ./gradlew wasmJsBrowserDistribution. Выходные файлы находятся в build/dist/wasmJs/productionExecutable/.

Взаимодействие с JavaScript в Kotlin/WASM

Используйте @JsExport, чтобы сделать функции Kotlin доступными из JavaScript. Используйте объявления external, чтобы вызывать API JavaScript из Kotlin:

external fun console_log(msg: String): Unit

@JsExport
fun add(a: Int, b: Int): Int = a + b

Kotlin/WASM и Kotlin/JS

Kotlin/JS: транспилирует код в JavaScript — обеспечивает полный доступ к экосистеме JS, зрелые инструменты и работает везде, где работает JS. Kotlin/WASM: компилирует код в WebAssembly — обеспечивает более быстрое выполнение вычислительно сложного кода и модель памяти с проверкой типов, но требует поддержки WasmGC в браузере. Используйте Kotlin/JS для обычных веб-приложений; рассмотрите Kotlin/WASM для модулей, критичных к производительности.

Compose для Web (WASM)

Compose Multiplatform от JetBrains поддерживает Kotlin/WASM для создания веб-интерфейсов с теми же API Compose, которые используются на Android и Desktop. Весь интерфейс отображается в элементе Canvas с помощью WASM:

// build.gradle.kts with Compose Multiplatform
plugins { id("org.jetbrains.compose") }

// In wasmJsMain
@OptIn(ExperimentalComposeUiApi::class)
fun main() = CanvasBasedWindow("MyApp") {
    Text("Hello, Compose WASM!")
}

Размер бинарного файла и оптимизация

Бинарные файлы WASM оптимизируются с помощью wasm-opt во время производственных сборок. Удаление неиспользуемого кода исключает ненужный код стандартной библиотеки Kotlin. Типичный размер приложения Kotlin/WASM «Привет, мир!» составляет 200–400 KB в сжатом виде. Включите binaryenArgs = listOf("-O3") для максимальной оптимизации.

Совместное использование кода с JVM и Native

Поскольку Kotlin/WASM является целевой платформой KMP, логика предметной области, алгоритмы и модели данных в commonMain используются совместно автоматически. Платформенный код (работа с DOM и файлами) находится в wasmJsMain и использует объявления actual.

Ограничения и дальнейшие планы

Текущие ограничения: нет прямого доступа к пакетам NPM (используйте взаимодействие с JavaScript), поддержка отладчика ограничена по сравнению с Kotlin/JS, требуется поддержка WasmGC в браузере (в старых браузерах она недоступна). Команда Kotlin активно улучшает инструменты, производительность и охват стандартной библиотеки для WASM.

Проверка

Какое предложение WebAssembly использует Kotlin/WASM (Kotlin 2.0+), обеспечивая нативную поддержку объектов со сборкой мусора в WASM?

Итоги: Kotlin/WASM

Главные выводы:

  • Kotlin/WASM компилируется в WebAssembly с помощью предложения WasmGC (стабильного в Kotlin 2.1)
  • Объявите wasmJs { browser(); binaries.executable() } в конфигурации Gradle KMP
  • Доступ к DOM осуществляется через kotlinx-browser; взаимодействие с JS — через external и @JsExport
  • Выполняйте сборку с помощью wasmJsBrowserDistribution; запускайте сервер разработки с помощью wasmJsBrowserDevelopmentRun
  • Совместно используйте логику предметной области в commonMain, а платформенные особенности размещайте в wasmJsMain

Часто задаваемые вопросы

Урок «Kotlin/WASM: компиляция в WebAssembly для браузера» бесплатный?

Да — полный текст урока «Kotlin/WASM: компиляция в WebAssembly для браузера» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Kotlin Academy, подпишись на CoddyKit PRO. Курс Kotlin Academy содержит 4 уроков всего.

Чему я научусь в уроке «Kotlin/WASM: компиляция в WebAssembly для браузера»?

Настройте Kotlin/WASM, интегрируйте его с JavaScript и запустите в браузере Ты практикуешь Kotlin Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Kotlin Academy?

Предыдущий опыт не требуется. Kotlin Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Kotlin/WASM: компиляция в WebAssembly для браузера»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Kotlin Academy?

Да. Каждый урок Kotlin Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Обзор Kotlin/Native: цели, набор инструментов и компиляция
  2. Управление памятью в Kotlin/Native: новый MM
  3. Взаимодействие с C с помощью cinterop и файлов .def
  4. Kotlin/WASM: компиляция в WebAssembly для браузера
← Назад к Kotlin Academy