Geekflare cuenta con el apoyo de nuestra audiencia. Podemos ganar comisiones de afiliados comprando enlaces en este sitio.
Comparte en:

WebAssembly para principiantes - Parte 1: Introducción a WASM

web-assembly-banner-1
Escáner de seguridad de aplicaciones web Invicti – la única solución que ofrece verificación automática de vulnerabilidades con Proof-Based Scanning™.

¿Ha pensado alguna vez en ejecutar aplicaciones web con un rendimiento nativo? Si es así, tiene una opción interesante: WebAssembly, también conocido como WASM.

Las tecnologías web actuales se centran en un enfoque rico en funcionalidades. Tome JavaScript, por ejemplo. Usando JavaScript, puede manipular DOM, dibujar hermosos gráficos e incluso ejecutar un juego en el navegador. Sin embargo, ejecutar código JavaScript en el navegador es comparativamente lento para ejecutar tareas orientadas al rendimiento.

En este artículo, echaremos un vistazo más de cerca a WebAssembly. Empecemos.

What is WebAssembly?

WebAssembly es un nuevo lenguaje de bajo nivel que se ejecuta en los navegadores web modernos. Ofrece un formato binario compacto capaz de funcionar con un rendimiento casi nativo. 

Las opciones de diseño de WebAssembly coinciden con el rendimiento de los lenguajes de programación como Rust, C++ y C, que ofrecen un rendimiento nativo ya que pueden comunicarse directamente con el hardware.

WebAssembly convierte el código fuente escrito en C, C++ y Rust en lenguaje de bajo nivel, actuando como un objetivo de compilación eficaz para estos lenguajes de programación. Abre el camino para que las aplicaciones web se ejecuten a velocidades casi nativas en la web.

Para comprender la imagen completa, debemos comenzar con JavaScript.

JavaScript es el lenguaje de la web. Está omnipresente en todas las aplicaciones web modernas. Sin embargo, JavaScript es lento ya que es un lenguaje de tipo dinámico. Durante el tiempo de ejecución, se realizan verificaciones de tipos y el intérprete V8 convierte el código en código de máquina dinámicamente. Solo después de eso, se ejecuta el código de máquina.

Navegador de trabajo con motor V8
Motor V8 en navegador web

La inclusión de WebAssembly en V8 abre la puerta al desarrollo y ejecución de aplicaciones de alto rendimiento en la web. Permite a los desarrolladores escribir una parte específica de su base de código en C, C++ o Rust.

Sin embargo, eso no significa que deba escribir todo el código de su aplicación en WebAssembly. Todo lo que necesita hacer es escribir su aplicación web para llamar a las API y funciones de WebAssembly a través de JavaScript. Marcos de JavaScript puede utilizar WebAssembly para aumentar el rendimiento de los desarrolladores al tiempo que ofrece una excelente funcionalidad lista para usar.

2-2
Interacción de WebAssembly con JS, CSS y HTML

Un gran ejemplo del uso de WebAssembly es ejecutar FFmpeg, una poderosa herramienta de procesamiento de video, en un navegador. Anteriormente, no podía ejecutar FFmpeg usando Emscripten, una cadena de herramientas del compilador, a WebAssembly.

Sin embargo, en los últimos tiempos, ahora es completamente posible ejecutar FFmpeg en un navegador con ffmpeg.wasm. Este puerto de JavaScript/WebAssembly le permite cortar, trocear y ocultar videos directamente dentro de los navegadores.

WebAssembly Features

Las características de WebAssembly son simples y directas. Es rápido, portátil y eficiente. De forma predeterminada, WebAssembly aprovecha el hardware subyacente para ofrecer velocidades de ejecución similares a las nativas. También es seguro, considerando que se ejecuta en un entorno de espacio aislado, al igual que JavaScript se ejecuta en un navegador.

webassembly-features-1
Características de WebAssembly

