Web Assembly, Rust y el futuro de JavaScript

LimaJS 15 Dic 2018

Transcript

1. WebAssembly, Rust y el futuro de JavaScript @lupomontero - LimaJS Dic '18 - Lima, Perú
2. @Laboratoriala @LimaJSorg @NodeSchool @lupomontero @mozillaperu
3. 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).
4. 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/
5. Fuente: https://hacks.mozilla.org/2017/02/creating-and-working-with-webassembly-modules/ Licencia: https://creativecommons.org/licenses/by-sa/3.0/
6. Fuente: https://hacks.mozilla.org/2017/02/creating-and-working-with-webassembly-modules/ Licencia: https://creativecommons.org/licenses/by-sa/3.0/
7. Fuente: https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/ Licencia: https://creativecommons.org/licenses/by-sa/3.0/
8. Fuente: https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/ Licencia: https://creativecommons.org/licenses/by-sa/3.0/
9. Fuente: https://hacks.mozilla.org/2018/03/making-webassembly-better-for-rust-for-all-languages/ Licencia: https://creativecommons.org/licenses/by-sa/3.0/
10. 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/
11. • 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?
12. Rust vs ... Fuente: “A Case for Oxidation” - Sergio Benítez https://youtu.be/cDFSrVhnZKo?t=262
13. Sin más preámbulo, … nos tiramos a la piscina...
14. Instalar rust curl https://sh.rustup.rs -sSf | sh
15. 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
16. Cargo • cargo new • cargo init • cargo run • cargo build • cargo test • cargo install • cargo publish • ...
17. 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"]
18. Un poquito de código en Rust! #[no_mangle] pub fn sum(a: i32, b: i32) -> i32 { a + b }
19. Compilemos nuestro programa # Esto debería crear un archivo wasm: # target/wasm32-unknown-unknown/debug/limajs.wasm cargo build --target wasm32-unknown-unknown
20. 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)));
21. 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
22. Usando wasm optimizado con wasm-gc fetch('limajs.gc.wasm') .then(resp => resp.arrayBuffer()) .then(result => WebAssembly.instantiate(result)) .then(wasm => console.log(wasm.instance.exports.sum(2, 3)));
23. Instanciando wasm haciendo streaming WebAssembly.instantiateStreaming(fetch('limajs.gc.wasm')) .then(mod => console.log(mod.instance.exports.sum(2, 3)))
24. Pasando funciones de JavaScript a Rust Promise<ResultObject> WebAssembly.instantiateStreaming(source, options); const options = { env: { printToDOM: msg => document.body.appendChild(document.createTextNode(msg)), }, };
25. Usando funciones de JavaScript en Rust extern { fn printToDOM(x: i32); } #[no_mangle] pub fn run() { unsafe { printToDOM(42); } }
26. 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")); } }
27. wasm-bindgen • cargo install wasm-bindgen-cli Fuente: https://rustwasm.github.io/wasm-bindgen/whirlwind-tour/basic-usage.html
28. Cargo.toml [dependencies] wasm-bindgen = "0.2"
29. src/lib.rs extern crate wasm_bindgen; use wasm_bindgen::prelude::*; #[wasm_bindgen(module = "../printToDOM")] extern { fn printToDOM(x: String); } #[wasm_bindgen] pub fn run() { printToDOM(String::from("OMG")); } #[wasm_bindgen] pub fn sum(a: i32, b: i32) -> i32 { a + b }
30. Build y generación de bindings de JavaScript cargo build --target wasm32-unknown-unknown mkdir build wasm-bindgen \ target/wasm32-unknown-unknown/debug/limajs.wasm \ --out-dir ./build
31. Inicializar proyecto de JavaScript yarn init yarn add webpack webpack-cli webpack-dev-server \ html-webpack-plugin
32. Configuración de Webpack const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './index.js', plugins: [ new HtmlWebpackPlugin({ title: 'Getting started with WASM' }), ], };
33. Usando nuestro módulo desde JavaScript // index.js import('./build/limajs') .then(wasm => wasm.run()) .catch(console.error); https://webpack.js.org/api/module-methods/#import-
34. Arrancando nuestra aplicación... npx webpack-dev-server --mode development ... "scripts": { "start": "webpack-dev-server --mode development" }, ... yarn start
35. Demo time!