Kotlin Academy · Lekcja

Kotlin/WASM: kompilowanie do WebAssembly dla przeglądarki

Kieruj kod Kotlin do Kotlin/WASM, zintegruj go z JavaScript i uruchom w środowisku przeglądarki.

Kotlin/WASM: kompilowanie do WebAssembly dla przeglądarki to bezpłatna lekcja Kotlin Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Kotlin Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Kotlin Academy zawiera 4 lekcji w sumie.

Czym jest Kotlin/WASM?

Kotlin/WASM to cel kompilacji Kotlin, który tworzy moduły WebAssembly (.wasm) przeznaczone do uruchamiania w przeglądarkach i serwerowych środowiskach uruchomieniowych WASM. Jest niezależny od Kotlin/JS i zapewnia lepszą wydajność oraz mniejszy rozmiar pliku binarnego w przypadku kodu intensywnie wykorzystującego obliczenia.

Aktualny stan (Kotlin 2.0)

W Kotlinie 2.0 Kotlin/WASM jest ukierunkowany na propozycję WasmGC — standard W3C, który zapewnia natywną obsługę obiektów zarządzanych przez garbage collector w WebAssembly. WasmGC jest obsługiwany w Chrome 119+, Firefox 120+ i Safari 18+. Kotlin/WASM ma status Stable od Kotlin 2.1.

Konfigurowanie celu Kotlin/WASM

W pliku build.gradle.kts projektu KMP zadeklaruj cel WASM i wykonywalny plik binarny:

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

Pisanie kodu Kotlin dla WASM

Kod Kotlin/WASM wygląda jak zwykły kod Kotlin. Logikę można współdzielić z innymi celami KMP za pośrednictwem commonMain. Dostęp do DOM przeglądarki zapewnia biblioteka 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)
}

Budowanie i uruchamianie

Uruchom ./gradlew wasmJsBrowserDevelopmentRun, aby uruchomić serwer deweloperski z funkcją przeładowywania na żywo. W przypadku kompilacji produkcyjnej użyj polecenia ./gradlew wasmJsBrowserDistribution. Wynik znajduje się w katalogu build/dist/wasmJs/productionExecutable/.

Interoperacyjność z JavaScript w Kotlin/WASM

Użyj @JsExport, aby udostępnić funkcje Kotlin kodowi JavaScript. Użyj deklaracji external, aby wywoływać API JavaScript z poziomu Kotlin:

external fun console_log(msg: String): Unit

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

Kotlin/WASM a Kotlin/JS

Kotlin/JS: transpiluje kod do JavaScript — zapewnia dostęp do całego ekosystemu JS, dojrzałe narzędzia i działa wszędzie tam, gdzie działa JS. Kotlin/WASM: kompiluje kod do WebAssembly — zapewnia szybsze wykonywanie kodu intensywnie wykorzystującego obliczenia oraz bezpieczny typowo model pamięci, ale wymaga obsługi WasmGC w przeglądarce. Kotlin/JS należy stosować do ogólnych aplikacji webowych, a Kotlin/WASM warto rozważyć w przypadku modułów, w których wydajność ma kluczowe znaczenie.

Compose dla Web (WASM)

Biblioteka Compose Multiplatform firmy JetBrains wykorzystuje Kotlin/WASM do tworzenia webowych interfejsów użytkownika za pomocą tych samych interfejsów API Compose, które są używane na Androidzie i komputerach stacjonarnych. Cały interfejs użytkownika jest renderowany do elementu Canvas za pośrednictwem 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!")
}

Rozmiar pliku binarnego i optymalizacja

Pliki binarne WASM są optymalizowane za pomocą wasm-opt podczas kompilacji produkcyjnych. Tree-shaking usuwa nieużywany kod standardowej biblioteki Kotlin. Typowy program hello-world w Kotlin/WASM ma po kompresji gzip rozmiar 200–400 KB. Włącz binaryenArgs = listOf("-O3"), aby uzyskać maksymalny poziom optymalizacji.

Współdzielenie kodu z JVM i Native

Ponieważ Kotlin/WASM jest celem KMP, logika domenowa, algorytmy i modele danych umieszczone w commonMain są automatycznie współdzielone. Kod zależny od platformy (modyfikowanie DOM, operacje wejścia-wyjścia na plikach) znajduje się w wasmJsMain i korzysta z deklaracji actual.

Ograniczenia i plan rozwoju

Obecne ograniczenia to: brak bezpośredniego dostępu do pakietów NPM (należy używać interoperacyjności z JS), ograniczona obsługa debuggera w porównaniu z Kotlin/JS oraz konieczność obsługi WasmGC przez przeglądarkę (funkcja niedostępna w starszych przeglądarkach). Zespół Kotlin aktywnie ulepsza narzędzia, wydajność i zakres obsługi biblioteki standardowej dla WASM.

Szybkie sprawdzenie

Jaki projekt WebAssembly obsługuje Kotlin/WASM (Kotlin 2.0+), zapewniając natywną obsługę obiektów zarządzanych przez garbage collector w WASM?

Podsumowanie: Kotlin/WASM

Najważniejsze informacje:

Kotlin/WASM kompiluje kod do WebAssembly za pośrednictwem propozycji WasmGC (status Stable w Kotlinie 2.1)
Zadeklaruj wasmJs { browser(); binaries.executable() } w konfiguracji Gradle KMP
Dostęp do DOM zapewnia kotlinx-browser, a interoperacyjność z JS — external i @JsExport
Buduj za pomocą wasmJsBrowserDistribution, a serwer deweloperski uruchamiaj za pomocą wasmJsBrowserDevelopmentRun
Współdziel logikę domenową w commonMain, a kod zależny od platformy umieszczaj w wasmJsMain

Często zadawane pytania

Czy lekcja „Kotlin/WASM: kompilowanie do WebAssembly dla przeglądarki” jest bezpłatna?

Tak — pełny tekst „Kotlin/WASM: kompilowanie do WebAssembly dla przeglądarki” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Kotlin Academy, przejdź na CoddyKit PRO. Kurs Kotlin Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Kotlin/WASM: kompilowanie do WebAssembly dla przeglądarki”?

Kieruj kod Kotlin do Kotlin/WASM, zintegruj go z JavaScript i uruchom w środowisku przeglądarki. Ćwiczysz Kotlin Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Kotlin Academy?

Nie wymagamy żadnego doświadczenia. Kotlin Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Kotlin/WASM: kompilowanie do WebAssembly dla przeglądarki”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Kotlin Academy?

Tak. Każda lekcja Kotlin Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Kotlin/Native — omówienie: cele, toolchain i kompilacja
Zarządzanie pamięcią w Kotlin/Native: nowy menedżer pamięci
Interoperacyjność z C za pomocą cinterop i plików .def
Kotlin/WASM: kompilowanie do WebAssembly dla przeglądarki

← Powrót do Kotlin Academy