Qué es WebAssembly, el lenguaje de programación para tu navegador

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 de la página web y envían al usuario la información ya procesada. 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 usado en programación web del lado del cliente es JavaScript, existen otras alternativas que superan, con creces, a este lenguaje. Y una de ellas es WebAssembly.

Qué es WebAssembly

WebAssembly es un lenguaje de programación frontend que fue anunciado por primera vez en 2015. En 2016 se realizó la primera demostración de este lenguaje en Firefox, Chromium, Google Chrome y Microsoft Edge ejecutando una conocida demo llamada «Unity’s Angry Bots».

Este lenguaje de programación, abreviado como WASM, utiliza un formato de código binario portable, bytecode). Gracias a él consigue una ejecución íntegra en navegador de los scripts del lado del cliente. Se trata de un lenguaje de programación de bajo nivel, y aunque fue creado originalmente como destino de compilación de código C y C++, también es compatible con otros lenguajes como Go y Rust.

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

WASM no ha sido creado para sustituir a JavaScript ni a ningún otro lenguaje frontend, sino más bien para complementarlos. Los navegadores son capaces de ejecutarlo a la par, pudiendo cargar módulos creados en WebAssembly en aplicaciones JavaScipt.

Actualmente, WebAssembly 1.0 está ya incluido dentro de los motores de Firefox, CHrome, Safari y Edge.

Características de WASM

Con tantos lenguajes de programación funcionando hoy en día es complicado 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 lenguaje de programación rápido y eficiente, un lenguaje ya de bajo nivel que nos va a permitir ejecutar código binario desde el navegador. Al ahorrarnos intermediarios o intérpretes, el código se ejecuta casi al instante sobre el hardware, consiguiendo una velocidad casi nativa.

Por otro lado, este lenguaje también ha apostado por la seguridad. WASM utiliza técnicas para cargarse en la memoria de forma segura (con un sandbox) de manera que el entorno de ejecución está aislado del resto del sistema. Incluso puede implementarse este entorno seguro dentro de las máquinas virtuales JavaScript ya existentes, ofreciendo una seguridad adicional frente a otros elementos. Este lenguaje aplicará las políticas de seguridad del sistema, así como los propios permisos del navegador.

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

Cómo programar en WebAssembly

Este lenguaje de programación es abierto, por lo que cualquiera puede utilizarlo para lo que quiera. Además, aunque es considerado un lenguaje de bajo nivel, en realidad no es complicado de usar.

Diferenciando los tres estados

A la hora de hablar de este lenguaje de programación, antes de nada debemos diferenciar tres estados diferentes:

  • Código fuente. El código del programa como tal. Este código suele estar escrito en un lenguaje de programación diferente, por lo que no es complicado crear programas, o módulos, con este. Podemos elegir el lenguaje de programación que queramos en este paso, siempre que sea compatible. Los más usados suelen ser C++ y Rust.
  • WebAssembly Bytecode. 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 usar las instrucciones del IDE para convertir el código del otro lenguaje a este formato. Lo que obtendremos al final es un fichero .wasm.
  • Código máquina. Cuando ya tenemos el fichero WASM compilado, lo abrimos en el navegador. Y este es el que se encarga de traducir el código directamente a lenguaje de máquina, es decir, a binario.

Además, WebAssembly tiene un lenguaje intermedio conocido como WASM-text. Este lenguaje viene a ser como un lenguaje de programación de alto nivel para WASM. Los archivos escritos en este lenguaje se guardan en ficheros con extensión WAT, y necesitaremos una herramienta llamada «WebAssembly Binary Toolkit» para convertirlo a fichero .wasm. No se suele utilizar ya que es mucho más complicado que los otros lenguajes y, al final, no merece la pena. Pero existe, y hay que conocerlo.

Ejemplo código WebAssembly WASM

Crear nuestro primer programa

Hay muchas formas de compilar un programa o módulo WebAssembly. Nosotros recomendamos, por ejemplo, usar el SDK Emscripten, que podemos bajar desde aquí.

A continuación, necesitaremos nuestro módulo escrito en este lenguaje de programación. Nosotros vamos a usar de ejemplo 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 tenemos nuestro archivo escrito en C, usaremos la herramienta «Emscripten» 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 ejecutaremos en ella este comando:

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

El parámetro «WASM=1» es el encargado de indicar al programa que lo que queremos es compilar el código a este lenguaje. El resultado, una vez finalicen las instrucciones, será:

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

Simplemente con ejecutar el «hello.html» estaremos ejecutando el código en WebAssembly.