WebAssembly es un proyecto realmente genial que compila otros lenguajes de código para que puedan ejecutarse en el navegador con JavaScript. Es significativamente más rápido que muchos de sus competidores. Permite que más sitios con gran cantidad de datos y procesamiento funcionen de manera más fluida y rápida de lo que sería posible de otro modo. En este artículo, echaremos un vistazo a la tecnología desde una perspectiva de arriba hacia abajo, repasando qué es y por qué puede quererla o necesitarla.
En términos técnicos, WebAssembly es un formato de codificación binaria que, como dice la documentación original, «permite archivos pequeños, decodificación rápida y uso reducido de memoria». Fue diseñado para tomar código desde el nivel de la máquina. Al igual que lenguajes como C o C++ (o R, etc.). Luego lo compila en WebAssembly (o wasm ), que luego se ejecuta en el navegador como JavaScript. Básicamente, toma el código ejecutable y lo ejecuta en el navegador.
Lo que esto significa para los desarrolladores es que puede trabajar más directamente con el navegador como si estuviera interactuando con la computadora del usuario a nivel de máquina. Ya no tiene que pasar por los pasos a veces complicados que requiere JavaScript. WASM le permite ejecutar juegos y aplicaciones completos en el navegador como si estuvieran ejecutándose en la propia máquina. Es casi como si hubiera una máquina virtual ideal ejecutando los comandos. Hay ejemplos de Doom 3 que se ejecutan únicamente en WebAssembly, así como en Figma .
Incluso si no tiene un proyecto tan ambicioso, WebAssembly merece una mirada porque puede acelerar prácticamente cualquier sitio con mucho JS porque puede mantener los cálculos necesarios lejos de JavaScript y en manos de una herramienta que los maneja mejor.
¿Por qué WebAssembly en lugar de JavaScript?
Bueno, en primer lugar, no pienses en ello como una decisión de uno u otro. Que no es. WebAssembly fue diseñado para funcionar junto con JS, no para reemplazarlo. Puede ejecutar algunos scripts en JS, mientras que otros se ejecutan a través de WASM. Además, no es una tecnología marginal. En el momento de escribir este artículo, Chrome, Firefox, Safari, Android e incluso Microsoft Edge (!) son compatibles con WebAssembly.
Esa es parte de la razón por la que buscar WebAssembly para WordPress y otras aplicaciones web es tan atractivo. Ya se ha convertido en un estándar de codificación que ha sido adoptado por todos los jugadores importantes. Incluye Microsoft. Y todos sabemos lo vacilantes que pueden ser sobre este tipo de cosas. Entonces, si alguna vez hubo una razón para comenzar a considerar cómo puede usarlo, esa es.
Además, sabemos que JavaScript puede hacer cosas asombrosas (mira el nuevo WP Block Editor o Divi , ambos escritos en React.js). Pero no es genial en todo. WebAssembly le brinda las herramientas para representar imágenes y animaciones de alto nivel para acompañar las características y la interacción que desea de JavaScript.
Hasta WebAssembly, si deseaba hacer algo de eso y dividir sus recursos y computación, se requerirían complementos y extensiones del navegador. Ahora, trabajando junto con HTML5 y JavaScript, WASM hace que todo (más o menos) lo que desee hacer pueda compilarse, ejecutarse y renderizarse dentro del propio navegador. Sin pérdida de rendimiento o potencia.
Uso de WASM
Para empezar, necesitará algún tipo de código en C, C++, R, etc. Luego, debe descargar el SDK de Emscripten , que le permite tomar ese código y compilarlo en WASM.
Sin embargo, muchos de ustedes son desarrolladores web y es posible que no tengan ese nivel de poliglotismo. Esta bien. También puede escribir directamente en el estilo de texto WebAssembly , o puede trabajar su TypeScript en WASM .
Una vez hecho esto, la documentación de Mozilla lo expresa mejor:
El documento HTML generado [Emscripten] carga el archivo de enlace de JavaScript y escribe stdout en un <textarea>. Si la aplicación usa OpenGL, el HTML también contiene un elemento <canvas> que se usa como destino de representación. Es muy fácil modificar la salida de Emscripten y convertirla en cualquier aplicación web que necesite.
Luego, simplemente ejecútelo como cualquier otra aplicación web dentro de su entorno o CMS. Además, hay una discusión en curso entre los colaboradores sobre la posibilidad de importar scripts WASM como módulos directamente , tal como ya se puede con ECMAScript (ES6) . Simplemente indicará el script type=’module’ y que el src será example.wasm en lugar de example.js .
Entonces, ¿es WebAssembly para usted?
Honestamente, para el usuario típico de WordPress, el blogger y creador de contenido y propietario de una pequeña empresa, WebAssembly probablemente nunca le preocupe. Y aunque sí , puede acelerar totalmente su sitio debido a la forma en que maneja los cálculos, probablemente no valga la pena contratar a un desarrollador y hacer que reelaboren las cosas solo por eso. La mayoría de los sitios de WP no son lo suficientemente resistentes como para requerir la compresión y los cálculos que hacen que WebAssembly brille.
Pero si es un desarrollador que usa la web como hogar para su aplicación web (y con esto nos referimos a aplicaciones web progresivas, no solo tiendas y servicios de entrega de contenido a menos que sea muy popular), WebAssembly probablemente hará que su sitio web correr exponencialmente más rápido. Si tiene muchas interacciones y representación de gráficos, consulte WASM. Lo hará mejor. Si proporciona análisis y administración de datos en tiempo real (como un software CRM ), WebAssembly fue diseñado para usted.
Básicamente, si ejecuta una tonelada de cálculos al mismo tiempo que sus usuarios interactúan con el sitio web, vale la pena echarle un vistazo a WebAssembly. Si llama a muchos archivos JavaScript y módulos separados, eche un vistazo a WebAssembly. Hay una gran posibilidad de que haga que su sitio mejore mucho, no solo en el back-end y aligerando los recursos, sino también en los extremos de los usuarios. Tendrán una experiencia mucho mejor con su producto.
¿Tienes experiencia con WebAssembly? ¿Qué tipo de proyectos encuentra mejor para el formato?
Imagen destacada del artículo por Sammby /shutterstock.com