Trabalhando com WebAssembly e Kotlin: do A ao Z

Introdução: Por que WebAssembly e Kotlin são a dupla ideal

O desenvolvimento web moderno exige não apenas velocidade, mas também segurança. WebAssembly (Wasm) é um formato binário de baixo nível que é executado no navegador com velocidade próxima à nativa. Kotlin, por sua vez, é uma linguagem multiplataforma moderna que compila para bytecode JVM, JavaScript e, mais recentemente, para WebAssembly.

A combinação de Kotlin e WebAssembly abre novos horizontes: você pode escrever lógica complexa em uma linguagem familiar com um poderoso sistema de tipos e, em seguida, executá-la em qualquer navegador moderno sem a sobrecarga do JavaScript. Neste artigo, abordaremos o trabalho com WebAssembly e Kotlin do A ao Z: desde a instalação das ferramentas até a implantação de uma aplicação pronta.

1. Configuração do ambiente para Kotlin/Wasm

Antes de escrever código, é necessário preparar o ambiente. No momento da redação deste artigo, o suporte oficial para Kotlin/Wasm está em fase experimental (a partir do Kotlin 1.9.20). Para trabalhar, você precisará de:

\n
• JDK 11 ou superior (recomendado JDK 17)
\n
• IntelliJ IDEA (Community Edition é suficiente) ou qualquer editor com suporte a Gradle
\n
• Última versão do Kotlin (1.9.22+).
\n

Criação do projeto

Vamos criar um novo projeto Gradle com configuração multiplataforma. No arquivo build.gradle.kts, especifique os plugins e o alvo 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}

Após a sincronização do Gradle, a estrutura do projeto estará pronta para compilar para Wasm.

2. Escrevendo o primeiro programa em Kotlin/Wasm

Vamos criar um módulo simples que calcula o fatorial de um número — um exemplo ideal para demonstrar o desempenho do Wasm.

Código em Kotlin

Na pasta src/wasmJsMain/kotlin, crie o arquivo Main.kt:

import kotlinx.coroutines.*\n\n// Função que será exportada para 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// Ponto de entrada para o navegador\nfun main() {\n    println("Kotlin/Wasm carregado!")\n    // Usando coroutines para chamada assíncrona\n    GlobalScope.launch {\n        val result = factorial(10)\n        println("Fatorial de 10: $result")\n    }\n}

A anotação @WasmExport torna a função acessível a partir do JavaScript. Observe: nem todos os tipos Kotlin podem ser exportados — primitivos, strings e arrays são suportados.

Compilação e execução

Execute o comando Gradle:

./gradlew wasmJsBrowserDevelopmentRun

Após a compilação, um navegador será aberto com o console, onde você verá a saída. Se tudo ocorrer bem, você acabou de executar Kotlin em WebAssembly!

3. Interação com JavaScript: ponte entre dois mundos

Uma das principais capacidades do Kotlin/Wasm é a interação bidirecional com JavaScript. Você pode chamar funções JS a partir do Kotlin e vice-versa.

Chamando JavaScript a partir do Kotlin

Vamos adicionar ao Main.kt um código que usa a API DOM do navegador:

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