Kotlin Academy · Lektion

Kotlin/WASM: kompilera till WebAssembly för webbläsaren

Använd Kotlin/WASM som mål, integrera med JavaScript och kör i en webbläsarmiljö.

Lektion 4 av 413 steg

Kotlin/WASM: kompilera till WebAssembly för webbläsaren är en gratis lektion i Kotlin Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Kotlin Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Kotlin Academy innehåller totalt 4 lektioner.

Vad är Kotlin/WASM?

Kotlin/WASM är ett kompileringsmål för Kotlin som producerar WebAssembly-moduler (.wasm) för körning i webbläsare och serverbaserade WASM-runtime-miljöer. Det är separat från Kotlin/JS och ger bättre prestanda samt mindre binärstorlek för beräkningsintensiv kod.

Aktuell status (Kotlin 2.0)

Från och med Kotlin 2.0 riktar sig Kotlin/WASM mot förslaget WasmGC – en W3C-standard som ger WebAssembly inbyggt stöd för garbage-collectade objekt. WasmGC stöds i Chrome 119+, Firefox 120+ och Safari 18+. Kotlin/WASM har statusen Stable från och med Kotlin 2.1.

Konfigurera ett Kotlin/WASM-mål

I KMP:s build.gradle.kts deklarerar du WASM-målet och en körbar binär:

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

Skriva Kotlin-kod för WASM

Kotlin/WASM-kod ser ut som vanlig Kotlin-kod. Du kan dela logik med andra KMP-mål via commonMain. Åtkomst till webbläsarens DOM sker via biblioteket 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)
}

Bygga och köra

Kör ./gradlew wasmJsBrowserDevelopmentRun för att starta en utvecklingsserver med live reload. För en produktionsbuild kör du ./gradlew wasmJsBrowserDistribution. Utdata finns i build/dist/wasmJs/productionExecutable/.

JavaScript-interop i Kotlin/WASM

Använd @JsExport för att exponera Kotlin-funktioner för JavaScript. Använd external-deklarationer för att anropa JavaScript-API:er från Kotlin:

external fun console_log(msg: String): Unit

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

Kotlin/WASM jämfört med Kotlin/JS

Kotlin/JS: transpilerar till JavaScript – ger åtkomst till hela JS-ekosystemet, har mogna verktyg och körs överallt där JS körs. Kotlin/WASM: kompilerar till WebAssembly – ger snabbare körning för beräkningstung kod, har en typsäker minnesmodell och kräver webbläsarstöd för WasmGC. Använd Kotlin/JS för allmänna webbappar och överväg Kotlin/WASM för prestandakritiska moduler.

Compose för webben (WASM)

Compose Multiplatform från JetBrains använder Kotlin/WASM som mål för att bygga webbgränssnitt med samma Compose-API:er som används på Android och Desktop. Hela gränssnittet renderas till ett Canvas-element via 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!")
}

Binärstorlek och optimering

WASM-binärer optimeras med wasm-opt under produktionsbyggen. Tree shaking tar bort oanvänd kod från Kotlin-standardbiblioteket. En typisk Kotlin/WASM-hello-world-applikation är 200–400 KB gzip-komprimerad. Aktivera binaryenArgs = listOf("-O3") för maximal optimering.

Dela kod med JVM och Native

Eftersom Kotlin/WASM är ett KMP-mål delas domänlogik, algoritmer och datamodeller i commonMain automatiskt. Plattformsspecifik kod, som DOM-manipulering och filin-/utmatning, placeras i wasmJsMain med hjälp av actual-deklarationer.

Begränsningar och färdplan

Aktuella begränsningar: ingen direkt åtkomst till NPM-paket (använd JS-interop), begränsat stöd för debugger jämfört med Kotlin/JS samt krav på webbläsarstöd för WasmGC (inte tillgängligt i äldre webbläsare). Kotlin-teamet förbättrar aktivt verktyg, prestanda och stödet för standardbiblioteket i WASM.

Snabb kontroll

Vilket WebAssembly-förslag riktar sig Kotlin/WASM (Kotlin 2.0+) mot och ger därmed WebAssembly inbyggt stöd för garbage-collectade objekt?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Kotlin/WASM

Viktigaste punkterna:

Kotlin/WASM kompilerar till WebAssembly via förslaget WasmGC (Stable i Kotlin 2.1)
Deklarera wasmJs { browser(); binaries.executable() } i KMP:s Gradle-konfiguration
Åtkomst till DOM via kotlinx-browser; JS-interop via external och @JsExport
Bygg med wasmJsBrowserDistribution; använd utvecklingsservern med wasmJsBrowserDevelopmentRun
Dela domänlogik i commonMain; plattformsspecifik kod i wasmJsMain

Gratis att börja

Lär dig Kotlin med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 51
Lektioner: 203

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Kotlin/WASM: kompilera till WebAssembly för webbläsaren” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Kotlin Academy, inklusive ”Kotlin/WASM: kompilera till WebAssembly för webbläsaren”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Kotlin Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Kotlin/WASM: kompilera till WebAssembly för webbläsaren”?

Använd Kotlin/WASM som mål, integrera med JavaScript och kör i en webbläsarmiljö. Ni övar på Kotlin Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Kotlin Academy?

Du behöver inga förkunskaper. Utbildningen i Kotlin Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Kotlin/WASM: kompilera till WebAssembly för webbläsaren”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Kotlin Academy-lektionen?

Ja. Varje Kotlin Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Översikt över Kotlin/Native: mål, verktygskedja och kompilering
Minneshantering i Kotlin/Native: den nya MM
C-interoperabilitet med cinterop och .def-filer
Kotlin/WASM: kompilera till WebAssembly för webbläsaren

← Tillbaka till Kotlin Academy