¡Di WAT Ahora!? JavaScript Turboalimentado con WASM Hecho a Mano

¡Hola y bienvenidos a mi charla, ¿Qué dices ahora? JavaScript Turbocharged con WebAssembly hecho a mano. Vamos a adentrarnos en ello.

Echa un vistazo a este gráfico. Comenzando en la izquierda, tenemos Lua, Dart, Ruby, trabajando hasta la derecha de todos estos diferentes lenguajes de programación. Y en el lado derecho, los programadores de JavaScript son, con mucho, los más numerosos del mundo. ¿Alguna vez te has preguntado por qué JavaScript fue tan exitoso?

Bueno, antes de responder a eso, permítanme presentarme rápidamente. Soy Justin. Puedes seguirme en X, y me considero un creador de open-source. Algunos proyectos en los que he trabajado son FormKit, que es un marco de construcción de formularios en el ecosistema de Vue. Arrow.js es un marco pequeño y ligero de reactividad. AutoAnimate realiza animaciones automáticas en tus aplicaciones. Tempo es una biblioteca de fechas y horas, similar a Moment.js. Arrastrar y soltar para facilitar tus arrastrar y soltar. Y Vue.Formulate para los viejos tiempos de Vue 2. Pero voy a volver a esa pregunta, ¿por qué fue tan exitoso JavaScript? Y creo que esta es una pregunta realmente interesante que tiene algunas variables diferentes que influyen en ello. Ciertamente, si miras hacia el lado derecho de esta lista de desarrolladores, tienes algunos de los lenguajes más fáciles de aprender. Tal vez no para dominar, pero para aprender. Cosas como JavaScript, pero también Python es famoso por ser amigable para el usuario. Pero creo que la verdadera razón por la que JavaScript lo logró es por el navegador. De hecho, JavaScript es el único tiempo de ejecución en el navegador, y lo ha sido durante mucho tiempo tiempo. Aunque estoy seguro de que muchos de ustedes saben esto, eso ya no es del todo cierto. A partir de 2017, que si miras un calendario, en realidad fue hace mucho tiempo. Es como hace cinco años completos ahora, más que eso, seis años ahora. WASM, o WebAssembly, también ha estado disponible como tiempo de ejecución en el navegador. Y sin embargo, no parece que lo usemos mucho. ¿Cuáles son sus beneficios? ¿De qué se trata todo esto? Eso es de lo que quiero hablarles. Así que primero, ¿qué es WebAssembly? Es una especificación de máquina virtual de pila. Permítanme profundizar un poco más en esto. Virtual, es una máquina virtual. Eso básicamente significa que es independiente del hardware.

¿Construyes una vez y ejecutas en cualquier lugar, verdad? Esa siempre fue la promesa de Java en el pasado. Y francamente, es una de las promesas de JavaScript. Escribes tu JavaScript y puedes ejecutarlo en el navegador, puedes ejecutarlo en Node, puedes ejecutarlo en muchos lugares. No necesitas preocuparte, ¿sabes?, ¿es este un CPU de 64 bits o de 32 bits? ¿Está ejecutando un chipset en particular que no funciona con la forma en que compilo estos binarios? No es así. Y Wasm tampoco es así. Es una máquina virtual que puedes ejecutar en cualquier lugar.

Ahora, ¿qué tal esto, máquina de pila? Eso probablemente sea un poco menos familiar para la gente. Y vamos a profundizar un poco más en esto. Pero básicamente, este es el modelo de computación. Cada máquina que realiza cálculos necesita una forma de hacer esos cálculos. Sabes, tal vez la más famosa sea una máquina de Turing. Pero hay otros modelos de computación, como una máquina de registros, que es en lo que se escriben la mayoría de los ensambladores. Este es un poco diferente. Es una máquina de pila. Vamos a ver eso.

