0Pricing
Kotlin Academy · Lección

Kotlin/WASM: compilación a WebAssembly para el navegador

Dirija Kotlin/WASM, intégrelo con JavaScript y ejecútelo en un entorno de navegador

Kotlin/WASM: compilación a WebAssembly para el navegador es una lección gratuita de Kotlin Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Kotlin Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Kotlin Academy incluye 4 lecciones en total.

¿Qué es Kotlin/WASM?

Kotlin/WASM es un destino de compilación de Kotlin que produce módulos de WebAssembly (.wasm) para ejecutarse en navegadores y entornos de ejecución WASM del lado del servidor. Es independiente de Kotlin/JS y ofrece un mejor rendimiento y un tamaño binario menor para el código con un uso intensivo de cálculos.

Estado actual (Kotlin 2.0)

A partir de Kotlin 2.0, Kotlin/WASM tiene como objetivo la propuesta WasmGC, un estándar del W3C que incorpora objetos con recolección de basura de forma nativa en WebAssembly. WasmGC es compatible con Chrome 119 o posterior, Firefox 120 o posterior y Safari 18 o posterior. Kotlin/WASM es estable desde Kotlin 2.1.

Configuración de un destino Kotlin/WASM

En el archivo build.gradle.kts de su KMP, declare el destino WASM y un binario ejecutable:

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

Escritura de código Kotlin para WASM

El código Kotlin/WASM tiene el mismo aspecto que el código Kotlin habitual. Puede compartir la lógica con otros destinos de KMP mediante commonMain. El acceso al DOM del navegador se realiza mediante la biblioteca 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)
}

Compilación y ejecución

Ejecute ./gradlew wasmJsBrowserDevelopmentRun para iniciar un servidor de desarrollo con recarga en vivo. Para una compilación de producción: ./gradlew wasmJsBrowserDistribution. La salida se encuentra en build/dist/wasmJs/productionExecutable/.

Interoperabilidad con JavaScript en Kotlin/WASM

Use @JsExport para exponer funciones de Kotlin a JavaScript. Use declaraciones external para llamar a las API de JavaScript desde Kotlin:

external fun console_log(msg: String): Unit

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

Kotlin/WASM frente a Kotlin/JS

Kotlin/JS: transpila a JavaScript — ofrece acceso a todo el ecosistema de JS, herramientas maduras y se ejecuta en cualquier entorno donde se ejecute JS. Kotlin/WASM: compila a WebAssembly — ofrece una ejecución más rápida para código con muchos cálculos, un modelo de memoria con seguridad de tipos y requiere compatibilidad del navegador con WasmGC. Use Kotlin/JS para aplicaciones web generales; considere Kotlin/WASM para módulos críticos para el rendimiento.

Compose for Web (WASM)

El Compose Multiplatform de JetBrains tiene como destino Kotlin/WASM para crear interfaces web con las mismas API de Compose que se usan en Android y Desktop. Toda la interfaz se renderiza en un elemento Canvas mediante 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!")
}

Tamaño binario y optimización

Los binarios WASM se optimizan con wasm-opt durante las compilaciones de producción. La eliminación de código no utilizado mediante tree-shaking elimina el código no utilizado de la biblioteca estándar de Kotlin. Una aplicación Kotlin/WASM hello-world típica ocupa entre 200 y 400 KB comprimida con gzip. Habilite binaryenArgs = listOf("-O3") para obtener la máxima optimización.

Uso compartido de código con JVM y Native

Como Kotlin/WASM es un destino de KMP, la lógica de dominio, los algoritmos y los modelos de datos de commonMain se comparten automáticamente. El código específico de la plataforma, como la manipulación del DOM y la E/S de archivos, se encuentra en wasmJsMain mediante declaraciones actual.

Limitaciones y hoja de ruta

Limitaciones actuales: no hay acceso directo a paquetes de NPM (use la interoperabilidad con JS), la compatibilidad con el depurador es limitada en comparación con Kotlin/JS y se requiere compatibilidad del navegador con WasmGC, que no está disponible en navegadores antiguos. El equipo de Kotlin trabaja activamente para mejorar las herramientas, el rendimiento y la cobertura de la biblioteca estándar para WASM.

Comprobación rápida

¿A qué propuesta de WebAssembly se dirige Kotlin/WASM (Kotlin 2.0 o posterior) para habilitar objetos con recolección de basura de forma nativa en WASM?

Resumen: Kotlin/WASM

Aspectos clave:

  • Kotlin/WASM compila a WebAssembly mediante la propuesta WasmGC, estable en Kotlin 2.1
  • Declare wasmJs { browser(); binaries.executable() } en la configuración de Gradle de KMP
  • Acceda al DOM mediante kotlinx-browser; use external y @JsExport para la interoperabilidad con JS
  • Compile con wasmJsBrowserDistribution; use wasmJsBrowserDevelopmentRun para iniciar el servidor de desarrollo
  • Comparta la lógica de dominio en commonMain; coloque las particularidades de la plataforma en wasmJsMain

Preguntas frecuentes

¿La lección «Kotlin/WASM: compilación a WebAssembly para el navegador» es gratis?

Sí — el texto completo de «Kotlin/WASM: compilación a WebAssembly para el navegador» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Kotlin Academy, actualiza a CoddyKit PRO. El curso de Kotlin Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Kotlin/WASM: compilación a WebAssembly para el navegador»?

Dirija Kotlin/WASM, intégrelo con JavaScript y ejecútelo en un entorno de navegador Practicas Kotlin Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Kotlin Academy?

No se requiere experiencia previa. Kotlin Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Kotlin/WASM: compilación a WebAssembly para el navegador»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Kotlin Academy?

Sí. Cada lección de Kotlin Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Introducción a Kotlin/Native: destinos, cadena de herramientas y compilación
  2. Gestión de memoria en Kotlin/Native: el nuevo MM
  3. Interoperabilidad con C mediante cinterop y archivos .def
  4. Kotlin/WASM: compilación a WebAssembly para el navegador
← Volver a Kotlin Academy