Arbeit mit WebAssembly und Kotlin: von A bis Z

Einleitung: Warum WebAssembly und Kotlin das ideale Paar sind

Moderne Webentwicklung erfordert nicht nur Geschwindigkeit, sondern auch Sicherheit. WebAssembly (Wasm) ist ein binäres Low-Level-Format, das im Browser mit nahezu nativer Geschwindigkeit ausgeführt wird. Kotlin wiederum ist eine moderne, plattformübergreifende Sprache, die in JVM-Bytecode, JavaScript und seit kurzem auch in WebAssembly kompiliert wird.

Die Kombination von Kotlin und WebAssembly eröffnet neue Horizonte: Sie können komplexe Logik in einer vertrauten Sprache mit einem leistungsstarken Typsystem schreiben und dann in jedem modernen Browser ohne JavaScript-Overhead ausführen. In diesem Artikel behandeln wir die Arbeit mit WebAssembly und Kotlin von A bis Z: von der Installation der Werkzeuge bis zur Bereitstellung einer fertigen Anwendung.

1. Einrichtung der Umgebung für Kotlin/Wasm

Bevor Sie Code schreiben, müssen Sie die Umgebung vorbereiten. Zum Zeitpunkt der Erstellung dieses Artikels befindet sich die offizielle Unterstützung für Kotlin/Wasm in der Experimentierphase (ab Kotlin 1.9.20). Für die Arbeit benötigen Sie:

\n
• JDK 11 oder höher (JDK 17 wird empfohlen)
\n
• IntelliJ IDEA (Community Edition ist ausreichend) oder einen beliebigen Editor mit Gradle-Unterstützung
\n
• Die neueste Version von Kotlin (1.9.22+).
\n

Projekterstellung

Erstellen wir ein neues Gradle-Projekt mit einer plattformübergreifenden Konfiguration. Geben Sie in der Datei build.gradle.kts die Plugins und das Wasm-Ziel an:

plugins {\n    kotlin("multiplatform") version "1.9.22"\n    kotlin("plugin.serialization") version "1.9.22" // optional\n}\n\nkotlin {\n    wasmJs {\n        binaries.executable()\n        nodejs()\n        browser {\n            commonWebpackConfig {\n                cssSupport {\n                    enabled.set(true)\n                }\n            }\n        }\n    }\n\n    sourceSets {\n        val commonMain by getting\n        val wasmJsMain by getting {\n            dependencies {\n                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")\n            }\n        }\n    }\n}

Nach der Gradle-Synchronisation ist die Projektstruktur bereit für die Kompilierung in Wasm.

2. Unser erstes Programm in Kotlin/Wasm schreiben

Erstellen wir ein einfaches Modul, das die Fakultät einer Zahl berechnet – ein ideales Beispiel zur Demonstration der Wasm-Leistung.

Kotlin-Code

Erstellen Sie im Ordner src/wasmJsMain/kotlin eine Datei Main.kt:

import kotlinx.coroutines.*\n\n// Funktion, die in Wasm exportiert wird\n@WasmExport\nfun factorial(n: Int): Long {\n    if (n < 0) return -1L\n    var result = 1L\n    for (i in 2..n) {\n        result *= i\n    }\n    return result\n}\n\n// Einstiegspunkt für den Browser\nfun main() {\n    println("Kotlin/Wasm geladen!")\n    // Verwendung von Koroutinen für asynchrone Aufrufe\n    GlobalScope.launch {\n        val result = factorial(10)\n        println("Fakultät von 10: $result")\n    }\n}

Die Annotation @WasmExport macht die Funktion aus JavaScript zugänglich. Beachten Sie: Nicht alle Kotlin-Typen können exportiert werden – unterstützt werden Primitive, Strings und Arrays.

Build und Ausführung

Führen Sie den Gradle-Befehl aus:

./gradlew wasmJsBrowserDevelopmentRun

Nach dem Build öffnet sich ein Browser mit einer Konsole, in der Sie die Ausgabe sehen. Wenn alles erfolgreich war, haben Sie gerade Kotlin in WebAssembly ausgeführt!

3. Interaktion mit JavaScript: Brücke zwischen zwei Welten

Eine der Schlüsselfunktionen von Kotlin/Wasm ist die bidirektionale Interaktion mit JavaScript. Sie können JS-Funktionen aus Kotlin aufrufen und umgekehrt.

JavaScript aus Kotlin aufrufen

Fügen wir in Main.kt Code hinzu, der die DOM-API des Browsers verwendet:

import org.w3c.dom.*\n\n@WasmExport\nfun showAlert(message: String) {\n    // Verwendung des globalen window-Objekts\n    window.alert("Kotlin gr