Y finalmente, es una especificación. Y eso es realmente lo más interesante, no hay una implementación canónica de Wasm. En cambio, es una especificación con la que cualquiera puede cumplir y lo ha hecho. Hay tiempos de ejecución en el navegador, pero también hay tiempos de ejecución, ya sabes, puedes ejecutar Wasm en Node.js. Y ahora tienes tiempos de ejecución a nivel de sistemas. Por lo tanto, puedes compilar tu binario de Rust, no solo para ejecutarlo en el navegador, sino también para ejecutarlo como una utilidad del sistema que se ejecuta en Wasm. Así que no tienes que compilar en todos los diferentes formatos binarios. Bien. ¿Cómo se ve en realidad? Bueno, fundamentalmente, es un formato binario. Así es como se ve. Parece un montón de code binario. Pero si tomáramos esto, esto es una aplicación real que estás viendo aquí. Y en Wasm, todos los bits son de 8 bits, o todos los bytes son de 8 bits. Así que podríamos traducir esto a hexadecimal, por ejemplo. Y podríamos ver un poco más de resolución.

Puedes obtener algunos patrones de coincidencia de aquí. Si eres realmente inteligente, incluso podrías reconocer algunos caracteres del código ASCII. Y entonces, ¿qué pasa si hacemos eso? Bueno, vamos a ponerlo en ASCII. Interesante. Y ahora estamos empezando a ver un poco de esta aplicación. Pero aún no puedes ver ni entender qué son estos puntos. Esos están sin definir en el rango ASCII.

Así que vamos a usar una herramienta aquí. Esto es Wabit, o Rabbit, que es el conjunto de herramientas binarias de WebAssembly. Y puedes obtenerlo en GitHub. Fue creado por el equipo de WebAssembly y te permite convertir entre binario y WebAssembly y volver a este nuevo formato del que vamos a hablar llamado WAT. Tomas tu archivo Wasm, lleno de binarios, lo pasas por aquí, de Wasm a WAT. Y simplemente lo sacas, y obtienes una cadena con el código, el código ensamblador, que realmente compone ese archivo.

Y mira esto. Esto es casi legible para los humanos. Vamos a dar un paso más y agreguemos algunas convenciones aquí. Puedes ver que dice local get 0, local get 1. En realidad, podemos usar una sintaxis para dar nombres a esas cosas. Y ahora tenemos algo que se ve bastante legible. Echemos un vistazo a este archivo un poco. Aquí tenemos una función, func. Bueno, creo que todos podemos entender lo que está sucediendo aquí. Y esta función se exporta con el nombre add. Llegaremos a eso más adelante, pero así es como accedemos a ella en JavaScript, por el nombre con el que se exporta. No es demasiado difícil de entender. Y esta función va a tomar dos parámetros. Está tomando el parámetro a y el parámetro b, y podemos ver que ambos están tipificados como i32.

Si has trabajado en programación a nivel de sistemas en Rust u otro lenguaje, estarás familiarizado con i32. Este es un entero con signo de 32 bits. Y luego aquí tenemos un resultado. Por lo tanto, el resultado de esto también será un número, otro entero de 32 bits.

Ahora vamos a entrar en el cuerpo de la función, y aquí es donde entra en juego ese contexto de máquina de pila. En el lado derecho, tenemos nuestra pila. Y lo que vamos a hacer es poner algo en la pila aquí. Entonces aquí decimos local.get a. Eso va a obtener el parámetro a y lo va a poner en la pila. Tienes que imaginar esto en tu mente un poco para entender cómo funciona. Vamos a obtener el parámetro dos aquí, o b, y eso también se va a agregar a la pila. Ahora tenemos dos números en la memoria de nuestra pila. Y finalmente vamos a ejecutar una función en la parte superior de lo que está en nuestra pila. Entonces en este caso, i32.add. Y i32.add consume exactamente dos variables de la pila. Entonces nuestro a y nuestro b en este caso serán la entrada para eso, y simplemente se desapilan de la pila. Entonces i32 consume esos y luego devuelve su valor, que es otro i32, de vuelta a la pila. Eso termina siendo el valor de retorno, y eso es todo.

