What Will I Learn?
- You will learn about the Wasm bindgen library in Rust
- You will learn how to compile Rust to Web Assembly using Wasm Bindgen
- You will learn how to create a library for Web Assembly using Rust
- Visual Studio Code or any other Text Editor with Rust language plugins
- The Rustup command line tool and the nightly Rust compiler
- Some basic understanding of Rust
- A fair amount of knowledge on web technologies and how they work
Resources for Rust
- Rust Website: https://www.rust-lang.org/
- Web Assembly Website: https://webassembly.org/
- Awesome Rust: https://github.com/rust-unofficial/awesome-rust
- Wasm Bindgen Repo: https://github.com/rustwasm/wasm-bindgen
- WASM Logo: https://webassembly.org/
Outline and Overview
Coding the Web with Rust and WebAssembly
Above is the WASM generated by the wasm_bindgen CLI. As you can see, the code looks like a mixture of Machine Assembly and Lisp. By using such low level instructions, we are able to gain a large amount of performance and optimization for the web platform. There are also various tools which can further optimize the WASM code by striping out functionality that is not used by the library or project.
Shimming from One Language to the Next
In this image, we have the external block that was used in this example library. In it, we define various types such as
Element which allow us to reference objects like the
alert to support the functionality of our library.
Writing Native Code for the Client
The second major part of a Rust Bindgen library is native Rust code that we want to turn into Web Assembly. We are able to use almost all of the features of the language to build our library. We use Declarative macros to define which functions we want to compile into Web Assembly. We can also reference the shimmed functions which we defined in the
extern block above.
Here we have the native code that was used in this project. The first function called
create_stuff builds a block of HTML by creating a
div and a
p tag. We then add some text to the inside of the
p tag using the
The source code for this project can be found here