Disclaimer
Imágenes, inspiración y algunas ideas a
continuación, han sido tomadas de varios
recursos abiertos; en particular el blog
https://hacks.mozilla.org/ y los posts y
presentaciones de Lin Clark (@linclark).
Slide 4
Slide 4 text
Qué es WebAssembly?
“WebAssembly (abbreviated Wasm) is a binary instruction
format for a stack-based virtual machine. Wasm is designed
as a portable target for compilation of high-level languages
like C/C++/Rust, enabling deployment on the web for client
and server applications.”
Fuente: https://webassembly.org/
Qué es Rust?
“Rust es un lenguaje de programación de sistemas
extremadamente rápido, previene fallas de segmentación y
garantiza la seguridad de los hilos de ejecución.”
Fuente: https://www.rust-lang.org/es-ES/
Slide 11
Slide 11 text
● Performance
● Minimal runtime
● Memory safety without GC
● No data races
● High-level abstractions
● Awesome build system / dev experience (rustup, cargo, ...)
● Más amigable para desarrolladorxs web?
● Reemplazo de C y C++?
Por qué Rust?
Slide 12
Slide 12 text
Rust vs ...
Fuente: “A Case for Oxidation” - Sergio Benítez https://youtu.be/cDFSrVhnZKo?t=262
Slide 13
Slide 13 text
Sin más preámbulo,
… nos tiramos a la piscina...
Slide 14
Slide 14 text
Instalar rust
curl https://sh.rustup.rs -sSf | sh
Slide 15
Slide 15 text
Rust toolchain y wasm como target
● # configura toolchain nightly por defecto
rustup default nightly
● # añade wasm como target
rustup target add wasm32-unknown-unknown \
--toolchain nightly
Fuente: https://rustwasm.github.io/wasm-bindgen/whirlwind-tour/basic-usage.html
Slide 16
Slide 16 text
Cargo
● cargo new
● cargo init
● cargo run
● cargo build
● cargo test
● cargo install
● cargo publish
● ...
Slide 17
Slide 17 text
Rust => Wasm (101)
● # creamos un proyecto indicando que va a ser una librería
cargo new --lib limajs
● Modificamos el tipo de “crate” en Cargo.toml:
[lib]
crate-type = ["cdylib"]
Slide 18
Slide 18 text
Un poquito de código en Rust!
#[no_mangle]
pub fn sum(a: i32, b: i32) -> i32 {
a + b
}
Slide 19
Slide 19 text
Compilemos nuestro programa
# Esto debería crear un archivo wasm:
# target/wasm32-unknown-unknown/debug/limajs.wasm
cargo build --target wasm32-unknown-unknown
Slide 20
Slide 20 text
Invocando una función de Rust desde JavaScript
fetch('target/wasm32-unknown-unknown/debug/limajs.wasm')
.then(resp => resp.arrayBuffer())
.then(buffer => WebAssembly.instantiate(buffer))
.then(wasm => console.log(wasm.instance.exports.sum(2, 3)));
Slide 21
Slide 21 text
Optimizando el archivo wasm con wasm-gc
cargo install wasm-gc
# post-procesamos con wasm-gc...
wasm-gc \
target/wasm32-unknown-unknown/debug/limajs.wasm \
limajs.gc.wasm
Y si necesitamos pasar más que números entre
Rust y JavaScript?
extern {
fn printToDOM(x: String);
}
#[no_mangle]
pub fn run() {
unsafe {
printToDOM(String::from("OMG"));
}
}