Una introducción a WebAssembly

 

 

 

Descubra por qué WebAssembly es una parte muy importante de la plataforma web del futuro

 

WebAssembly es un tema muy interesante hoy en día.

WebAssembly es un nuevo formato binario de bajo nivel para la web. No es un lenguaje de programación que vayas a escribir, sino que se compilarán otros lenguajes de nivel superior (por el momento C, Rust y C++) en WebAssembly para tener la oportunidad de ejecutarse en el navegador.

Está diseñado para ser rápido, seguro para la memoria y abierto.

Nunca escribirás código en WebAssembly (también llamado WASM), sino que WebAssembly es el formato de bajo nivel en el que se compilan otros lenguajes.

Es el segundo lenguaje entendible para los navegadores web, después de la introducción de JavaScript en los años 90.

WebAssembly es un estándar desarrollado por el Grupo de Trabajo WebAssembly del W3C . Hoy en día, todos los navegadores modernos (Chrome, Firefox, Safari, Edge, navegadores móviles) y Node.js lo admiten.

¿He dicho Node.js? Sí, porque WebAssembly nació en el navegador, pero Node ya lo soporta desde la versión 8 y puedes crear partes de una aplicación Node.js en cualquier lenguaje que no sea JavaScript.

Las personas a las que no les gusta JavaScript o prefieren escribir en otros lenguajes, WebAssembly, ahora tendrán la opción de escribir partes de sus aplicaciones para la Web en lenguajes diferentes a JavaScript.

Sin embargo, tenga en cuenta que WebAssembly no está pensado para reemplazar a JavaScript , sino que es una forma de trasladar programas escritos en otros lenguajes al navegador, para potenciar partes de la aplicación que están mejor creadas en esos lenguajes o que ya existen.

El código JavaScript y WebAssembly interoperan para brindar excelentes experiencias de usuario en la Web.

Es un beneficio mutuo para la web, ya que podemos utilizar la flexibilidad y facilidad de uso de JavaScript y complementarlo con la potencia y el rendimiento de WebAssembly.

Seguridad

El código de WebAssembly se ejecuta en un entorno aislado, con la misma política de seguridad que tiene JavaScript, y el navegador garantizará políticas de mismo origen y permisos.

Si estás interesado en el tema te recomiendo leer Memoria en WebAssembly y la documentación de Seguridad de webassembly.org .

 

Actuación

WebAssembly fue diseñado para ser rápido. Su principal objetivo es ser muy, muy rápido. Es un lenguaje compilado, lo que significa que los programas se transformarán en binarios antes de ejecutarse.

Puede alcanzar un rendimiento que casi coincide con el de lenguajes compilados de forma nativa como C.

En comparación con JavaScript, que es un lenguaje de programación dinámico e interpretado, la velocidad no se puede comparar. WebAssembly siempre superará el rendimiento de JavaScript, porque al ejecutar JavaScript, el navegador debe interpretar las instrucciones y realizar cualquier optimización que pueda sobre la marcha.

¿Quién utiliza WebAssembly hoy en día?

¿WebAssembly está listo para usarse? ¡Sí! Muchas empresas ya lo están usando para mejorar sus productos en la Web.

Un buen ejemplo que probablemente ya hayas utilizado es Figma , una aplicación de diseño que también utilizo para crear algunos de los gráficos que utilizo en el trabajo diario. Esta aplicación se ejecuta dentro del navegador y es muy rápida.

La aplicación está construida con React, pero la parte principal de la aplicación, el editor de gráficos, es una aplicación C++ compilada en WebAssembly, renderizada en un Canvas usando WebGL.

A principios de 2018, AutoCAD lanzó su popular producto de diseño que se ejecuta dentro de una aplicación web, utilizando WebAssembly para renderizar su complejo editor, que se creó con C++ (y se migró desde la base de código del cliente de escritorio).

La Web ya no es una tecnología limitante para aquellos productos que requieren una pieza de alto rendimiento en su núcleo.

¿Cómo puedes utilizar WebAssembly?

Las aplicaciones C y C++ se pueden trasladar a WebAssembly usando Emscripten , una cadena de herramientas que puede compilar su código en dos archivos:

  • un .wasmarchivo
  • un .js archivo

donde el .wasmarchivo contiene el código WASM real y el .jsarchivo contiene el pegamento que permitirá que el código JavaScript ejecute WASM.

Emscripten hará mucho trabajo por ti, como convertir llamadas OpenGL a WebGL, proporcionará enlaces para la API DOM y otras API de navegadores y dispositivos, proporcionará utilidades del sistema de archivos que puedes usar dentro del navegador y mucho más. De manera predeterminada, esas cosas no son accesibles directamente en WebAssembly, por lo que es de gran ayuda.

El código Rust es diferente, ya que se puede compilar directamente en WebAssembly como su destino de salida, y existe un https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm . Fotos Porno y actrices porno

¿Qué le espera a WebAssembly en el futuro? ¿Cómo evoluciona?

