WebAssembly e Kotlin: Guia Completo de Integração

Treinador Online de Python para Iniciantes

Aprenda Python facilmente sem sobrecarga teórica. Resolva tarefas práticas com verificação automática e escreva código diretamente no navegador.

Start Course

Introdução ao WebAssembly e Kotlin

O desenvolvimento web moderno exige cada vez mais desempenho, especialmente para cálculos complexos, processamento de imagens, jogos e aplicações científicas. WebAssembly (Wasm) é um formato binário de baixo nível executado no navegador com velocidade próxima à nativa. E Kotlin, graças à sua flexibilidade e suporte a múltiplas plataformas, torna-se um excelente candidato para compilação em Wasm.

Neste artigo, vamos detalhar como configurar um projeto Kotlin para compilar em WebAssembly, escrever exemplos práticos e explorar as melhores práticas de otimização.

1. Configuração do ambiente para Kotlin/Native e WebAssembly

Para trabalhar com WebAssembly em Kotlin, utiliza-se Kotlin/Native — uma tecnologia que permite compilar código Kotlin em arquivos binários nativos, incluindo Wasm. Vamos ao passo a passo da configuração.

Instalação das ferramentas necessárias

IntelliJ IDEA (versão Community ou Ultimate) — ambiente de desenvolvimento principal.
Gradle (integrado ao IDEA) — sistema de build.
Emscripten SDK — ferramenta para trabalhar com Wasm (necessária para alguns cenários avançados).

Criação do projeto

Crie um novo projeto Gradle e adicione a seguinte configuração no 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")}

Observação: para Kotlin 1.9+, usa-se o target wasm (anteriormente era wasm32). Certifique-se de que a versão do Kotlin está atualizada.

Estrutura do projeto

Após a configuração, crie o arquivo src/wasmMain/kotlin/Main.kt — este será o ponto de entrada da sua aplicação Wasm.

2. Escrevendo a primeira aplicação Kotlin para WebAssembly

Vamos escrever uma aplicação simples que calcula o fatorial de um número e interage com JavaScript.

Código em 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                // Exemplo de chamada        val num = 10        output.textContent = "Fatorial $num = ${factorial(num)}"                // Adiciona manipulador para entrada dinâmica        input.addEventListener("input", {            val value = (input as? org.w3c.dom.HTMLInputElement)?.value?.toIntOrNull() ?: 0            output.textContent = "Fatorial $value = ${factorial(value)}"        })    }}

Template HTML para execução

Crie o arquivo src/wasmMain/resources/index.html:

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