Trabalhando com WebAssembly e Go: criando aplicações web rápidas

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 Go

WebAssembly (Wasm) é um formato binário de instruções de baixo nível que é executado no navegador com velocidade quase nativa. Em combinação com a linguagem Go (Golang), você obtém uma ferramenta poderosa para criar aplicações web de alto desempenho. Go compila para WebAssembly, permitindo transferir cálculos complexos, algoritmos e até jogos diretamente para o navegador, sem sacrificar o desempenho.

Neste artigo, vamos abordar como configurar o ambiente, escrever um módulo simples em Go, compilá-lo para Wasm e integrá-lo com JavaScript. Você aprenderá sobre os pacotes principais, limitações e melhores práticas.

Configuração do ambiente para compilar Go para Wasm

Instalação do Go e dependências do WebAssembly

Antes de tudo, certifique-se de ter o Go versão 1.11 ou superior instalado (recomendado 1.21+). O suporte a WebAssembly é nativo. Para compilar, use a variável de ambiente GOOS=wasm GOARCH=wasm.

Você também precisará do arquivo de suporte wasm_exec.js, que acompanha o Go. Copie-o para a raiz do projeto:

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

Estrutura do projeto

Vamos criar uma estrutura simples:

my-wasm-app/├── main.go├── wasm_exec.js├── index.html└── main.wasm (será criado após a compilação)

Escrevendo um módulo em Go para WebAssembly

Exemplo simples: função de soma

Crie o arquivo main.go com o seguinte conteúdo:

package main

import (    "syscall/js")

func add(this js.Value, args []js.Value) interface{} {    if len(args) < 2 {        return 0    }    a := args[0].Int()    b := args[1].Int()    return a + b}

func main() {    c := make(chan struct{}, 0)

    js.Global().Set("goAdd", js.FuncOf(add))

    <-c}

Aqui usamos o pacote syscall/js para interagir com JavaScript. A função add recebe dois argumentos e retorna sua soma. O canal c bloqueia a finalização do programa para que o módulo permaneça ativo.

Compilação para Wasm

Execute o comando:

GOOS=wasm GOARCH=wasm go build -o main.wasm main.go

O resultado será um arquivo main.wasm com cerca de 1–2 MB (para um exemplo simples). Em produção, use a flag -ldflags="-s -w" para reduzir o tamanho.

Integração com HTML e JavaScript

Criação da página HTML

Crie o arquivo index.html:

<!DOCTYPE html><html lang="pt"><head>    <meta charset="UTF-8">    <title>Go + WebAssembly</title>    <script src="wasm_exec.js"></script></head><body>    <h2>Calculadora Go no navegador</h2>    <input type="number" id="num1" value="5">    <input type="number" id="num2" value="10">    <button onclick="calculate()">Somar</button>    <p>Resultado: <span id="result">0</span></p>

    <script>        const go = new Go();        WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject)            .then((result) => {                go.run(result.instance);                console.log("Módulo WebAssembly carregado");            });

        function calculate() {            const a = parseInt(document.getElementById('num1').value);            const b = parseInt(document.getElementById('num2').value);            const sum = goAdd(a, b);            document.getElementById('result').innerText = sum;        }    </script></body></html>

Observe: a função goAdd torna-se global graças à chamada js.Global().Set("goAdd", ...) no código Go.