WebAssembly: qué es y cómo crear un Hello World

Las páginas web actualmente utilizan dos tipos de lenguajes de programación. Por un lado tenemos los lenguajes del lado del servidor (como PHP) que se ejecutan en el propio servidor del sitio web y envían la información ya procesada al usuario. Y por otro lado, los lenguajes de programación del lado del cliente que se ejecutan en el propio navegador del usuario. Aunque el lenguaje más utilizado en la programación web del lado del cliente es JavaScript, existen otras alternativas que superan con creces este lenguaje. Y uno de ellos es Asamblea web .

¿Qué es WebAssembly?

WebAssembly es un lenguaje de programación frontend que se anunció por primera vez en 2015. En 2016 se realizó la primera demostración de este lenguaje en Firefox, cromo, Google Chrome y Microsoft Edge ejecutando una demostración popular llamada “Unity’s Angry Bots”.

Este lenguaje de programación, abreviado como ERA M , utiliza un formato de código binario portátil, bytecode). Gracias a él, los scripts del lado del cliente se ejecutan completamente en el navegador. Es un lenguaje de programación de bajo nivel, y aunque originalmente se creó como un objetivo de compilación para Código C y C ++ , también es compatible con otros lenguajes como Go y Rust.

Este lenguaje de programación ha demostrado ser considerablemente más rápido que otros lenguajes de programación como JavaScript. Además, casi no tiene limitaciones en cuanto a funciones, ya que permite ejecutar casi cualquier código de escritorio directamente en el navegador. Y con una velocidad casi nativa.

WASM no se creó para reemplazar JavaScript ni ningún otro lenguaje de interfaz, sino para complementarlos. Los navegadores son capaces de ejecutarlo al mismo tiempo, pudiendo cargar módulos creados en WebAssembly en aplicaciones JavaScipt.

Actualmente, WebAssembly 1.0 ya está incluido en el Firefox, Chrome, Safari y Edge motores

Características de WASM

Con tantos lenguajes de programación funcionando hoy en día, es difícil encontrar diferencias críticas entre todos ellos. Pero WebAssembly ha apostado principalmente por diferenciarse de sus rivales en dos aspectos. Por un lado estamos hablando de un rápido y eficiente lenguaje de programación, un lenguaje ya de bajo nivel que nos permitirá ejecutar código binario desde el navegador. Al ahorrarse intermediarios o intérpretes, el código se ejecuta casi instantáneamente en el hardware, consiguiendo una velocidad casi nativa.

Por otra parte, este lenguaje también ha apostado por seguridad . WASM utiliza técnicas para cargarse en la memoria de forma segura (con un espacio aislado) para que el entorno de tiempo de ejecución esté aislado del resto del sistema. Este entorno seguro puede incluso implementarse dentro de las máquinas virtuales de JavaScript existentes, lo que ofrece seguridad adicional contra otros elementos. Este idioma aplicará las políticas de seguridad del sistema, así como los permisos propios del navegador.

Por supuesto, todo lo relacionado con este lenguaje de programación es abierto . Sus instrucciones se pueden imprimir en un lenguaje textual (no debemos escribir en unos y ceros) y se puede depurar, probar, modificar y experimentar con él sin problemas. Además, está diseñado para la preservación de la web abierta, siendo compatible con las mismas API que JavaScript y retrocompatible con versiones anteriores.

Cómo programar en WebAssembly

Este lenguaje de programación es abierto, por lo que cualquiera puede usarlo para lo que quiera. Además, aunque se considera un lenguaje de bajo nivel, no es realmente complicado de usar.

Diferenciando los tres estados

A la hora de hablar de este lenguaje de programación, en primer lugar debemos diferenciar entre tres estados diferentes:

  • Código fuente . El código del programa como tal. Este código generalmente está escrito en un lenguaje de programación diferente, por lo que no es difícil crear programas o módulos con él. Podemos elegir el lenguaje de programación que queramos en este paso, siempre que sea compatible. Los más utilizados suelen ser C++ y Rust.
  • Código de bytes de WebAssembly . A la hora de compilar el programa lo que debemos hacer es elegir que queremos hacerlo en este formato. El propio compilador de nuestro entorno de programación se encargará de utilizar las instrucciones del IDE para convertir el código del otro lenguaje a este formato. Lo que obtendremos al final es un archivo .wasm.
  • Codigo de maquina . Cuando tengamos el archivo WASM compilado, lo abrimos en el navegador. Y este es el que se encarga de traducir el código directamente a lenguaje máquina, es decir, a binario.

Además, WebAssembly tiene un lenguaje intermedio conocido como texto WASM. Este lenguaje viene a ser como un lenguaje de programación de alto nivel para WASM. Los archivos escritos en este idioma se guardan en archivos con extensión WAT, y necesitaremos una herramienta llamada ” Kit de herramientas binarias WebAssembly ” para convertirlo en un archivo .wasm. No se suele utilizar ya que es mucho más complicado que los otros idiomas y, al final, no merece la pena. Pero existe, y hay que saberlo.

Crear nuestro primer programa

Hay muchas formas de compilar un programa o módulo WebAssembly. Recomendamos, por example, para utilizar el SDK de Emscripten, que podemos descargar desde aquí .

A continuación, necesitaremos que nuestro módulo esté escrito en este lenguaje de programación. vamos a usar un example de un “Hello World” escrito en C. Nuestro archivo, hello.c, tendrá el siguiente texto:

#include <stdio.h> int main() {printf("Hello Worldn");}

Una vez que tengamos nuestro archivo escrito en C, usaremos el ” Escriban ” herramienta para pasarlo a WASM. Podemos ejecutar Emscripten desde Python o, mejor, desde un subsistema de Windows para Linux. Si estamos programando desde Windows, y no queremos usar Linux, entonces debemos buscar otro compilador equivalente. Para hacerlo con Emscripten, abriremos una consola de Windows, y en ella ejecutaremos este comando:

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

El parámetro “WASM=1” se encarga de indicarle al programa que lo que queremos es compilar el código en este lenguaje. El resultado, una vez finalizadas las instrucciones, será:

  • Un archivo hello.wasm, el binario.
  • Un archivo JavaScript que contiene las dependencias necesarias para traducir de C a WASM: hello.js.
  • El archivo hello.html necesario para abrir el archivo wasm en el navegador y compilarlo.

Simplemente ejecutando el “hello.html” estaremos ejecutando el código en WebAssembly.

Related Posts