WebAssembly ya se encuentra en la versión 1.0. Actualmente, solo admite oficialmente tres lenguajes (C, Rust, C++), pero se incorporarán muchos más. Go, Java y C# no se pueden compilar (oficialmente) en WebAssembly porque aún no hay compatibilidad con la recolección de elementos no utilizados.

Al realizar cualquier llamada a las API del navegador mediante WebAssembly, actualmente es necesario interactuar primero con JavaScript. Se está trabajando para que WebAssembly sea un ciudadano de primera clase en el navegador y que pueda llamar directamente a DOM, Web Workers u otras API del navegador.

 

Además, se está trabajando para poder hacer que el código JavaScript pueda cargar módulos WebAssembly, a través de la especificación de Módulos ES .

Instalación de Emscripten

Instale Emscripten clonando el emsdkrepositorio de GitHub:

git clone https://github.com/juj/emsdk.git

entonces

dev cd emsdk

Ahora, asegúrate de tener instalada una versión actualizada de Python. Tenía la versión 2.7.10 y esto provocó un error de TLS.

Tuve que descargar el nuevo (2.7.15) desde https://www.python.org/getit/ instalarlo y luego ejecutar el Install Certificates.commandprograma que viene con la instalación.

Entonces

./emsdk install latest

Déjalo descargar e instalar los paquetes, luego ejecútalo

./emsdk activate latest

y agrega las rutas a tu shell ejecutando:

source ./emsdk_env.sh

Compilar un programa en C en WebAssembly

Voy a crear un programa simple en C y quiero que se ejecute dentro del navegador.

Este es un programa “Hola mundo” bastante estándar:

#include stdio.hint main(int argc, char ** argv) { printf("Hello Worldn");}

Podrías compilarlo usando:

gcc -o test test.c

y al ejecutarlo ./testimprimiría “Hola mundo” en la consola.

Compilemos este programa usando Emscripten para ejecutarlo en el navegador:

emcc test.c -s WASM=1 -o test.html

Emscripten nos proporcionó una página HTML que ya contiene el programa WebAssembly compilado y listo para ejecutarse. Sin embargo, debe abrirlo desde un servidor web, no desde el sistema de archivos local, por lo que debe iniciar un servidor web local, por ejemplo, el http-serverpaquete global npm (instálelo usando npm install -g http-serversi aún no lo tiene instalado). Aquí está:

Como puedes ver, el programa se ejecutó e imprimió “Hola mundo” en la consola.

Esta era una forma de ejecutar un programa compilado en WebAssembly. Otra opción es hacer que un programa exponga una función que se va a llamar desde JavaScript.

Llamar a una función WebAssembly desde JavaScript

Vamos a modificar el Hola Mundo definido anteriormente.

Incluir los emscriptenencabezados:

#include emscripten/emscripten.h

y definir una hellofunción:

int EMSCRIPTEN_KEEPALIVE hello(int argc, char ** argv) { printf("Hello!n"); return 8;}

EMSCRIPTEN_KEEPALIVEes necesario para evitar que la función se elimine automáticamente si no se llama desde main()otro código o si se ejecuta al inicio (ya que, de lo contrario, el compilador optimizaría el código compilado resultante y eliminaría las funciones no utilizadas, pero vamos a llamarlo dinámicamente desde JS, y el compilador ahora lo sabe).

Esta pequeña función imprime ¡Hola! y devuelve el número 8.

Ahora si compilamos nuevamente usando emcc:

emcc test.c -s WASM=1 -o test.html -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"

Esta vez agregamos una EXTRA_EXPORTED_RUNTIME_METHODSbandera para indicarle al compilador que deje las funciones ccally cwrapen el objeto Módulo, que usaremos en JavaScript.

Ahora podemos volver a iniciar el servidor web y, una vez abierta la página Module.ccall('hello', 'number', null, null), llamar a la consola e imprimirá “¡Hola!” y devolverá 8:

Los 4 parámetros que Module.ccalltoma son el nombre de la función C, el tipo de retorno, los tipos de argumentos (una matriz) y los argumentos (también una matriz).

Si nuestra función aceptara 2 cadenas como parámetros, por ejemplo, la habríamos llamado así:

Module.ccall('hello', 'number', ['string', 'string'], ['hello', 'world'])

Los tipos que podemos utilizar son null, string, number, array, boolean.

También podemos crear un contenedor de JavaScript para la hellofunción usando la Module.cwrapfunción, de modo que podamos llamar a la función tantas veces como queramos usando la contraparte de JS:

const hello = Module.cwrap('hello', number, null, null)

Aquí están los documentos oficiales de ccallycwrap .

Tips para principiantes de JavaScript




Tal vez te puede interesar:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. Cómo comprobar si un elemento DOM tiene una clase

Una introducción a WebAssembly

Una introducción a WebAssembly

SeguridadActuación¿Quién utiliza WebAssembly hoy en día?¿Cómo puedes utilizar WebAssembly?¿Qué le espera a WebAssembly en el futuro? ¿Cómo evoluciona

programar

es

https://aprendeprogramando.es/static/images/programar-una-introduccion-a-webassembly-1830-0.jpg

2024-10-28

 

Una introducción a WebAssembly
Una introducción a WebAssembly

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences