Hasta hace poco tiempo, desde 1995, la única herramienta disponible para crear experiencias interactivas más avanzadas que las páginas HTML estáticas era JavaScript. Sin embargo, JavaScript tenía sus limitaciones, especialmente en lo que respecta a tareas que requerían un alto rendimiento. WebAssembly (WASM), que significa "WebAssembly", nació como una alternativa a la ejecución de código JavaScript en el navegador, permitiendo a las aplicaciones realizar operaciones intensivas en el programa que se utiliza para la navegación en línea.

¿Qué es WASM y cómo supera a JavaScript en rendimiento?

WASM está diseñado para ejecutar código mucho más rápido que JavaScript. Utiliza un formato de bytecode binario que puede ejecutarse en navegadores web modernos y ofrece un rendimiento comparable al de las aplicaciones nativas del sistema operativo.

WASM fue concebido en 2015 cuando el Consorcio World Wide Web (W3C) y los principales proveedores de navegadores acordaron crear una máquina virtual de bajo nivel capaz de ejecutar bytecode generado por lenguajes de alto nivel.

Es importante destacar que WASM no es un nuevo lenguaje de programación en sí, sino un formato de instrucciones binarias compactas que se carga y ejecuta en un entorno seguro dentro del navegador, conocido como sandbox. A diferencia de JavaScript, que es un lenguaje interpretado, WASM utiliza bytecode, un conjunto de instrucciones de bajo nivel generadas por un compilador. El bytecode es un código intermedio diseñado para ejecutarse en una máquina virtual, lo que garantiza su portabilidad a través de diferentes plataformas y arquitecturas sin necesidad de recompilación.

Otros ejemplos de lengu

ajes que utilizan bytecode incluyen Java (que genera bytecode ejecutado en la Máquina Virtual Java, JVM) y C# (que genera bytecode ejecutado en el Common Language Runtime, CLR).

Ventajas de WASM para los desarrolladores web

Las ventajas de WASM son numerosas. Además de las mejoras de rendimiento y la alta portabilidad del código, WASM no está vinculado a un lenguaje de programación específico. Puede utilizarse con varios lenguajes, como C, C++, Rust y otros. Esto significa que los desarrolladores pueden escribir su código en su lenguaje de programación preferido y obtener un bytecode WASM ejecutable en cualquier navegador web moderno.

Otra ventaja de WASM es su interoperabilidad. Los desarrolladores web pueden llamar a funciones WASM desde JavaScript y viceversa, lo que permite una integración fluida entre ambas tecnologías.

Además, WASM se beneficia de la seguridad proporcionada por la sandbox, un entorno seguro integrado en el navegador web que está completamente aislado del resto del sistema. Esto evita conflictos con otras aplicaciones en ejecución en la máquina y refuerza la seguridad de las aplicaciones web.

¿Es WASM sinónimo de contenerización?

En 2019, Mozilla presentó su WebAssembly System Interface (WASI), lo que permitió que el código WASM accediera a los recursos del sistema operativo, trascendiendo los límites del navegador web. Esto planteó la posibilidad de ejecutar el mismo código en diferentes máquinas sin necesidad de recompilación, lo que generó comparaciones con la contenerización.

Algunos expertos han señalado que si WASM y WASI hubieran estado disponibles en 2008, no se habría necesitado crear Docker, ya que WASM podría haber desempeñado un papel similar. La interfaz estándar del sistema era la pieza que faltaba.

Sin embargo, aunque WASI y otras implementaciones han facilitado la ejecución de código WASM fuera del navegador web, todavía hay desafíos por superar, especialmente en el caso de lenguajes como Python, que tiene numerosas dependencias de terceros que aún no están disponibles en el entorno WASM.

WASM más allá del navegador: el desafío y el potencial

A pesar de estos desafíos, existe un gran potencial para WASM más allá del navegador web. La comunidad está trabajando en soluciones como el WebAssembly Component Model (WACM) y la segunda versión de WASI para fortalecer la presencia de WASM en el backend y permitir el uso de bytecode WASM en el lado del servidor.

En cuanto al navegador web, WASM tiene algunas limitaciones, como la falta de acceso al DOM de la página y a otras estructuras como XMLHttpRequest. Sin embargo, estas limitaciones no impiden que WASM se utilice de manera efectiva para una amplia variedad de aplicaciones web.

Aprender el formato de texto de WebAssembly

Si deseas adentrarte en el mundo de WASM y su formato de texto legible por humanos llamado WebAssembly Text Format (WAT), hay recursos disponibles para aprenderlo. Proyectos como "Watlings" ofrecen ejercicios y programas de muestra para aprender los fundamentos de WAT. WAT simplifica la creación, lectura y modificación del código WASM, que de otra manera está en formato binario.

El proyecto Watlings incluye una serie de ejercicios prácticos que cubren varios aspectos de WAT, divididos en secciones que tratan aspectos específicos del formato. Para comenzar, los desarrolladores pueden clonar el repositorio, instalar las dependencias mediante npm y probar sus soluciones a los ejercicios utilizando comandos específicos.

Ejemplos de código para compilar en bytecode WASM

A continuación, presentamos ejemplos de código que se pueden compilar en WASM:

Ejemplo en C/C++ para sumar dos números:

#include

int main() {
int a = 5;
int b = 7;
int sum = a + b;
std::cout << "La suma de " << a << " y " << b << " es " << sum << std::endl;
return 0;
}

Usando Emscripten, este código se puede compilar en WASM y obtener un archivo HTML que lo ejecuta en un navegador web:

emcc source.cpp -o output.html

Ejemplo en Rust para calcular el factorial de un número:

pub extern "C" fn factorial(n: u32) -> u32 {
if n <= 1 {
return 1;
}
return n * factorial(n - 1);
}

Este código se puede compilar en WASM utilizando el compilador Rust:

rustc --target wasm32-unknown-unknown -O -o output.wasm source.rs

Una vez que hayas compilado el código en WASM, puedes llamar a sus funciones desde JavaScript de la siguiente manera:

// Carga el módulo WASM
const { instance, module } = await WebAssembly.instantiateStreaming(fetch('output.wasm'));
// Llama a la función WASM
const result = instance.exports.factorial(5);
console.log("El factorial de 5 es " + result);

De esta manera, puedes utilizar WASM para realizar cálculos complejos e integrar las entradas y salidas de las funciones definidas en él en tus aplicaciones web.

WASM se puede utilizar para realizar operaciones de compresión y descompresión de datos, simular física realista, procesar imágenes directamente en el navegador y realizar cálculos matemáticos intensivos. Estos cálculos se ejecutan de manera eficiente, y los resultados están disponibles para tu aplicación web.

WebAssembly (WASM) representa un emocionante avance en la programación web al ofrecer un rendimiento mejorado y la capacidad de utilizar una variedad de lenguajes de programación. A medida que se superen los desafíos y se expanda su uso más allá del navegador, se espera que WASM juegue un papel importante en el futuro del desarrollo web y la computación en general. Si eres un desarrollador web o estás interesado en el desarrollo de aplicaciones web, explorar WASM y sus capacidades puede ser una inversión valiosa en tu carrera.