WebAssembly — Obtener velocidad de C++ en el navegador

Al finalizar este tema

Comprenderá qué es WebAssembly, por qué es necesario, en qué se diferencia de JavaScript y dónde se utiliza en la práctica.

Lo que JavaScript no puede hacer

Hasta ahora, JavaScript era el único lenguaje que funcionaba en el navegador web. Se pueden crear sitios web, aplicaciones web e incluso juegos sencillos con JavaScript. Sin embargo, tiene sus límites.

La edición de imágenes al nivel de Photoshop, los juegos 3D, la codificación de vídeo y las simulaciones científicas requieren un uso extremo de la CPU. Dado que JavaScript es un lenguaje de tipo intérprete + compilación JIT, es inevitable que sea más lento en comparación con el código nativo (C, C++, Rust).

Por ello, la respuesta para estas tareas era "instale la aplicación de escritorio". En el navegador era imposible.

WebAssembly rompió esta barrera.

Qué es WebAssembly

WebAssembly (abreviado como Wasm) es un formato binario que se ejecuta en el navegador. Si se compila el código escrito en lenguajes como C, C++ o Rust en un archivo .wasm, el navegador lo ejecutará casi a velocidad nativa.

Código fuente C++ → compilación → archivo .wasm → ejecución en el navegador

JavaScript hace que el navegador lea, analice y optimice el código de texto. Wasm es un binario ya compilado, por lo que no tiene una fase de interpretación; se ejecuta directamente.

Para ponerlo en perspectiva, JavaScript es como leer una novela en un idioma extranjero con interpretación simultánea, mientras que Wasm es como leer un libro que ya ha sido traducido.

No reemplaza a JavaScript

El hecho de que Wasm sea más rápido que JavaScript no significa que todo el desarrollo web deba realizarse con Wasm. Sus funciones son diferentes.

JavaScript — manipulación del DOM, eventos, lógica de interfaz y llamadas a API
Wasm       — cálculo intensivo, procesamiento de imágenes, simulación física y códecs

Wasm no puede acceder directamente al DOM. El manejo de eventos de clic en botones o la creación de elementos HTML sigue siendo tarea de JavaScript. Wasm se encarga únicamente de las partes con alta carga computacional, mientras que JavaScript recibe los resultados y los muestra en pantalla.

No son competidores, sino colaboradores.

Ejemplos reales

Figma — El motor de renderizado de la herramienta de diseño Figma está escrito en Wasm. Esta es la razón por la que se pueden manipular miles de objetos vectoriales en tiempo real en el navegador.

Google Earth — Permite rotar la Tierra en 3D dentro del navegador. Las tareas pesadas, como el renderizado de terreno y la decodificación de teselas, se procesan con Wasm.

FFmpeg.wasm — Es la biblioteca de edición de video FFmpeg compilada a Wasm. Permite recortar y convertir videos directamente en el navegador sin necesidad de enviar los archivos al servidor.

Videojuegos — Unity y Unreal Engine admiten compilación a Wasm. Esto permite jugar videojuegos 3D directamente en el navegador sin necesidad de instalación.

El punto en común es que hacen posible "lo que originalmente no se podía hacer en el navegador".

¿Cómo se crea?

No se escribe Wasm directamente. Se escribe código en un lenguaje existente y se compila.

C/C++ → Se genera .wasm mediante el compilación con Emscripten. Es la ruta más antigua.

Rust → Se compila con wasm-pack. La comunidad de Rust impulsa activamente Wasm, por lo que el soporte de herramientas es excelente.

Go → Admite oficialmente la compilación a Wasm. Sin embargo, el tamaño del binario suele ser grande.

El código para cargar un módulo Wasm desde JavaScript es sencillo:

const result = await WebAssembly.instantiateStreaming(
  fetch("module.wasm")
);
const add = result.instance.exports.add;
console.log(add(2, 3));

Claves

WebAssembly es un formato binario que ejecuta código a una velocidad casi nativa en el navegador. No reemplaza a JavaScript, sino que se encarga de las tareas con alta carga computacional. Permite realizar tareas "que antes eran imposibles", como Figma, Google Earth y juegos de navegador.