Kotlin Academy · Lektion

Kotlin/WASM: Kompilieren für WebAssembly im Browser

Zielen Sie auf Kotlin/WASM, integrieren Sie JavaScript und führen Sie den Code in einer Browserumgebung aus.

Kotlin/WASM: Kompilieren für WebAssembly im Browser ist eine kostenlose Kotlin Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Kotlin Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Kotlin Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist Kotlin/WASM?

Kotlin/WASM ist ein Kotlin-Kompilierungsziel, das WebAssembly-Module (.wasm) für die Ausführung in Browsern und serverseitigen WASM-Runtimes erzeugt. Es ist von Kotlin/JS getrennt und bietet eine bessere Performance sowie eine kleinere Binärgröße für rechenintensiven Code.

Aktueller Status (Kotlin 2.0)

Ab Kotlin 2.0 zielt Kotlin/WASM auf den WasmGC-Vorschlag ab – einen W3C-Standard, der Garbage-Collected-Objekte nativ in WebAssembly ermöglicht. WasmGC wird in Chrome 119+, Firefox 120+ und Safari 18+ unterstützt. Kotlin/WASM ist ab Kotlin 2.1 Stable.

Ein Kotlin/WASM-Ziel einrichten

Deklarieren Sie in Ihrer KMP-build.gradle.kts das WASM-Ziel und eine ausführbare Binärdatei:

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

Kotlin-Code für WASM schreiben

Kotlin/WASM-Code sieht wie gewöhnlicher Kotlin-Code aus. Sie können Logik über commonMain mit anderen KMP-Zielen teilen. Der Zugriff auf das Browser-DOM erfolgt über die Bibliothek 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)
}

Erstellen und ausführen

Führen Sie ./gradlew wasmJsBrowserDevelopmentRun aus, um einen Entwicklungsserver mit Live-Reload zu starten. Für einen Production-Build: ./gradlew wasmJsBrowserDistribution. Die Ausgabe befindet sich unter build/dist/wasmJs/productionExecutable/.

JavaScript-Interop in Kotlin/WASM

Verwenden Sie @JsExport, um Kotlin-Funktionen für JavaScript verfügbar zu machen. Verwenden Sie external-Deklarationen, um aus Kotlin auf JavaScript-APIs zuzugreifen:

external fun console_log(msg: String): Unit

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

Kotlin/WASM im Vergleich zu Kotlin/JS

Kotlin/JS: wird zu JavaScript transpiliert – vollständiger Zugriff auf das JS-Ökosystem, ausgereifte Tools und Ausführung überall dort, wo JS ausgeführt wird. Kotlin/WASM: wird zu WebAssembly kompiliert – schnellere Ausführung bei rechenintensivem Code, typsicheres Speichermodell und erforderliche WasmGC-Browserunterstützung. Verwenden Sie Kotlin/JS für allgemeine Webanwendungen; ziehen Sie Kotlin/WASM für performancekritische Module in Betracht.

Compose für Web (WASM)

Das von JetBrains entwickelte Compose Multiplatform verwendet Kotlin/WASM, um Web-UIs mit denselben Compose-APIs zu erstellen, die auch auf Android und Desktop verwendet werden. Die gesamte UI wird über WASM in ein Canvas-Element gerendert:

// 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ärgröße und Optimierung

WASM-Binärdateien werden während Production-Builds mit wasm-opt optimiert. Tree-Shaking entfernt nicht verwendeten Code aus der Kotlin-Standardbibliothek. Ein typisches Kotlin/WASM-Hello-World-Beispiel ist gzip-komprimiert 200–400 KB groß. Aktivieren Sie binaryenArgs = listOf("-O3") für maximale Optimierung.

Code mit JVM und Native teilen

Da Kotlin/WASM ein KMP-Ziel ist, werden Domänenlogik, Algorithmen und Datenmodelle in commonMain automatisch geteilt. Plattformspezifischer Code (DOM-Manipulation, Datei-I/O) befindet sich in wasmJsMain und verwendet actual-Deklarationen.

Einschränkungen und Roadmap

Derzeitige Einschränkungen: kein direkter Zugriff auf NPM-Pakete (verwenden Sie JS-Interop), im Vergleich zu Kotlin/JS eingeschränkte Debugger-Unterstützung und erforderliche WasmGC-Browserunterstützung (in älteren Browsern nicht verfügbar). Das Kotlin-Team verbessert aktiv die Tools, die Performance und den Umfang der Standardbibliothek für WASM.

Kurzer Test

Auf welchen WebAssembly-Vorschlag zielt Kotlin/WASM (Kotlin 2.0+) ab, der Garbage-Collected-Objekte nativ in WASM ermöglicht?

Zusammenfassung: Kotlin/WASM

Wichtige Erkenntnisse:

Kotlin/WASM wird über den WasmGC-Vorschlag zu WebAssembly kompiliert (ab Kotlin 2.1 Stable)
Deklarieren Sie wasmJs { browser(); binaries.executable() } in der KMP-Gradle-Konfiguration
Der DOM-Zugriff erfolgt über kotlinx-browser; JavaScript-Interop über external und @JsExport
Erstellen Sie mit wasmJsBrowserDistribution; starten Sie den Entwicklungsserver mit wasmJsBrowserDevelopmentRun
Teilen Sie Domänenlogik in commonMain; plattformspezifischen Code in wasmJsMain

Häufig gestellte Fragen

Ist die Lektion „Kotlin/WASM: Kompilieren für WebAssembly im Browser“ kostenlos?

Ja — der vollständige Text von „Kotlin/WASM: Kompilieren für WebAssembly im Browser“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Kotlin Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Kotlin Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Kotlin/WASM: Kompilieren für WebAssembly im Browser“?

Zielen Sie auf Kotlin/WASM, integrieren Sie JavaScript und führen Sie den Code in einer Browserumgebung aus. Du übst Kotlin Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Kotlin Academy zu starten?

Keine Vorkenntnisse erforderlich. Kotlin Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Kotlin/WASM: Kompilieren für WebAssembly im Browser“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Kotlin Academy-Lektion Code schreiben und ausführen?

Ja. Jede Kotlin Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Kotlin/Native im Überblick: Ziele, Toolchain und Kompilierung
Speicherverwaltung in Kotlin/Native: Der neue MM
C-Interop mit cinterop und .def-Dateien
Kotlin/WASM: Kompilieren für WebAssembly im Browser

← Zurück zu Kotlin Academy