Adrián Arroyo Calle

Este post usa Emscripten para generar WebAssembly con Rust. Hoy día Emscripten no es necesario, pero no he podido actualizar el tutorial

Instalando Rust y Emscripten

curl https://sh.rustup.rs -sSf | sh

rustup target add wasm32-unknown-emscripten

source ./emsdk_env.sh

emsdk update

emsdk install latest

emsdk activate latest

source ./emsdk_env.sh

emcc -v (para comprobar)

Escribiendo el programa en Rust

fn main(){

println!("Hola mundo - WebAssembly + Rust");

}



rustc --target=wasm32-unknown-emscripten main.rs -o main.html



Cargas librerías en Rust desde JavaScript

#[no_mangle]

pub fn random_number() -> i32 {

42

}



fn main() {



}





rustc --target=wasm32-unknown-emscripten random.rs



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

</head>

<body>

<script>

var Module = {

wasmBinaryFile: "random.wasm",

onRuntimeInitialized: main,

};

function main() {

var random_number = Module.cwrap("random_number","number",[]);

alert(random_number());

}

</script>

<script src="random.js"></script>

</body>

</html>



Conclusión

Una de las cosas que más me han sorprendido del mundo web en estos años fue el proyecto WebAssembly. Un proyecto que pretendía traer un bytecode unificado para navegadores. Un proyecto que permitiría compilar prácticamente cualquier lenguaje a la web sin necesidad de tocar JavaScript.El proyecto surgía de iniciativas fracasadas de Google (PNaCl) y de Mozilla (asm.js). Pero a este proyecto se unieron Microsoft y Apple, por lo que la compatibilidad estaba asegurada.WebAssembly es un bytecode (como el de Java o el de .NET) que puede ser ejecutado por un navegador, cada navegador implementa su máquina virtual. También es posible usarlo en otros entornos relacionados con el mundo JavaScript como Node.js. Sin embargo entre los objetivos de WebAssembly está no estar atado a JavaScript, por lo que la especificación puede ser implementada por cualquier otro tipo de entorno. Actualmente WebAssembly no tiene recolector de basura y no tiene acceso directo a las Web API. No obstante, sigue siendo un proyecto interesante. Vamos a ver como usar WebAssembly con Rust.Instala Rust, la versión estable es compatible con lo que queremos. Recomiendo usar Rustup.El paso clave es instalar un nuevo target, el target de WASM32 (WebAssembly de 32 bits).Por supuesto también hace falta instalar Emscripten. Descarga la versión portable de Emscripten aquí . Descomprime y ejecutaEmscripten ya estará instalado junto con Clang y las piezas claves de LLVM necesarias.Vamos a escribir un programa simple. Un hola mundo.Compilamos con rustcEsto genera diversos archivos: main.html, main.js, main.wasm y main.asm.js (para compatibilidad con navegadores que no tienen WebAssembly). El fichero .wasm contiene el bytecode, si intentas abrirlo verás que es ilegible. Sin embargo, Chrome, Firefox, Edge, Safari y Node.js entenderán ese archivo. Probamos el fichero main.html en Firefox (cuya última versión soporta WebAssembly por defecto):Usando este sistema compilamos aplicaciones enteras. Si se ajustan ciertos parámetros de Emscripten y se usa una crate adecuada en Rust puede usarse para generar juegos 3D usando WebGL escritos 100% en Rust.En el paso anterior vimos como compilar a WASM aplicaciones enteras. Ahora vamos a compilar el código de Rust a una librería y vamos a cargarlo con JavaScript.La librería va a ser muy simple:Ahora compilamos el fichero a WebAssemblyAhora vamos a cargar el fichero random.wasm. Para ello usaremos la ayuda de random.js, que contiene el código necesario para cargar el fichero WASM así como definir los imports que el código Rust espera (variables de entorno, funciones globales, etc). Usando este sistema, podemos ir añadiendo código WASM poco a poco en nuestras webs.Como vemos, ya es posible hoy día usar WebAssembly en nuestros proyectos. Para crear el código WebAssembly podemos usar Rust. El código WASM puede interactuar con el código JavaScript existente. ¿Qué opináis de WebAssembly? ¿Creéis que puede suponer un antes y un después en el mundo web o se seguirá usando JavaScript de forma masiva?