WebAssembly: Conceptos y casos de uso

WebAssembly (abreviado como Wasm) es un formato de código binario que permite la ejecución de código a alta velocidad en los navegadores web. Es un estándar abierto, soportado por todos los navegadores modernos, y se puede generar desde varios lenguajes como C, C++, Rust, Go, y otros, para ser ejecutado en el navegador.

La principal diferencia entre WebAssembly y otros lenguajes como JavaScript es que Wasm se compila en un formato binario, lo que permite su ejecución de forma mucho más rápida y eficiente que el código interpretado de JavaScript. WebAssembly no es un lenguaje de programación, sino una capa de ejecución que permite que los programas escritos en otros lenguajes puedan ejecutarse rápidamente en el navegador.

Conceptos Clave de WebAssembly

• Módulos WebAssembly: Los archivos Wasm son unidades de código que contienen instrucciones que el navegador puede ejecutar. Los módulos de Wasm se descargan junto con el código HTML y JavaScript de una página web.
• Compilación: Los lenguajes de alto nivel como C/C++, Rust, o Go pueden ser compilados a WebAssembly mediante herramientas específicas (por ejemplo, Emscripten para C/C++ o wasm-pack para Rust).
• Máquina Virtual (VM): El código Wasm se ejecuta en una máquina virtual que está integrada en el navegador. Esta máquina virtual permite que WebAssembly ejecute el código de manera eficiente y segura.
• Integración con JavaScript: WebAssembly no reemplaza a JavaScript. Los módulos Wasm pueden ser invocados desde JavaScript y pueden interactuar con las APIs del navegador, lo que permite crear aplicaciones más potentes y rápidas.

Ventajas de WebAssembly

• Rendimiento Mejorado: La principal ventaja de WebAssembly es su capacidad para ejecutar código a velocidades nativas. Dado que WebAssembly es un formato binario optimizado, puede ejecutar tareas de alto rendimiento de manera mucho más eficiente que JavaScript. Esto es especialmente útil en aplicaciones que requieren procesamiento intensivo como juegos, edición de imágenes y videos, simulaciones científicas, y más.
• Portabilidad: Un módulo de WebAssembly puede ejecutarse en cualquier navegador moderno sin necesidad de instalar plugins adicionales. Los archivos Wasm son portátiles entre diferentes sistemas operativos y dispositivos, lo que permite a los desarrolladores ofrecer experiencias consistentes y rápidas sin preocuparse por las variaciones en las plataformas.
• Seguridad: WebAssembly está diseñado con la seguridad en mente. El código Wasm se ejecuta en un entorno aislado (sandbox), lo que significa que no tiene acceso directo al sistema operativo del usuario, y solo puede interactuar con el entorno web de manera controlada. Esto ayuda a prevenir vulnerabilidades de seguridad que podrían surgir al ejecutar código no confiable.
• Compatibilidad: Aunque WebAssembly fue inicialmente diseñado para lenguajes como C y C++, hoy en día soporta muchos otros lenguajes, incluidos Rust, Go, Python etc… . Esto permite a los desarrolladores elegir el mejor lenguaje para sus necesidades y compilarlo a WebAssembly para su ejecución en la web.

Desventajas de WebAssembly

• Limitado uso del DOM: WebAssembly no tiene acceso directo al DOM (Modelo de Objetos de Documento), lo que significa que no puede manipular directamente la interfaz de usuario. Por esta razón, WebAssembly debe interactuar con JavaScript para actualizar el contenido en la página. Aunque es posible hacer esta integración, agregar esa capa adicional puede hacer que el desarrollo sea más complejo.
• Mayor tamano de archivos: Los archivos Wasm pueden ser más grandes que los archivos JavaScript equivalentes debido a que WebAssembly utiliza un formato binario. Esto puede afectar los tiempos de carga, especialmente en dispositivos con conexiones a internet lentas. Sin embargo, se está trabajando en técnicas de compresión y optimización de archivos para mitigar este problema.
• Compatibilidad con librerias JS: Aunque WebAssembly es muy potente, aún existen ciertas bibliotecas y funcionalidades de JavaScript que no son completamente compatibles con Wasm. Esto puede ser una limitación cuando se necesita usar bibliotecas web específicas que no tienen soporte nativo para WebAssembly.

