The maintainer of this website has a Spotify Coding Playlist of their Lo-fi Hip Hop beats!
wasm-bindgen
Usando buffers e ponteiros é um ótimo jeito de começar a testar o WebAssembly, se aprofundar nos conceitos e, ao mesmo tempo, ser produtivo. Mas a partir do momento em que quisermos usar estruturas de nível mais alto com eficiência e facilidade as coisas podem se complicar um pouco. Felizmente, a comunidade do rust/wasm criou o wasm-bindgen, que é uma parte do fluxo de trabalho do wasm-pack, que estivemos usando en nossos exemplos. Como mencionado anteriormente, o wasm-bindgen abstrai a partir da memória linear e nos permite usar estruturas de nível mais alto entre o Rust e o JavaScript.
Vamos iniciar as coisas! Para exibir como podemos usar o wasm-bindgen
, vejamos como podemos usar as strings em WebAssembly e compartilhá-las com o Javascript:
Primeiro, vamos adicionar o seguinte conteúdo no nosso arquivo src/lib.rs
:
// The wasm-pack uses wasm-bindgen to build and generate JavaScript binding file.
// Import the wasm-bindgen crate.
use wasm_bindgen::prelude::*;
// Our function to concatenate the string "Wasm by Example"
// to the input string. We are using .into(), to convert
// the rust types of str to a String.
#[wasm_bindgen]
pub fn add_wasm_by_example_to_string(input_string: String) -> String {
let result = format!("{} {}", input_string, "Wasm by Example");
return result.into();
}
Depois, podemos compilar o módulo seguindo os mesmos passos de compilação do exemplo de Olá, Mundo, substituindo os nomes de arquivos quando apropriado.
A seguir, criamos um arquivo index.js
para carregar e rodar o nosso módulo wasm. Agora que estamos usando as estruturas de dados de mais alto nível, iremos aproveitar os exports com nome no nosso ./pkg/strings.js
. Os exports com nome gerados pelo wasm-pack no nosso ./pkg/strings.js
são funções que envolvem as nossas funções wasm exportadas e assim lidar com a passagem de dados, facilitando a passagem das estruturas de mais alto nível entre o WebAssembly e o JavaScript. No nosso caso, podemos dar uma olhada no tipo suportado String wasm-bindgen. No futuro, você pode usar este recurso para ver outros tipos suportados bem como o usá-los. Vamos ver os detalhes do nosso index.js
resultante:
// Here we are importing the default export from our
// Outputted wasm-bindgen ES Module. As well as importing
// the named exports that are individual wrapper functions
// to facilitate handle data passing between JS and Wasm.
import wasmInit, {
add_wasm_by_example_to_string,
test
} from "./pkg/strings.js";
const runWasm = async () => {
// Instantiate our wasm module
const rustWasm = await wasmInit("./pkg/strings_bg.wasm");
// Call our exported function
const helloString = add_wasm_by_example_to_string("Hello from ");
// Log the result to the console
console.log(helloString);
};
runWasm();
Por último, vamos carregar o nosso Módulo ES6, o arquivo Javascript index.js
no nosso index.html
. E você deveria obter um resultado parecido à demo (Código Fonte) abaixo!
O wasm-bindgen suporta mais apenas strings, e tem suporte para muito tipos diferentes! É altamente recomendável dar uma olhada no livro wasm-bindgen, em particular a seção dos tipos suportados pelo wasm-bindgen.
Sinta-se à vontade para corrigir, sugerir, ou contribuir com mais exemplos de funcionalidades ou ferramentas da comunidade!