Objetivos, conceptos clave y casos de uso

por

¿Se ha preguntado acerca de los conceptos clave y los casos de uso de WASM? Si no, lo tenemos cubierto.

WebAssembly (WASM) es un nuevo lenguaje de bajo nivel que le permite desbloquear el rendimiento nativo en la web.

En WebAssembly para principiantes – Parte 1, presentamos WASM desde la perspectiva de un principiante al cubrir su definición y limitaciones. Además, analizamos las características de WebAssembly, la hoja de ruta de WASM y cómo funciona JavaScript con WebAssembly, y no contra él.

Esta publicación explorará WebAssembly discutiendo los objetivos, conceptos clave y casos de uso de WASM. También echaremos un vistazo a algunos de sus emocionantes proyectos.

Empecemos.

Objetivos de ensamblaje web

Para comprender los conceptos clave de WebAssembly, primero debemos analizar sus objetivos. Estos objetivos incluyen:

  • Capacidad para aprovechar el hardware disponible mediante el uso de formato binario de tiempo de carga y tamaño eficiente como destino de compilación. En palabras simples, WASM utiliza un árbol de sintaxis abstracta (AST) en formato binario, que admite la compilación y la ejecución a velocidad nativa. Al usar el enfoque, WASM puede funcionar en varios dispositivos, incluidos IoT, Web y móvil.
  • El objetivo de WASM no es alterar o cambiar la plataforma web existente. Con este enfoque, WebAssembly puede integrarse bien con la Web actual y pasada. También permite que WebAssembly funcione a la perfección con JavaScript, lo que incluye la ejecución simultánea o la realización de llamadas sincrónicas desde JavaScript.
  • Para trabajar sin problemas con políticas de seguridad y permisos del mismo origen.
  • Asegúrese de que los desarrolladores puedan diseñar sus soluciones para admitir incrustaciones que no sean de navegador.
  • Por último, brinda a los desarrolladores las herramientas para trabajar de manera eficiente con el código fuente de WebAssembly al proporcionar un formato de texto editable por humanos.

Conceptos clave de WebAssembly

Dentro de la campana, WebAssembly sigue los siguientes pasos:

  • Al principio, debe escribir código en un lenguaje de tipos estáticos con tipos definidos.
  • Una vez hecho esto, genera un módulo WASM precompilado e introduce el código en el compilador del motor.
  • El paso anterior garantiza que WASM omite el análisis y prepara el código para que se represente en el navegador web.

Los conceptos clave detrás de la ejecución de WebAssembly en el navegador web incluyen:

  • Memoria: la memoria en WebAssembly es administrada y escrita por sus instrucciones de acceso a la memoria de bajo nivel. Técnicamente, es un ArrayBuffer redimensionable y contiene una matriz de bytes de memoria.
  • Módulo: El Módulo en WebAssembly es un código de computadora ejecutable compilado. Debido a su forma sin estado, el navegador web compila el Módulo y lo comparte entre Windows y Workers. Además, el Módulo almacena y declara importaciones y exportaciones, además de albergar las funciones, tablas, tipos, globales y Memoria.
  • Tabla: una tabla consta de todas las referencias y funciones que utilizan una matriz con tipo de tamaño variable. Esto elimina la necesidad de almacenar bytes sin formato en la memoria.
  • Instancia: en WASM, una instancia es un módulo durante el tiempo de ejecución, con todos los estados emparejados. Estos estados incluyen Tabla, Memoria y otros conjuntos de valores importados.

Conceptos clave de WASM

Como desarrollador web, puede usar la API de JavaScript para llamar y definir módulos, tablas, instancias y tablas. Además, utiliza JavaScript para llamar a las exportaciones de WASM de forma síncrona dentro de las funciones de JavaScript. Por lo tanto, JavaScript funciona bien con WebAssembly, ya que puede usar WASM para escribir aplicaciones de alto rendimiento en el navegador web.

Objetos WASM

