Trabajo con WebAssembly y Go: de la A a la Z — guía completa

Introducción a WebAssembly y Go

WebAssembly (WASM) es un formato binario de bajo nivel que permite ejecutar código escrito en lenguajes distintos a JavaScript directamente en el navegador. Go (Golang), con su potente biblioteca estándar y excelente soporte de concurrencia, se ha convertido en uno de los mejores candidatos para la compilación a WASM. En este artículo, analizaremos el proceso de trabajo con WebAssembly en Go, desde la instalación de herramientas hasta el despliegue de una solución completa.

Las aplicaciones web modernas requieren un alto rendimiento, y WebAssembly ofrece la posibilidad de ejecutar código escrito en Go a una velocidad casi nativa. Esto abre las puertas para trasladar cálculos pesados, motores de juegos y sistemas de procesamiento de datos directamente al navegador.

Instalación y configuración del entorno

Antes de comenzar, asegúrese de tener instalada la última versión de Go (1.21+). Para trabajar con WebAssembly, necesitará el compilador tinygo (opcional, para reducir el tamaño de los binarios) o el estándar go build.

Requisitos básicos

\n
• Go 1.21 o superior
\n
• Navegador con soporte para WebAssembly (Chrome, Firefox, Safari, Edge)
\n
• Conocimientos básicos de JavaScript
\n

Configuración de variables de entorno

# Configuramos GOOS y GOARCH para la compilación cruzada\nexport GOOS=js\nexport GOARCH=wasm\n\n# Verificamos que todo esté configurado correctamente\ngo env GOOS GOARCH\n# Deberíamos ver: js wasm

También es necesario copiar el archivo de soporte wasm_exec.js de la biblioteca estándar de Go:

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

Escritura y compilación del primer módulo WASM

Crearemos un módulo simple que exporte una función para sumar dos números y muestre un mensaje en la consola del navegador.

Código en 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    // Registramos la función en el objeto global\n    js.Global().Set("goAdd", js.FuncOf(add))\n    \n    // Bloqueamos la goroutine para que WASM no termine\n    select {}\n}

Compilación a WASM

go build -o main.wasm main.go

Después de la compilación, tendrá un archivo main.wasm de aproximadamente 2-3 MB (con el compilador estándar). Para producción, se recomienda usar TinyGo, que reduce el tamaño a 10-50 KB.

Integración con JavaScript y HTML

Ahora crearemos una página HTML que cargue y utilice nuestro módulo WASM.

Plantilla 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()">Sumar</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 cargado!");\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>

Trabajo con memoria y complej