0Pricing
Kotlin Academy · Aula

Kotlin/WASM: compilação para WebAssembly no navegador

Direcione o Kotlin/WASM, integre-o ao JavaScript e execute-o em um ambiente de navegador.

Kotlin/WASM: compilação para WebAssembly no navegador é uma aula grátis de Kotlin Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Kotlin Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Kotlin Academy inclui 4 aulas no total.

O que é Kotlin/WASM?

Kotlin/WASM é um destino de compilação do Kotlin que produz módulos WebAssembly (.wasm) para execução em navegadores e ambientes de execução WASM no servidor. Ele é separado de Kotlin/JS e oferece melhor desempenho e um tamanho de binário menor para código com uso intensivo de cálculos.

Status atual (Kotlin 2.0)

A partir do Kotlin 2.0, Kotlin/WASM tem como destino a proposta WasmGC — um padrão W3C que traz objetos com coleta de lixo nativa para WebAssembly. WasmGC é compatível com Chrome 119+, Firefox 120+ e Safari 18+. Kotlin/WASM é estável a partir do Kotlin 2.1.

Configurando um destino Kotlin/WASM

Em seu build.gradle.kts do KMP, declare o destino WASM e um binário executável:

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

Escrevendo código Kotlin para WASM

O código Kotlin/WASM se parece com o Kotlin comum. Você pode compartilhar a lógica com outros destinos KMP por meio de commonMain. O acesso ao DOM do navegador é feito pela 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)
}

Compilando e executando

Execute ./gradlew wasmJsBrowserDevelopmentRun para iniciar um servidor de desenvolvimento com recarregamento automático. Para uma compilação de produção: ./gradlew wasmJsBrowserDistribution. A saída está em build/dist/wasmJs/productionExecutable/.

Interoperabilidade com JavaScript em Kotlin/WASM

Use @JsExport para expor funções Kotlin ao JavaScript. Use declarações external para chamar APIs JavaScript a partir do Kotlin:

external fun console_log(msg: String): Unit

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

Kotlin/WASM versus Kotlin/JS

Kotlin/JS: transpila para JavaScript — acesso a todo o ecossistema de JS, ferramentas maduras e execução em qualquer lugar onde JS seja executado. Kotlin/WASM: compila para WebAssembly — execução mais rápida para código com muitos cálculos, modelo de memória seguro quanto aos tipos e necessidade de compatibilidade do navegador com WasmGC. Use Kotlin/JS para aplicações web gerais; considere Kotlin/WASM para módulos críticos em termos de desempenho.

Compose para a Web (WASM)

O Compose Multiplatform da JetBrains tem como destino Kotlin/WASM para criar interfaces web com as mesmas APIs do Compose usadas no Android e no Desktop. Toda a interface é renderizada em um elemento Canvas por meio de 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!")
}

Tamanho e otimização do binário

Os binários WASM são otimizados com wasm-opt durante as compilações de produção. A eliminação de código não utilizado remove o código não utilizado da biblioteca padrão do Kotlin. Um exemplo típico de olá, mundo em Kotlin/WASM tem 200–400 KB compactados com gzip. Ative binaryenArgs = listOf("-O3") para obter a otimização máxima.

Compartilhando código com JVM e código nativo

Como Kotlin/WASM é um destino KMP, a lógica de domínio, os algoritmos e os modelos de dados em commonMain são compartilhados automaticamente. O código específico da plataforma (manipulação do DOM, E/S de arquivos) fica em wasmJsMain usando declarações actual.

Limitações e roteiro

Limitações atuais: não há acesso direto a pacotes NPM (use a interoperabilidade com JS), o suporte do depurador é limitado em comparação com Kotlin/JS e é necessária compatibilidade do navegador com WasmGC (indisponível em navegadores mais antigos). A equipe do Kotlin está aprimorando ativamente as ferramentas, o desempenho e a cobertura da biblioteca padrão para WASM.

Verificação rápida

Qual proposta do WebAssembly é o destino de Kotlin/WASM (Kotlin 2.0+), permitindo objetos com coleta de lixo nativa em WASM?

Resumo: Kotlin/WASM

Principais conclusões:

  • Kotlin/WASM compila para WebAssembly por meio da proposta WasmGC (estável no Kotlin 2.1)
  • Declare wasmJs { browser(); binaries.executable() } na configuração do Gradle do KMP
  • Acesso ao DOM por meio de kotlinx-browser; interoperabilidade com JS por meio de external e @JsExport
  • Compile com wasmJsBrowserDistribution; use o servidor de desenvolvimento com wasmJsBrowserDevelopmentRun
  • Compartilhe a lógica de domínio em commonMain; mantenha as especificidades da plataforma em wasmJsMain

Perguntas Frequentes

A aula “Kotlin/WASM: compilação para WebAssembly no navegador” é grátis?

Sim — o texto completo de “Kotlin/WASM: compilação para WebAssembly no navegador” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Kotlin Academy, atualize para CoddyKit PRO. O curso de Kotlin Academy inclui 4 aulas no total.

O que vou aprender em “Kotlin/WASM: compilação para WebAssembly no navegador”?

Direcione o Kotlin/WASM, integre-o ao JavaScript e execute-o em um ambiente de navegador. Você pratica Kotlin Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Kotlin Academy?

Nenhuma experiência prévia é necessária. Kotlin Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Kotlin/WASM: compilação para WebAssembly no navegador”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Kotlin Academy?

Sim. Cada aula de Kotlin Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Visão geral do Kotlin/Native: destinos, cadeia de ferramentas e compilação
  2. Gerenciamento de memória no Kotlin/Native: o novo MM
  3. Interoperação com C usando cinterop e arquivos .def
  4. Kotlin/WASM: compilação para WebAssembly no navegador
← Voltar para Kotlin Academy