¿Qué es WebAssembly? ¿Y puede acelerar su sitio?


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 se ejecuten de manera más fluida y rápida de lo que sería posible. En este artículo, analizaremos la tecnología desde una perspectiva de arriba hacia abajo, repasando qué es y por qué puede quererla o necesitarla.

¿Qué es WebAssembly?

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 del nivel de la máquina. Al igual que lenguajes como C o C ++ (o R, etc.). Luego lo compila en WebAssembly (o era m), 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 seguir los pasos a veces complicados que requiere JavaScript. WASM le permite ejecutar juegos y aplicaciones completos en el navegador como si se estuvieran ejecutando en la propia máquina. Es casi como si hubiera una máquina virtual ideal que ejecuta los comandos. Hay ejemplos de Doom 3 que se ejecuta únicamente en WebAssembly, así como Figma.

Incluso si no tiene un proyecto tan ambicioso, WebAssembly merece un vistazo 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, primero que nada, no lo piense como una decisión de una u otra. No es. WebAssembly fue diseñado para funcionar junto con JS, no para reemplazarlo. Puede hacer que algunos scripts se ejecuten 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 estas líneas, 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 adoptado por todos los actores importantes. Incluido Microsoft. Y todos sabemos lo indecisos que pueden ser sobre este tipo de cosas. Entonces, si alguna vez hubo una razón para comenzar a considerar cómo se puede usar, esa es.

Además, sabemos que JavaScript puede hacer cosas increíbles (mire el nuevo WP Block Editor o Divi, ambos escritos en React.js). Pero no lo es Excelente en todo. WebAssembly le brinda las herramientas para renderizar imágenes y animaciones de alta gama que combinen con las características y la interacción que desea de JavaScript.

Hasta WebAssembly, si deseaba hacer algo de eso y dividir sus recursos y cálculos, se necesitarían complementos y extensiones del navegador. Ahora, trabajando junto con HTML5 y JavaScript, WASM hace que todo (aproximadamente) lo que podría querer hacer se pueda compilar, ejecutar y renderizar dentro del propio navegador. Sin pérdida de rendimiento o potencia.

Usando 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 poliglotabilidad. Esta bien. También puede escribir directamente en el Estilo de texto de WebAssembly, o puedes trabajar tu TypeScript en WASM.

Una vez hecho esto, la documentación de Mozilla lo expresa mejor:

El documento HTML generado (Emscripten) carga el archivo de cola JavaScript y escribe stdout en un