Creo que si te sientas y realmente lo analizas, verás que no es tan complicado. Y esto fue una gran sorpresa para mí. Esto fue una gran sorpresa para mí que el formato de texto de Wasm o WebAssembly fuera sorprendentemente legible para los humanos. En comparación con, diría yo, casi cualquier otro lenguaje ensamblador que he leído en el pasado, esto es muy legible para los humanos porque te permite tener todas estas etiquetas legibles para los humanos. Entonces, lo que podemos hacer con nuestro archivo es pasarlo a través de la herramienta de línea de comandos reverse que vimos antes. Esta es Watt a Wasm en lugar de Wasm a Watt. Y le damos nuestro archivo Watt y genera un archivo Wasm. Y esto es lo que realmente se ejecutará en tu navegador. Y hacer eso no es tan complicado. Aquí te muestro tres formas rápidas. Tenemos WebAssembly instantiate streaming. Y luego puedes usar el fetch nativo del navegador para obtener el archivo Wasm.

Y luego devuelve una promesa que, cuando se resuelve, te da la instancia de ese módulo. Y luego puedes ver aquí, puedes decir instance.exports.add. Y esa es nuestra función add que exportamos. Y esto funciona bien. Otra forma de hacerlo si estás usando Vite, han agregado este parámetro question mark init. Si lo haces con un archivo Wasm, puedes importarlo directamente en tu JavaScript si estás usando Vite y ellos harán todo el trabajo duro por ti. Y luego esta es quizás la forma más interesante para mí. Puedes codificar en base64 el Wasm en una cadena y luego traducirlo automáticamente o muy fácilmente en una matriz de enteros sin signo de 8 bits y luego pasar eso a la instancia de WebAssembly y se ejecutará sin problemas. Y esto es interesante porque todos los demás métodos requieren un archivo separado y este no. Simplemente te permite ejecutar. ¿Por qué harías esto en realidad? Bueno, la mayoría de las personas están utilizando Wasm para compilar desde Rust o C, C++, incluso Go hacia el WebAssembly para poder ejecutar esos lenguajes en el navegador. Y esa es, con mucho, la forma más utilizada para hacer esto o ejecutar WebAssembly, escribir WebAssembly. Y quizás aún más interesante es que ahora las personas quieren compilar a WebAssembly para poder ejecutarlo en cualquier sistema operativo y cualquier chipset. Eso está muy bien e interesante. Pero a mí me interesa más escribir JavaScript y ejecutarlo en el navegador. Pero ¿no sería bueno si pudiéramos agregar un poco de WebAssembly para acelerar las cosas? Creo que sí. Cualquier cosa que sea un camino muy utilizado en tu código, renderizado de canvas, optimizaciones de juegos, cualquier cosa que sea intensiva en CPU, podrías tener una pequeña cantidad de Wasm escrito a mano y podrías ejecutarlo directamente desde tu código JavaScript solo como una forma de acelerar, echar un poco de combustible al fuego. Quiero dar un reconocimiento aquí a Austin Theroux. Creo que así se pronuncia su nombre. Él tiene este increíble y desconocido proyecto llamado Wasm artesanal. Y en realidad quiero mostrarte solo un par de ejemplos. Estos son todos archivos Wasm que él escribió. Puedes entrar aquí y echar un vistazo. Por ejemplo, aquí hay un sistema de Lorenz que él escribió y aquí está el Wasm. Y si vas y lo ves, es, nuevamente, sorprendentemente legible. Realmente no es tan difícil. Pero puedes obtener un rendimiento increíble dibujando cosas en un canvas. Por ejemplo, realmente me gusta este Juego de la Vida de Conway que él escribió. Y te puedo garantizar que ni siquiera nos acercamos remotamente a alcanzar algún tipo de límite de rendimiento aquí para mi simple CPU. Así que definitivamente echa un vistazo a este repositorio. Él hizo un gran trabajo.

Bueno, eso es todo por mi parte. Se me acabó el tiempo. Muchas gracias. Si quieres seguirme, puedes hacerlo en JPShrader. Y ese pequeño código QR te llevará a mi sitio web. Muchas gracias.