Trabajo con WebAssembly y Kotlin: de la A a la Z

Introducción: Por qué WebAssembly y Kotlin son la pareja ideal

El desarrollo web moderno requiere no solo velocidad, sino también seguridad. WebAssembly (Wasm) es un formato binario de bajo nivel que se ejecuta en el navegador a una velocidad cercana a la nativa. Kotlin, por su parte, es un lenguaje moderno multiplataforma que se compila a bytecode de JVM, JavaScript y, más recientemente, a WebAssembly.

La combinación de Kotlin y WebAssembly abre nuevos horizontes: puede escribir lógica compleja en un lenguaje familiar con un potente sistema de tipos y luego ejecutarla en cualquier navegador moderno sin la sobrecarga de JavaScript. En este artículo, analizaremos el trabajo con WebAssembly y Kotlin de la A a la Z: desde la instalación de herramientas hasta el despliegue de una aplicación completa.

1. Configuración del entorno para Kotlin/Wasm

Antes de escribir código, es necesario preparar el entorno. Al momento de escribir este artículo, el soporte oficial de Kotlin/Wasm se encuentra en fase experimental (a partir de Kotlin 1.9.20). Para trabajar, necesitará:

\n
• JDK 11 o superior (se recomienda JDK 17)
\n
• IntelliJ IDEA (la Community Edition es suficiente) o cualquier editor con soporte para Gradle
\n
• La última versión de Kotlin (1.9.22+).
\n

Creación del proyecto

Crearemos un nuevo proyecto Gradle con configuración multiplataforma. En el archivo build.gradle.kts, especifique los plugins y el objetivo Wasm:

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

Después de sincronizar Gradle, la estructura del proyecto estará lista para compilar a Wasm.

2. Escribimos nuestro primer programa en Kotlin/Wasm

Crearemos un módulo simple que calcula el factorial de un número: un ejemplo ideal para demostrar el rendimiento de Wasm.

Código en Kotlin

En la carpeta src/wasmJsMain/kotlin, cree un archivo Main.kt:

import kotlinx.coroutines.*\n\n// Función que será exportada a 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// Punto de entrada para el navegador\nfun main() {\n    println("¡Kotlin/Wasm cargado!")\n    // Usamos corrutinas para una llamada asíncrona\n    GlobalScope.launch {\n        val result = factorial(10)\n        println("Factorial de 10: $result")\n    }\n}

La anotación @WasmExport hace que la función sea accesible desde JavaScript. Tenga en cuenta: no todos los tipos de Kotlin se pueden exportar; se admiten primitivos, cadenas y arrays.

Compilación y ejecución

Ejecute el comando de Gradle:

./gradlew wasmJsBrowserDevelopmentRun

Después de la compilación, se abrirá un navegador con la consola, donde verá la salida. Si todo salió bien, ¡acaba de ejecutar Kotlin en WebAssembly!

3. Interacción con JavaScript: puente entre dos mundos

Una de las capacidades clave de Kotlin/Wasm es la interacción bidireccional con JavaScript. Puede llamar a funciones JS desde Kotlin y viceversa.

Llamar a JavaScript desde Kotlin

Agreguemos en Main.kt código que use la API DOM del navegador:

import org.w3c.dom.*\n\n@WasmExport\nfun showAlert(message: String) {\n    // Usamos el objeto global window\n    window.alert("Kotlin go