WebAssembly para principiantes Parte 4: WebAssembly y JavaScript Companionship

ahora ve a para ver la salida.

Nota: La mayoría de los sistemas vienen preinstalados con Python. De lo contrario, puede instalarlo fácilmente antes de intentar ejecutar el servidor Python3.

Uso de la API de JavaScript para trabajar con WASM

Esta sección analizará más de cerca la API JavaScript de WASM. Con él aprenderemos a cargar código WASM y ejecutarlo. Pero primero, veamos el código a continuación.

fetch('hello-geekflare.wasm').then( response =>
   response.arrayBuffer())
   .then (bytes =>
       WebAssembly.instantiate(bytes))
       .then(result=>
           alert(result.instance.exports.answer()))

El código anterior utiliza las siguientes API de JavaScript.

• buscar () API del navegador
• WebAssembly.instantiate

Además de estos, hay otras API que vale la pena mencionar. Éstos incluyen:

• WebAssembly.compile
• WebAssembly.instancia
• WebAssembly.instantiate
• WebAssembly.instantiateStreaming

buscar () API del navegador

La API fetch() carga el recurso de red .wasm. Si intenta cargarlo localmente, debe deshabilitar el uso compartido de recursos de origen cruzado para cargar el recurso de red. De lo contrario, puede usar un servidor de nodos para que lo haga por usted. Para instalar y ejecutar un servidor de nodos, ejecute el siguiente comando.

sudo apt install npm

Luego ejecute el siguiente comando para ejecutar el servidor.

npx http-server -o

#Output

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  
  
Hit CTRL-C to stop the server
Open: 

[2023-01-28T19:22:21.137Z]  "GET /" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.70"
(node:37919) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node --trace-deprecation ...` to show where the warning was created)
[2023-01-28T19:22:21.369Z]  "GET /favicon.ico" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.70"
[2023-01-28T19:22:21.369Z]  "GET /favicon.ico" Error (404): "Not found"

Esto abrirá el navegador web donde podrá ver todos los archivos de su proyecto.

Ahora abra hello-geefklare.html y ejecute las herramientas de desarrollo web. Allí, abre la consola y escribe lo siguiente.

recuperar("hola-geekflare.wasm");

Devolverá la siguiente promesa.

#Output

Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Response
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "/hello-geekflare.wasm"
[[Prototype]]: Response

También puede escribir el siguiente script y ejecutarlo a través de HTML.

Para ejecutar sus módulos wasm en el servidor, debe usar el siguiente código en Node.js.

const fs = require('fs');
const run = async() => {
   const buffer = fs.readFileSync("./hello-geekflare.wasm");
   const result = await WebAssembly.instantiate(buffer);
   console.log(result.instance.exports.answer());
};

run();

Sugerimos leer API de JavaScript de WebAssembly documentación para obtener más información.

JavaScript frente a ERA M

Para comprender la relación entre WASM y JavaScript, también debemos compararlos. Básicamente, WASM es más rápido y tiene un formato binario para la compilación de destino, mientras que JavaScript es un lenguaje de alto nivel. El código binario de WASM dificulta el aprendizaje, pero hay formas de trabajar de manera efectiva con WASM.

La principal diferencia entre WASM y JavaScript incluye lo siguiente:

• WASM es un lenguaje compilado, mientras que JS es un lenguaje interpretado. El navegador debe descargar y analizar JavaScript en tiempo de ejecución, mientras que el código WASM está listo para ejecutarse con su código precompilado.
• WebAssembly es un lenguaje de bajo nivel. Por otro lado, JavaScript es un lenguaje de alto nivel. Al ser de alto nivel, JS es fácil de usar. Sin embargo, al ser WASM de bajo nivel, puede ejecutarse mucho más rápido que JavaScript.
• Finalmente, JavaScript se beneficia de su gran comunidad. Entonces, si está buscando una mejor experiencia de desarrollo, JS es una opción obvia. WebAssembly, por otro lado, es relativamente nuevo y, por lo tanto, carece de recursos.

Como desarrollador, no tiene que preocuparse por elegir uno. De hecho, JS y WASM trabajan juntos y no uno contra el otro.

Por lo tanto, si está escribiendo una aplicación de alto rendimiento, es posible que desee utilizar WebAssembly para codificar solo las partes que necesitan rendimiento. La API de JavaScript puede ayudarlo a recuperar y usar módulos WASM directamente en su código JavaScript.

Pensamientos finales

Con todo, WebAssembly es un gran compañero para JavaScript. Invita a los desarrolladores a crear aplicaciones de alto rendimiento en la web y fuera de la web. Además, hace esto sin intentar reemplazar JavaScript.

Sin embargo, ¿WASM se convertirá en un paquete completo y reemplazará a JavaScript? Bueno, eso es probablemente imposible, dados los objetivos de WebAssembly. Sin embargo, la idea de que WebAssembly reemplace a JavaScript en el futuro no es del todo refutable.

A continuación, conozca las mejores bibliotecas de interfaz de usuario de JavaScript (JS) para crear aplicaciones modernas.

Fuente