Aunque WebAssembly es un lenguaje ensamblador de bajo nivel, todavía ofrece una interfaz depurable con un formato de texto legible por humanos. Entonces, si desea depurar el código WASM, puede abrir el código en el editor de texto y depura como cualquier otro lenguaje de programación.

Por último, el navegador no espera a que se descargue todo el código de WebAssembly para que comience la compilación. Por ejemplo, el navegador comenzará a compilar el código WASM tan pronto como lo reciba. Entonces, para una carga útil de WebAssembly de 500 KB, el navegador comenzará a compilar desde el primer byte que reciba.

Will WebAssembly replace JavaScript?

Trabajos de montaje web bien dentro del ecosistema web. Entonces, si opta por usar WebAssembly, no tiene que reemplazar nada. WebAssembly funciona con JavaScript para permitirle escribir aplicaciones web basadas en el rendimiento.

Cuando trabaje en su aplicación web, puede llamar a la función WASM dentro de su código JavaScript. Solo querría usar WebAssembly para tareas de uso intensivo de CPU en un escenario del mundo real.

Además, WebAssembly no puede acceder ni manipular objetos del Modelo de objetos del documento (DOM). Y es por eso que aún necesita JavaScript para desarrollar aplicaciones web.

WebAssembly Limitations

WebAssembly viene con algunas limitaciones. Estas limitaciones incluyen lo siguiente:

  • WASM no puede manipular la interfaz de usuario o el front-end, ya que no puede interactuar con DOM. Para superar esto, necesita usar JavaScript.
  • WASM no ofrece ninguna herramienta de administración de memoria. Esto significa que no proporciona un recolector de basura. 
  • WebAssembly tiene algunos problemas de seguridad, especialmente para los navegadores web. Actualmente, no existen herramientas para validar el código WASM. Entonces, si alguien inserta código malicioso, no hay manera de comprobarlo. 
  • Aunque WASM ofrece un formato de texto legible por humanos para los programadores, aún puede ser difícil de analizar y depurar.

WASM Roadmap and Community-Support

WebAssembly es nuevo y sigue creciendo. Cuatro navegadores principales, incluidos Edge, Chrome, Firefox y WebKit, actualmente lo admiten. Entonces, si está creando para la web, todavía no es "aún" una elección ideal, ya que no todos los navegadores son compatibles con WASM.

WASM sigue los estándares web. los Grupo de trabajo de ensamblaje web del W3C y Grupo de la comunidad están trabajando con los principales proveedores de navegadores para hacer que WASM sea más convencional.

Para saber más, echa un vistazo a sus Caminoap .

Palabras finales

WebAssembly brinda a los desarrolladores la herramienta necesaria para crear aplicaciones web de alto rendimiento. Ofrece ejecución especializada de código para una salida más rápida. Sin embargo, todavía está en su etapa infantil. WASM aún necesita tiempo para obtener el apoyo de toda la comunidad. A partir de ahora, sólo cuatro grandes navegadores apoyo WASM.

A continuación, puede mirar Ensamblaje web, parte 2: objetivos, conceptos clave y casos de uso.

Gracias a nuestros patrocinadores
Más lecturas interesantes sobre el desarrollo
Impulse su negocio
Algunas de las herramientas y servicios para ayudar a que su negocio crezca.
  • Invicti utiliza Proof-Based Scanning™ para verificar automáticamente las vulnerabilidades identificadas y generar resultados procesables en cuestión de horas.
    Prueba Invicti
  • Web scraping, proxy residencial, administrador de proxy, desbloqueador web, rastreador de motores de búsqueda y todo lo que necesita para recopilar datos web.
    Prueba Brightdata
  • Semrush es una solución de marketing digital todo en uno con más de 50 herramientas en SEO, redes sociales y marketing de contenido.
    Prueba Semrush
  • Intruder es un escáner de vulnerabilidades en línea que encuentra debilidades de ciberseguridad en su infraestructura, para evitar costosas filtraciones de datos.
    Intente Intruder