Introducción a WebAssembly

Imagina que eres un desarrollador web y estás construyendo una casa con JavaScript. De repente, te das cuenta de que necesitas ladrillos más pequeños y eficientes para construir muros más resistentes de forma más rápida. Es ahí donde entra WebAssembly, ¡los ladrillos más pequeños y eficientes que necesitas para construir una casa mejor!

WebAssembly es una tecnología que permite ejecutar código en lenguajes de bajo nivel, como C++ o Rust, dentro de un navegador web. Básicamente, es un formato binario que se ejecuta más rápido que el código JavaScript, lo que significa que puede mejorar el rendimiento de las aplicaciones web y permitir crear aplicaciones web más complejas.

Actualmente se usa WebAssembly en sectores muy diversos:

• Juegos en línea: los desarrolladores de juegos en línea pueden utilizar WebAssembly para compilar su código de juego en lenguaje de bajo nivel, lo que les permite ofrecer una experiencia de juego más rápida y fluida

• plicaciones de edición de fotos: las aplicaciones de edición de fotos, como Adobe Lightroom, pueden utilizar WebAssembly para acelerar el procesamiento de imágenes y mejorar el rendimiento general de la aplicación

• Aplicaciones financieras: las que necesitan procesar grandes cantidades de datos en tiempo real pueden utilizar esta tecnología para mejorar su velocidad

• Procesamiento de video: en aplicaciones de transmisión de vídeo, como Netflix, se pueden beneficiar mejorando la transmisión de video y la experiencia del usuario

En resumen, WebAssembly es una tecnología emocionante que puede mejorar significativamente el rendimiento de las aplicaciones web.

¿Pero cómo se usa WebAssembly?

Supongamos que tienes una función JavaScript que realiza una operación matemática compleja. Para mejorar el rendimiento de esta operación, puedes escribir el mismo código en C++ y compilarlo en formato WebAssembly. Luego, puedes llamar a la función de WebAssembly desde tu código JavaScript.

En JavaScript, harías algo así:

async function loadWebAssembly(fileName) {
  const response = await fetch(fileName)
  const bytes = await response.arrayBuffer()
  const wasmModule = await WebAssembly.instantiate(bytes, {
    env: {
      memoryBase: 0,
      tableBase: 0,
      memory: new WebAssembly.Memory({ initial: 256 }),
      table: new WebAssembly.Table({ initial: 0, element: "anyfunc" }),
    },
  })
  return wasmModule.instance.exports
}

const wasmFunctions = await loadWebAssembly("operacion.wasm")
const result = wasmFunctions.operacion(5, 10)

En este código, la función asíncrona loadWebAssembly carga el archivo operacion.wasm y devuelve las funciones exportadas por el módulo WebAssembly. Luego, la función wasmFunctions.operacion realiza la operación matemática compleja utilizando el código C++ compilado en WebAssembly y devuelve el resultado.

Y aquí está el código C++ que se compila en WebAssembly sería algo así:

int operacion(int a, int b) {
  int result = 0;
  for (int i = 0; i < 10000000; i++) {
    result += (a + b) * i;
  }
  return result;
}

Este código realiza una operación matemática compleja con dos números enteros y devuelve el resultado.

En MDN puedes encontrar más información sobre la API de WebAssembly en JavaScript.