Travail avec WebAssembly et Kotlin : de A à Z

Introduction : Pourquoi WebAssembly et Kotlin forment le duo idéal

Le développement web moderne exige non seulement de la vitesse, mais aussi de la sécurité. WebAssembly (Wasm) est un format binaire bas niveau qui s'exécute dans le navigateur à une vitesse proche du natif. Kotlin, quant à lui, est un langage multiplateforme moderne qui se compile en bytecode JVM, en JavaScript et, depuis peu, en WebAssembly.

La combinaison de Kotlin et WebAssembly ouvre de nouveaux horizons : vous pouvez écrire une logique complexe dans un langage familier avec un système de types puissant, puis l'exécuter dans n'importe quel navigateur moderne sans la surcharge de JavaScript. Dans cet article, nous allons détailler le travail avec WebAssembly et Kotlin de A à Z : de l'installation des outils au déploiement d'une application prête à l'emploi.

1. Configuration de l'environnement pour Kotlin/Wasm

Avant d'écrire du code, il est nécessaire de préparer l'environnement. Au moment de la rédaction de cet article, le support officiel de Kotlin/Wasm est en phase expérimentale (à partir de Kotlin 1.9.20). Pour travailler, vous aurez besoin de :

\n
• JDK 11 ou supérieur (JDK 17 recommandé)
\n
• IntelliJ IDEA (l'édition Community convient) ou tout éditeur prenant en charge Gradle
\n
• La dernière version de Kotlin (1.9.22+).
\n

Création du projet

Créons un nouveau projet Gradle avec une configuration multiplateforme. Dans le fichier build.gradle.kts, spécifiez les plugins et la cible Wasm :

plugins {\n    kotlin("multiplatform") version "1.9.22"\n    kotlin("plugin.serialization") version "1.9.22" // optionnel\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}

Après la synchronisation de Gradle, la structure du projet sera prête pour la compilation en Wasm.

2. Écrire notre premier programme en Kotlin/Wasm

Créons un module simple qui calcule la factorielle d'un nombre — un exemple idéal pour démontrer les performances de Wasm.

Code en Kotlin

Dans le dossier src/wasmJsMain/kotlin, créez un fichier Main.kt :

import kotlinx.coroutines.*\n\n// Fonction qui sera exportée vers Wasm\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// Point d'entrée pour le navigateur\nfun main() {\n    println("Kotlin/Wasm chargé !")\n    // Utilisation des coroutines pour un appel asynchrone\n    GlobalScope.launch {\n        val result = factorial(10)\n        println("Factorielle de 10 : $result")\n    }\n}

L'annotation @WasmExport rend la fonction accessible depuis JavaScript. Notez que tous les types Kotlin ne peuvent pas être exportés — les primitives, les chaînes et les tableaux sont pris en charge.

Compilation et exécution

Exécutez la commande Gradle :

./gradlew wasmJsBrowserDevelopmentRun

Après la compilation, un navigateur s'ouvrira avec la console, où vous verrez la sortie. Si tout s'est bien passé, vous venez de lancer Kotlin dans WebAssembly !

3. Interaction avec JavaScript : le pont entre deux mondes

L'une des fonctionnalités clés de Kotlin/Wasm est l'interaction bidirectionnelle avec JavaScript. Vous pouvez appeler des fonctions JS depuis Kotlin et vice versa.

Appel de JavaScript depuis Kotlin

Ajoutons dans Main.kt du code qui utilise l'API DOM du navigateur :

import org.w3c.dom.*\n\n@WasmExport\nfun showAlert(message: String) {\n    // Utilisation de l'objet global window\n    window.alert("Kotlin go