Trabalhando com WebAssembly e Go: do A ao Z — guia completo

Introdução ao WebAssembly e Go

WebAssembly (WASM) é um formato binário de baixo nível que permite executar código escrito em linguagens diferentes do JavaScript diretamente no navegador. Go (Golang), com sua poderosa biblioteca padrão e excelente suporte a concorrência, tornou-se um dos melhores candidatos para compilação em WASM. Neste artigo, vamos abordar o processo de trabalho com WebAssembly em Go, desde a instalação das ferramentas até a implantação da solução final.

As aplicações web modernas exigem alto desempenho, e o WebAssembly oferece a possibilidade de executar código escrito em Go com velocidade quase nativa. Isso abre portas para transferir cálculos pesados, engines de jogos e sistemas de processamento de dados diretamente para o navegador.

Instalação e configuração do ambiente

Antes de começar, certifique-se de ter a versão mais recente do Go instalada (1.21+). Para trabalhar com WebAssembly, você precisará do compilador tinygo (opcional, para reduzir o tamanho dos binários) ou do go build padrão.

Requisitos básicos

\n
• Go 1.21 ou superior
\n
• Navegador com suporte a WebAssembly (Chrome, Firefox, Safari, Edge)
\n
• Conhecimento básico de JavaScript
\n

Configuração das variáveis de ambiente

# Definindo GOOS e GOARCH para compilação cruzada\nexport GOOS=js\nexport GOARCH=wasm\n\n# Verificando se tudo está configurado corretamente\ngo env GOOS GOARCH\n# Deve exibir: js wasm

Também é necessário copiar o arquivo de suporte wasm_exec.js da biblioteca padrão do Go:

cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" ./

Escrevendo e compilando o primeiro módulo WASM

Vamos criar um módulo simples que exportará uma função para somar dois números e exibirá uma mensagem no console do navegador.

Código em Go

package main\n\nimport "syscall/js"\n\nfunc add(this js.Value, args []js.Value) interface{} {\n    if len(args) < 2 {\n        return "Error: need two arguments"\n    }\n    a := args[0].Int()\n    b := args[1].Int()\n    return a + b\n}\n\nfunc main() {\n    // Registrando a função no objeto global\n    js.Global().Set("goAdd", js.FuncOf(add))\n    \n    // Bloqueando a goroutine para que o WASM não finalize\n    select {}\n}

Compilação para WASM

go build -o main.wasm main.go

Após a compilação, você terá um arquivo main.wasm com cerca de 2-3 MB (com o compilador padrão). Para produção, recomenda-se usar o TinyGo, que reduz o tamanho para 10-50 KB.

Integração com JavaScript e HTML

Agora vamos criar uma página HTML que carrega e utiliza nosso módulo WASM.

Template HTML

<!DOCTYPE html>\n<html>\n<head>\n    <meta charset="utf-8">\n    <title>Go WebAssembly Demo</title>\n</head>\n<body>\n    <h1>Go + WebAssembly</h1>\n    <input type="number" id="num1" value="10">\n    <input type="number" id="num2" value="20">\n    <button onclick="calculate()">Somar</button>\n    <p>Resultado: <span id="result">0</span></p>\n\n    <script src="wasm_exec.js"></script>\n    <script>\n        const go = new Go();\n        \n        WebAssembly.instantiateStreaming(\n            fetch("main.wasm"), \n            go.importObject\n        ).then((result) => {\n            go.run(result.instance);\n            console.log("WASM carregado!");\n        });\n\n        function calculate() {\n            const a = parseInt(document.getElementById('num1').value);\n            const b = parseInt(document.getElementById('num2').value);\n            const result = goAdd(a, b);\n            document.getElementById('result').textContent = result;\n        }\n    </script>\n</body>\n</html>

Trabalhando com memória e compl