Kotlin Academy · Leçon

Kotlin/WASM : compiler vers WebAssembly pour le navigateur

Ciblez Kotlin/WASM, intégrez-le à JavaScript et exécutez-le dans un environnement de navigateur.

Kotlin/WASM : compiler vers WebAssembly pour le navigateur est une leçon Kotlin Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Kotlin Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Kotlin Academy comprend 4 leçons au total.

Qu'est-ce que Kotlin/WASM ?

Kotlin/WASM est une cible de compilation Kotlin qui produit des modules WebAssembly (.wasm) exécutables dans les navigateurs et les environnements d'exécution WASM côté serveur. Il est distinct de Kotlin/JS et offre de meilleures performances ainsi qu'une taille binaire réduite pour le code nécessitant beaucoup de calculs.

État actuel (Kotlin 2.0)

Depuis Kotlin 2.0, Kotlin/WASM cible la proposition WasmGC, une norme du W3C qui introduit les objets gérés nativement par le ramasse-miettes dans WebAssembly. WasmGC est pris en charge par Chrome 119+, Firefox 120+ et Safari 18+. Kotlin/WASM est stable depuis Kotlin 2.1.

Configurer une cible Kotlin/WASM

Dans votre build.gradle.kts KMP, déclarez la cible WASM et un binaire exécutable :

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

Écrire du code Kotlin pour WASM

Le code Kotlin/WASM ressemble à du Kotlin classique. Vous pouvez partager la logique avec d'autres cibles KMP via commonMain. L'accès au DOM du navigateur se fait avec la bibliothèque 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)
}

Compiler et exécuter

Exécutez ./gradlew wasmJsBrowserDevelopmentRun pour démarrer un serveur de développement avec rechargement à chaud. Pour une compilation de production : ./gradlew wasmJsBrowserDistribution. La sortie se trouve dans build/dist/wasmJs/productionExecutable/.

Interopérabilité JavaScript dans Kotlin/WASM

Utilisez @JsExport pour exposer des fonctions Kotlin à JavaScript. Utilisez des déclarations external pour appeler des API JavaScript depuis Kotlin :

external fun console_log(msg: String): Unit

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

Kotlin/WASM ou Kotlin/JS

Kotlin/JS : transpose le code en JavaScript — accès à tout l'écosystème JS, outillage mature et exécution partout où JS s'exécute. Kotlin/WASM : compile le code en WebAssembly — exécution plus rapide pour le code nécessitant beaucoup de calculs, modèle mémoire sûr du point de vue des types et prise en charge de WasmGC requise dans le navigateur. Utilisez Kotlin/JS pour les applications web générales ; envisagez Kotlin/WASM pour les modules critiques en matière de performances.

Compose pour le Web (WASM)

Compose Multiplatform de JetBrains cible Kotlin/WASM pour créer des interfaces web avec les mêmes API Compose que celles utilisées sur Android et ordinateur de bureau. L'interface entière est rendue dans un élément Canvas 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!")
}

Taille binaire et optimisation

Les binaires WASM sont optimisés avec wasm-opt pendant les compilations de production. L'élimination du code supprime le code inutilisé de la bibliothèque standard Kotlin. Un hello-world Kotlin/WASM typique pèse entre 200 et 400 Ko après compression gzip. Activez binaryenArgs = listOf("-O3") pour une optimisation maximale.

Partager du code avec la JVM et le code natif

Comme Kotlin/WASM est une cible KMP, la logique métier, les algorithmes et les modèles de données de commonMain sont automatiquement partagés. Le code propre à la plateforme, comme la manipulation du DOM et les entrées-sorties de fichiers, se trouve dans wasmJsMain à l'aide de déclarations actual.

Limitations et feuille de route

Limitations actuelles : aucun accès direct aux paquets NPM (utilisez l'interopérabilité JS), prise en charge limitée du débogueur par rapport à Kotlin/JS et prise en charge de WasmGC requise dans le navigateur (indisponible dans les anciens navigateurs). L'équipe Kotlin améliore activement les outils, les performances et la couverture de la bibliothèque standard pour WASM.

Vérification rapide

Quelle proposition WebAssembly Kotlin/WASM (Kotlin 2.0 ou version ultérieure) cible-t-il, permettant aux objets gérés par le ramasse-miettes d'être pris en charge nativement dans WASM ?

Récapitulatif : Kotlin/WASM

Points clés :

Kotlin/WASM compile le code en WebAssembly via la proposition WasmGC (stable dans Kotlin 2.1)
Déclarez wasmJs { browser(); binaries.executable() } dans la configuration Gradle KMP
Accédez au DOM via kotlinx-browser ; utilisez external et @JsExport pour l'interopérabilité JS
Compilez avec wasmJsBrowserDistribution ; utilisez wasmJsBrowserDevelopmentRun pour le serveur de développement
Partagez la logique métier dans commonMain ; placez les éléments propres à la plateforme dans wasmJsMain

Questions Fréquemment Posées

La leçon « Kotlin/WASM : compiler vers WebAssembly pour le navigateur » est-elle gratuite ?

Oui — le texte complet de « Kotlin/WASM : compiler vers WebAssembly pour le navigateur » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Kotlin Academy, passe à CoddyKit PRO. Le cours Kotlin Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Kotlin/WASM : compiler vers WebAssembly pour le navigateur » ?

Ciblez Kotlin/WASM, intégrez-le à JavaScript et exécutez-le dans un environnement de navigateur. Tu pratiques Kotlin Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Kotlin Academy ?

Aucune expérience préalable n'est requise. Kotlin Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Kotlin/WASM : compiler vers WebAssembly pour le navigateur » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Kotlin Academy ?

Oui. Chaque leçon Kotlin Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Présentation de Kotlin/Native : cibles, chaîne d’outils et compilation
Gestion de la mémoire dans Kotlin/Native : le nouveau MM
Interopérabilité avec C grâce à cinterop et aux fichiers .def
Kotlin/WASM : compiler vers WebAssembly pour le navigateur

← Retour à Kotlin Academy