Trabajo con WebAssembly y Go: creación de aplicaciones web rápidas

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Introducción a WebAssembly y Go

WebAssembly (Wasm) es un formato de instrucciones binarias de bajo nivel que se ejecuta en el navegador con velocidad casi nativa. En combinación con el lenguaje Go (Golang), obtienes una herramienta poderosa para crear aplicaciones web de alto rendimiento. Go se compila a WebAssembly, lo que permite trasladar cálculos complejos, algoritmos e incluso juegos directamente al navegador, sin sacrificar rendimiento.

En este artículo, analizaremos cómo configurar el entorno, escribir un módulo simple en Go, compilarlo a Wasm e integrarlo con JavaScript. Aprenderás sobre los paquetes clave, limitaciones y mejores prácticas.

Configuración del entorno para compilar Go a Wasm

Instalación de Go y dependencias de WebAssembly

Ante todo, asegúrate de tener instalado Go versión 1.11 o superior (se recomienda 1.21+). WebAssembly es compatible de forma nativa. Para la compilación se utiliza la variable de entorno GOOS=wasm GOARCH=wasm.

También necesitarás el archivo de soporte wasm_exec.js, que viene incluido con Go. Cópialo a la raíz del proyecto:

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

Estructura del proyecto

Creemos una estructura simple:

my-wasm-app/├── main.go├── wasm_exec.js├── index.html└── main.wasm (se creará después de la compilación)

Escribir un módulo en Go para WebAssembly

Ejemplo simple: función de suma

Crea el archivo main.go con el siguiente contenido:

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}

Aquí usamos el paquete syscall/js para la interacción con JavaScript. La función add recibe dos argumentos y devuelve su suma. El canal c bloquea la finalización del programa para que el módulo permanezca activo.

Compilación a Wasm

Ejecuta el comando:

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

Como resultado, obtendrás un archivo main.wasm de aproximadamente 1–2 MB (para un ejemplo simple). En producción, usa la bandera -ldflags="-s -w" para reducir el tamaño.

Integración con HTML y JavaScript

Creación de la página HTML

Crea el archivo index.html:

<!DOCTYPE html><html lang="es"><head>    <meta charset="UTF-8">    <title>Go + WebAssembly</title>    <script src="wasm_exec.js"></script></head><body>    <h2>Calculadora en Go en el navegador</h2>    <input type="number" id="num1" value="5">    <input type="number" id="num2" value="10">    <button onclick="calculate()">Sumar</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 cargado");            });

        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>

Observa: la función goAdd se vuelve global gracias a la llamada js.Global().Set("goAdd", ...) en el código Go.