Use wasm-bindgen to Modify the DOM from Rust

In this Shortcut, you are going to make another big leap forward by learning how to use wasm-bindgen to modify the HTML Document Object Model (DOM). While WebAssembly modules have always been able to call JavaScript functions that can modify the DOM, historically these were not all that easy to integrate into an existing library or another language. Fortunately, that is no longer the case, because of our use of wasm-bindgen.

In the GitHub repository for this Shortcut, you should enter the directory 14-Rust_DOM. The readme.md file contains installation instructions and a description of the state of the project. I have initialized the project with the Rust cargo functionality and added the wasm-bindgen dependency to the Cargo.toml file. I have also added a package.json file and a webpack.config.js file. I am again using Webpack to hide a lot of packaging details and will return to that topic and how it relates to WebAssembly in a subsequent Shortcut.

There is still no direct way for code in WebAssembly modules to manipulate the DOM. The example here will still use JavaScript calls to make the changes. However, it will seem much more idiomatic in the source language (in this case Rust) because of the scaffolding that wasm-bindgen will generate for us.

Let’s get the boring stuff out of the way. I have put an index.html file in the root of the project directory. It has the ...

Get Use wasm-bindgen to Modify the DOM from Rust now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.