WebAssembly
Para qué programar en JavaScript cuando podemos escribir assembler
/julito
dev en constructor.io
¿Qué es WebAssembly?
Target de bajo nivel 🔬
Binario 💯
Formato para la web 🌎
Creating and working with WebAssembly modules, de Lin Clark
¿Para qué sirve WebAssembly?
Cuando algo tiene que ser rápido
Cuando algo ya está hecho en C
Cuando algo no lo quiero hacer en JavaScript
rlox
Compilar algo
#[no_mangle]
pub fn sum(a: i32, b: i32) -> i32 {
a + b
}rustc +nightly sum.rs \
--crate-type=cdylib \
--target wasm32-unknown-unknown \
-C panic=abort \
-C opt-level=3WebAssembly
.instantiateStreaming(fetch('./sum.wasm'))
.then(results => {
console.log(results.instance.exports.sum(1, 2))
})(module
(type $type0 (func (param i32 i32) (result i32)))
(export "sum" (func $func0))
(func $func0 (param $var0 i32) (param $var1 i32) (result i32)
get_local $var1
get_local $var0
i32.add
)
)Comunicación
WASM ↔️ JS
i=3
Webpack y Parcel
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.rs$/,
use: [
{
loader: 'wasm-loader'
},
{
loader: 'rust-native-wasm-loader'
}
]
}
]
}
}
// index.js
import loadAdd from '../add/src/lib.rs';
loadAdd().then(result => {
const add = result.instance.exports.add;
console.log(add(2, 3));
});
import { add } from './add.rs';
console.log(add(2, 3));stdweb
fn hash(string: String) -> String {
let mut hasher = Sha1::new();
hasher.update(string.as_bytes());
hasher.digest().to_string()
}
fn main() {
stdweb::initialize();
js! {
Module.exports.sha1 = @{hash};
}
}html! {
<nav class="menu",>
<MyButton: title="First Button",/>
<MyButton: title="Second Button",/>
</nav>
}yew
AutoCAD
ammo.js (Bullet)
web-dsp
Figma
wasmBoy
¡Gracias!
wasm-reference-manual, de Dan Gohman
A cartoon intro to WebAssembly, de Lin Clark
WebAssembly — The missing tutorial, de Mads Sejersen
Hello, Rust!, de Jan-Erik Rediger
awesome-wasm-langs, de Steve Akinyemi