Casos de Uso de WebAssembly

WebAssembly ha abierto nuevas posibilidades para aplicaciones que requieren alto rendimiento en el navegador. Algunos de los casos de uso más populares incluyen:

• Videojuegos: Los videojuegos, especialmente aquellos con gráficos 3D y físicos complejos, se benefician enormemente de la capacidad de WebAssembly para ejecutar código a velocidades cercanas al hardware. Juegos como Unity y Unreal Engine han adoptado WebAssembly para ejecutar sus motores en el navegador sin sacrificar el rendimiento.
• Edicion de multimedia: Aplicaciones complejas de edición de imágenes y video, como Photopea o Pixlr, pueden usar WebAssembly para procesar grandes volúmenes de datos y ejecutar algoritmos complejos de manera más eficiente que con JavaScript. Esto permite experiencias de usuario más fluidas, incluso en dispositivos con recursos limitados.
• Simulacion: La capacidad de WebAssembly para realizar cálculos numéricos y científicos de manera eficiente lo convierte en una excelente opción para simulaciones científicas y análisis de datos pesados. Los investigadores pueden compartir sus aplicaciones de simulación directamente en la web sin necesidad de instalar software especializado.
• Realidad virtual y aumentada: Las aplicaciones de realidad virtual (VR) y realidad aumentada (AR) requieren una gran cantidad de procesamiento para ofrecer experiencias inmersivas en tiempo real. WebAssembly ayuda a ejecutar estas aplicaciones de manera más eficiente en el navegador, reduciendo el lag y mejorando la experiencia general del usuario.

Ejemplo de Implementación de WebAssembly

Escribir un dummy code en C:

#include <stdio.h>

int suma(int a, int b) {
   return a + b;
}

int main() {
   printf("Sumando 2 y 3: %d\n", suma(2, 3));
   return 0;
}

Para compilar el código C a WebAssembly, necesitas usar Emscripten, una herramienta que permite compilar código C/C++ a WebAssembly.

emcc wasm.c -o wasm.js

Esto generará un archivo js y un wasm que podrán ser integrados en una pagina HTML para que el código WebAssembly pueda ser usado en el navegador

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Ejemplo WebAssembly</title>
   <script src="wasm.js"></script>
</head>
<body>
   <h1>Ejemplo WebAssembly</h1>
   <button id="sumarBtn">Sumar 2 + 3</button>
   <p id="resultado"></p>

   <script>
       // Esperar que el archivo wasm.js cargue y se inicialice
       Module.onRuntimeInitialized = function() {
           const resultado = Module._suma(2, 3);
           document.getElementById('resultado').textContent = "Resultado: " + resultado;
       };

       document.getElementById('sumarBtn').onclick = function() {
           const resultado = Module._suma(2, 3);
           document.getElementById('resultado').textContent = "Resultado: " + resultado;
       };
   </script>
</body>
</html>

• wasm.js: Es el archivo generado por Emscripten que carga y configura WebAssembly.
• Module._suma(2, 3): Llama a la función suma definida en C que se ha exportado a WebAssembly.

Para correr el código es necesario colocar los archivos wasm.js, wasm.wasm y el archivo HTML en el mismo directorio.

WebAssembly es una tecnología poderosa que está revolucionando el desarrollo web al permitir la ejecución de código de alto rendimiento directamente en el navegador. Con su capacidad para ejecutar código a la velocidad nativa, su portabilidad entre plataformas, y su integración con lenguajes como C, C++, Rust y Go. WebAssembly abre un abanico de posibilidades para el desarrollo de aplicaciones complejas y eficientes.