¿Qué es WebAssembly? Velocidad nativa en el navegador

01¿Qué es WebAssembly?

WebAssembly es un segundo formato de ejecución que los navegadores web entienden además de JavaScript. Está estandarizado por el W3C y funciona de forma nativa en todos los navegadores principales, como Chrome, Firefox, Safari y Edge; el usuario no tiene que instalar nada.

No se deje engañar por la palabra «assembly» del nombre: normalmente no se escribe Wasm a mano. Usted escribe el código en un lenguaje habitual y después un compilador lo convierte en un archivo .wasm. El navegador descarga rápidamente este archivo pequeño y compacto, lo valida y lo traduce a código máquina para ejecutarlo.

En resumen, la respuesta más sencilla a la pregunta de qué es Wasm es esta: un destino de compilación portable y seguro que lleva al navegador el rendimiento de las aplicaciones de escritorio.

02¿Cómo funciona WebAssembly?

JavaScript llega como texto; el navegador lo analiza, lo interpreta y lo optimiza durante la ejecución. WebAssembly, en cambio, llega ya compilado. Como sus tipos están definidos y su estructura es estricta, el navegador puede ejecutarlo con muchas menos suposiciones y con una velocidad predecible.

1. El desarrollador escribe el código en un lenguaje como C++, Rust, Go o C#.
2. La cadena de herramientas del compilador convierte el código en un módulo .wasm.
3. La página web carga e inicia el módulo mediante JavaScript.
4. JavaScript llama a las funciones de Wasm y refleja los resultados en la interfaz.

const { instance } = await WebAssembly.instantiateStreaming(
  fetch('/hesap.wasm')
);

console.log(instance.exports.topla(2, 3)); // 5

03Diferencia entre Wasm y JavaScript

La diferencia entre Wasm y JavaScript suele malinterpretarse. WebAssembly no se diseñó para acabar con JavaScript, sino para ayudar en las áreas en las que este tiene dificultades. La interfaz, la gestión de eventos y la interacción con la página siguen siendo cosa de JavaScript.

La ventaja real de Wasm se ve en el cálculo intensivo. Pero no es más rápido para cualquier tarea: transportar datos con frecuencia entre JavaScript y Wasm supone un coste adicional. En tareas pequeñas, ese coste puede anular la ganancia.

04Usos de WebAssembly

Los usos de WebAssembly se amplían cada año. El denominador común es que tareas antes imposibles o muy lentas en el navegador ahora pueden hacerse sin instalar nada.

Herramientas de diseño y medios

Las aplicaciones profesionales de diseño, los editores de fotografía y los conversores de vídeo que funcionan en el navegador ejecutan sus núcleos de procesamiento pesado con Wasm. Por ejemplo, es posible comprimir un vídeo directamente en el navegador sin subirlo a un servidor.

Juegos, 3D y simulación

Los motores de juegos pueden compilar su salida a Wasm. En el apartado gráfico, combinado con la nueva interfaz gráfica que explicamos en nuestro artículo qué es WebGPU, pueden crearse en el navegador experiencias similares a las de una consola.

Aplicaciones de empresa y datos

Las bases de datos que funcionan en el navegador, el procesamiento de PDF, el cifrado, los visores CAD y los motores de cálculo complejos se benefician de Wasm. El código de escritorio existente puede llevarse a la web sin reescribirlo, lo que significa conservar bibliotecas desarrolladas durante años.

Uso fuera del navegador

Gracias a la interfaz llamada WASI, Wasm también puede ejecutarse en el servidor, en la computación en el borde y en los sistemas de extensiones. Su carácter ligero y aislado lo convierte en una opción atractiva para ejecutar extensiones de forma segura.

05¿Con qué lenguajes se escribe Wasm?

Son muchos los lenguajes que se pueden compilar a Wasm, pero su nivel de madurez es distinto. Las opciones más habituales son C/C++ y Rust. Rust destaca en este terreno por su seguridad de memoria y su soporte de herramientas; encontrará más detalles en nuestro artículo qué es Rust.

• C y C++: soporte maduro y extendido con la cadena de herramientas Emscripten.
• Rust: un puente cómodo hacia JavaScript con wasm-pack y wasm-bindgen.
• Go: salida Wasm con el compilador oficial; el tamaño del resultado es relativamente grande.
• C# / .NET: aplicaciones .NET en el navegador con Blazor.
• AssemblyScript: para quienes quieren escribir Wasm con una sintaxis parecida a la de TypeScript.

cargo install wasm-pack
wasm-pack build --target web

06Rendimiento: dónde está la ganancia real

Añadir Wasm a un sitio web no lo hace más rápido de forma automática. En una web corporativa o en una tienda que funciona sobre una plataforma de e-commerce, las causas reales de la lentitud suelen ser las imágenes grandes, los scripts innecesarios y el tiempo de respuesta del servidor. Estos problemas se resuelven con un trabajo de gestión de velocidad y rendimiento, no con Wasm.

Donde Wasm brilla es en las aplicaciones que requieren alto rendimiento en el navegador: cálculos de millones de operaciones por segundo, filtros de imagen, compresión, simulación. En este tipo de tareas la ganancia puede ser considerable; pero tomar la decisión sin medir no es lo correcto.

07Límites y puntos de atención

WebAssembly es una herramienta potente, pero no sirve para todos los proyectos. Los conocimientos del equipo, la facilidad de depuración y el coste de mantenimiento también deben entrar en la decisión.

• La depuración es más laboriosa que en JavaScript; los mapas de código fuente no siempre son perfectos.
• Transportar grandes cantidades de datos entre JavaScript y Wasm puede reducir el rendimiento.
• El tamaño del módulo puede crecer según el lenguaje y las bibliotecas utilizadas.
• En el equipo debe haber desarrolladores que dominen los lenguajes que se compilan.
• Los módulos compilados también deben probarse; los enfoques de nuestro artículo qué son las pruebas de software también valen aquí.

08Antes de añadir Wasm a un proyecto

Antes de decidirse por WebAssembly, hay que definir bien el problema. Con frecuencia, la sensación de lentitud no viene del cálculo, sino de las peticiones de red, de paquetes demasiado grandes o de repintados innecesarios. En ese caso, añadir Wasm aumenta la complejidad y no resuelve el problema.

El enfoque correcto es localizar primero el cuello de botella con las herramientas de rendimiento del navegador y trasladar a Wasm solo esa parte. El resto de la aplicación puede seguir en JavaScript o TypeScript; así el equipo continúa trabajando con las herramientas que conoce.

1. Localice el cuello de botella midiéndolo con herramientas de perfilado.
2. Mantenga pequeñas y claras las entradas y salidas de la parte que va a trasladar.
3. Conserve la versión en JavaScript de la misma tarea para poder comparar.
4. Cargue el módulo solo cuando haga falta, con carga diferida.
5. Pruebe en dispositivos antiguos y en móviles, en condiciones reales de usuario.

09El futuro de WebAssembly

El estándar madura cada año con incorporaciones como los hilos (threads), las instrucciones SIMD y el soporte de recolector de basura. Este último ha abierto el camino para que lenguajes como Java, Kotlin y Dart también se compilen a Wasm de forma más eficiente.

En un futuro próximo, la línea entre una aplicación web y una de escritorio será aún más fina. Para las empresas, esto significa que serán posibles aplicaciones de negocio potentes que no requieren instalación. La interfaz de una aplicación así es tan importante como su motor; aquí el diseño UI/UX determina la experiencia de usuario.