Kotlin Academy · Lezione

Kotlin/WASM: compilazione in WebAssembly per il browser

Destini il codice a Kotlin/WASM, lo integri con JavaScript e lo esegua in un ambiente browser.

Lezione 4 di 413 passaggi

Kotlin/WASM: compilazione in WebAssembly per il browser è una lezione Kotlin Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Kotlin Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Kotlin Academy include 4 lezioni in totale.

Che cos'è Kotlin/WASM?

Kotlin/WASM è una destinazione di compilazione Kotlin che produce moduli WebAssembly (.wasm) da eseguire nei browser e nei runtime WASM lato server. È separata da Kotlin/JS e offre prestazioni migliori e dimensioni dei binari più contenute per il codice a elevato carico computazionale.

Stato attuale (Kotlin 2.0)

A partire da Kotlin 2.0, Kotlin/WASM è destinato alla proposta WasmGC, uno standard W3C che porta gli oggetti con garbage collection nativi in WebAssembly. WasmGC è supportato da Chrome 119+, Firefox 120+ e Safari 18+. Kotlin/WASM è stabile a partire da Kotlin 2.1.

Configurare una destinazione Kotlin/WASM

Nel file build.gradle.kts del progetto KMP, dichiari la destinazione WASM e un binario eseguibile:

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

Scrivere codice Kotlin per WASM

Il codice Kotlin/WASM è simile al normale codice Kotlin. Può condividere la logica con le altre destinazioni KMP tramite commonMain. Per accedere al DOM del browser utilizzi la libreria 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)
}

Compilare ed eseguire

Esegua ./gradlew wasmJsBrowserDevelopmentRun per avviare un server di sviluppo con ricaricamento automatico. Per una build di produzione, esegua ./gradlew wasmJsBrowserDistribution. L'output si trova in build/dist/wasmJs/productionExecutable/.

Interoperabilità JavaScript in Kotlin/WASM

Utilizzi @JsExport per esporre le funzioni Kotlin a JavaScript. Utilizzi le dichiarazioni external per chiamare le API JavaScript da Kotlin:

external fun console_log(msg: String): Unit

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

Kotlin/WASM e Kotlin/JS a confronto

Kotlin/JS: transpila in JavaScript, offre accesso all'intero ecosistema JS, dispone di strumenti maturi ed esegue il codice ovunque sia disponibile JavaScript. Kotlin/WASM: compila in WebAssembly, offre un'esecuzione più rapida per il codice a elevato carico computazionale e un modello di memoria sicuro rispetto ai tipi, ma richiede il supporto del browser a WasmGC. Utilizzi Kotlin/JS per le applicazioni web generiche; consideri Kotlin/WASM per i moduli critici per le prestazioni.

Compose per il Web (WASM)

Compose Multiplatform di JetBrains è destinato a Kotlin/WASM per creare interfacce web con le stesse API Compose utilizzate su Android e Desktop. L'intera interfaccia viene visualizzata in un elemento Canvas tramite 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!")
}

Dimensioni e ottimizzazione dei binari

I binari WASM vengono ottimizzati con wasm-opt durante le build di produzione. Il tree shaking rimuove il codice inutilizzato della libreria standard Kotlin. Un tipico hello-world Kotlin/WASM occupa 200–400 KB dopo la compressione gzip. Abiliti binaryenArgs = listOf("-O3") per ottenere la massima ottimizzazione.

Condividere il codice con JVM e Native

Poiché Kotlin/WASM è una destinazione KMP, la logica di dominio, gli algoritmi e i modelli di dati in commonMain vengono condivisi automaticamente. Il codice specifico della piattaforma, come la manipolazione del DOM e l'I/O dei file, risiede in wasmJsMain utilizzando dichiarazioni actual.

Limitazioni e roadmap

Limitazioni attuali: nessun accesso diretto ai package NPM, quindi utilizzi l'interoperabilità JS; supporto del debugger più limitato rispetto a Kotlin/JS; è richiesto il supporto del browser a WasmGC, non disponibile nei browser meno recenti. Il team Kotlin sta migliorando attivamente gli strumenti, le prestazioni e la copertura della libreria standard per WASM.

Verifica rapida

Quale proposta WebAssembly viene utilizzata da Kotlin/WASM (Kotlin 2.0 e versioni successive) e abilita gli oggetti con garbage collection nativi in WASM?

Rispondi nella lezione interattiva

Riepilogo: Kotlin/WASM

Punti chiave:

Kotlin/WASM compila in WebAssembly tramite la proposta WasmGC, stabile in Kotlin 2.1
Dichiari wasmJs { browser(); binaries.executable() } nella configurazione Gradle KMP
Acceda al DOM tramite kotlinx-browser; utilizzi external e @JsExport per l'interoperabilità JS
Crei la build con wasmJsBrowserDistribution e avvii il server di sviluppo con wasmJsBrowserDevelopmentRun
Condivida la logica di dominio in commonMain e il codice specifico della piattaforma in wasmJsMain

Gratis per iniziare

Impara Kotlin con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 51
Lezioni: 203

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Kotlin/WASM: compilazione in WebAssembly per il browser» è gratuita?

Sì — il testo completo di «Kotlin/WASM: compilazione in WebAssembly per il browser» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Kotlin Academy, passa a CoddyKit PRO. Il corso Kotlin Academy include 4 lezioni in totale.

Cosa imparerò in «Kotlin/WASM: compilazione in WebAssembly per il browser»?

Destini il codice a Kotlin/WASM, lo integri con JavaScript e lo esegua in un ambiente browser. Eserciti Kotlin Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Kotlin Academy?

Non è richiesta alcuna esperienza precedente. Kotlin Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Kotlin/WASM: compilazione in WebAssembly per il browser»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Kotlin Academy?

Sì. Ogni lezione Kotlin Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Panoramica di Kotlin/Native: target, toolchain e compilazione
Gestione della memoria in Kotlin/Native: il nuovo MM
Interop con C tramite cinterop e file .def
Kotlin/WASM: compilazione in WebAssembly per il browser

← Torna a Kotlin Academy