WebAssembly y Kotlin: Guía completa de integración

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Introducción a WebAssembly y Kotlin

El desarrollo web moderno requiere cada vez más rendimiento, especialmente para cálculos complejos, procesamiento de imágenes, juegos y aplicaciones científicas. WebAssembly (Wasm) es un formato binario de bajo nivel que se ejecuta en el navegador a una velocidad cercana a la nativa. Y Kotlin, gracias a su flexibilidad y soporte para múltiples plataformas, se convierte en un excelente candidato para la compilación a Wasm.

En este artículo, analizaremos en detalle cómo configurar un proyecto en Kotlin para compilar a WebAssembly, escribiremos ejemplos prácticos y revisaremos las mejores prácticas de optimización.

1. Configuración del entorno para Kotlin/Native y WebAssembly

Para trabajar con WebAssembly en Kotlin se utiliza Kotlin/Native, una tecnología que permite compilar código Kotlin en archivos binarios nativos, incluido Wasm. Veamos la configuración paso a paso.

Instalación de las herramientas necesarias

IntelliJ IDEA (versión Community o Ultimate) — el entorno de desarrollo principal.
Gradle (integrado en IDEA) — el sistema de compilación.
Emscripten SDK — herramienta para trabajar con Wasm (requerida para algunos escenarios avanzados).

Creación del proyecto

Cree un nuevo proyecto Gradle y agregue la siguiente configuración en build.gradle.kts:

plugins {    kotlin("multiplatform") version "1.9.22"    kotlin("plugin.serialization") version "1.9.22"}

kotlin {    wasm {        binaries.executable()        browser {            commonWebpackConfig {                cssSupport.enabled = true            }        }    }}

dependencies {    commonMainImplementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.2")}

Tenga en cuenta: para Kotlin 1.9+ se utiliza el target wasm (anteriormente era wasm32). Asegúrese de que la versión de Kotlin esté actualizada.

Estructura del proyecto

Después de la configuración, cree el archivo src/wasmMain/kotlin/Main.kt — este será el punto de entrada de su aplicación Wasm.

2. Escritura de la primera aplicación en Kotlin para WebAssembly

Escribamos una aplicación simple que calcule el factorial de un número e interactúe con JavaScript.

Código en Kotlin

// src/wasmMain/kotlin/Main.ktimport kotlinx.browser.documentimport kotlinx.browser.window

fun factorial(n: Int): Long {    var result = 1L    for (i in 1..n) {        result *= i    }    return result}

fun main() {    window.onload = {        val output = document.getElementById("output") ?: return@onload        val input = document.getElementById("number") ?: return@onload                // Ejemplo de llamada        val num = 10        output.textContent = "Factorial de $num = ${factorial(num)}"                // Agregamos un manejador para entrada dinámica        input.addEventListener("input", {            val value = (input as? org.w3c.dom.HTMLInputElement)?.value?.toIntOrNull() ?: 0            output.textContent = "Factorial de $value = ${factorial(value)}"        })    }}

Plantilla HTML para ejecutar

Cree el archivo src/wasmMain/resources/index.html:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Kotlin Wasm Demo</title></head><body>    <h1>Calculadora de Factorial en Kotlin/Wasm</h1>    <input type="number" id="number" value="10">    <p id="output">Cargando...</p>        <script src="https://unpkg.com/kotlin-wasm-bridge@latest/dist/kotlin-wasm-bridge.js"></script>    <script src="main.js"></script></body></html>