Cuando trabaje con WebAssembly, debe realizar un seguimiento de ocho objetos WASM. Estos objetos incluyen:

  • WebAssembly.Global: el objeto Global es una instancia de variable global. Es accesible tanto por WebAssembly.Module como por JavaScript.
  • WebAssembly.Module: aquí, el objeto Módulo contiene el código WASM sin estado. El código está precompilado.
  • WebAssembly.Instance: WebAssembly.Instance es la instancia ejecutable y con estado de WebAssembly.Module.
  • WebAssembly.Table: el objeto Table contiene referencias a funciones y actúa como un contenedor de JavaScript.
  • WebAssembly.CompileError: el objeto CompileError contiene todos los errores durante la validación y la decodificación.
  • WebAssembly.RuntimeError: aquí, el objeto RuntimeError enumera todos los errores de tiempo de ejecución.
  • WebAssembly.LinkError: el objeto LinkError contiene errores que se producen durante la instanciación del módulo.

Proyectos y casos de uso de WASM

Ya sabemos que WebAssembly ofrece un rendimiento nativo en el navegador web. Sin embargo, para comprender realmente dónde puede usarlo, debe observar sus casos de uso. Enumeremos a continuación algunos de los casos de uso de WASM.

Los casos de uso de WebAssembly abarcan tanto dentro como fuera del navegador. Por ejemplo, si desea utilizar WASM en un navegador, puede hacer muchas cosas, entre ellas:

  • Edición de video o audio, como el proyecto ffmpegwasm.
  • Videojuegos en el navegador web, como estos juegos de alto rendimiento.
  • Visualización y simulación científica
  • Emulación/simulación de plataformas como DOSBox, MAME, etc.
  • Cifrado
  • Escritorio remoto
  • Herramientas para desarrolladores

Casos de uso

Desde un punto de vista general, los convincentes casos de uso de WebAssembly incluyen

  • La capacidad de escribir código más rápido puede aprovechar el hardware subyacente.
  • Además, también puede realizar la compresión del lado del cliente, lo que da como resultado un mejor tiempo de carga y un ahorro de ancho de banda. Entonces, usa la CPU del Cliente o el hardware subyacente para realizar la compresión y descompresión, luego usa los recursos del servidor.
  • Además, puede usar diferentes lenguajes de programación para escribir código para la web además de usar JavaScript. Por ejemplo, puede usar Rust, C y C++ para escribir código de alto rendimiento para ciertos aspectos de sus aplicaciones web.

Proyectos

Si pasamos a ejemplos del mundo real, vale la pena mencionar los siguientes proyectos.

  • Figma mejoró el rendimiento de su aplicación web con el uso de WebAssembly. Redujeron el tiempo de carga durante la inicialización de la aplicación, la representación completa del diseño e incluso la descarga de un archivo de diseño. Como discutimos anteriormente, WebAssembly también es excelente para comprimir. Figma implementó WASM para mejorar el tamaño de las descargas, reduciéndolas significativamente.
  • Pyodide: Otro proyecto WASM emocionante es el proyecto Pyodide, que fue lanzado por Mozilla. Permite a los científicos compilar la pila científica de Python en WebAssembly, incluidos NumPy, SciPy, Scikit-learn, etc., en el navegador. Ofrece una conversión de objetos transparente entre Python y JavaScript. Por último, también permite a los desarrolladores usar API web usando Python.
  • Brazor WebAssembly: el marco Brazor WebAssembly permite a los desarrolladores crear aplicaciones web interactivas, del lado del cliente y de una sola página con .NET. Puede alojar estas aplicaciones en el navegador con el tiempo de ejecución de .NET basado en WebAssembly. Aquí, como desarrollador, obtiene acceso a la funcionalidad del navegador en su código .NET con la ayuda de las API de JavaScript de WebAssembly.

Fuente: Figma

Otros muchos proyectos conocidos y dignos están utilizando WebAssembly. Estos son Binaryen, Cheerp, Forest, Grain y otros.

Pensamientos finales

WebAssembly no es exactamente amigable para principiantes. Sin embargo, al estudiar sus casos de uso y conceptos clave, puede comprender claramente su capacidad.

Con proyectos emocionantes en el mercado, es el mejor momento para aprender WebAssembly, especialmente si te dedicas al desarrollo web. La capacidad de WASM para funcionar fuera del navegador también lo convierte en una elección excelente para el desarrollo orientado al rendimiento.

¿Te gustó leer el artículo? ¿Qué tal compartir con el mundo?

No related posts.