Rust is a systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety.

rust

Many languages work on a compilation story to WebAssembly, but Rust is already ready for primetime. Why?


- Rust is a stable language and great replacement for C and C++. 
- Due to the reference and borrowing concept, Rust doesn’t need a Garbage Collector and can be used for a production-ready WebAssembly project. 
- The Rust/Wasm team has built some sophisticated tooling for straightforward interoperability between Rust and JavaScript.

This course gives you the tools to compile to WebAssembly with Rust. Over 11 lessons, we’ll set up a project and explore various paths of communication and interoperability between Rust and JavaScript.

The goal of this course is to explain how to setup a project using JavaScript and WebAssembly with Rust.

We start out with building our first WebAssembly module and loading it. Then we gradually build up until to a point where we use wasm-bindgen to invoke functions and pass data between JavaScript and Rust without a hassel.

Further we explore various tools like wasm-pack to build our Rust code with ease and use them in combination with Node or Webpack.

webpack

Course Overview: Using WebAssembly with Rust

Illustrated Notes WTF is Rust

In order to setup a project we need to install the nightly build of Rust and add the WebAssembly target. For an improved workflow we also install the CLI tools wasm-pack and wasm-gc.

javascript

Setup Rust for WebAssembly

In this lesson we are going to setup a project from scratch by introducing the JavaScript snippet to load a WebAssembly module. We demonstrate two different ways and showcase the benefit of the streaming solution. Once the module is loaded we can invoke a function previously exported from our Rust code.

Load a WebAssembly Function Written in Rust and Invoke it from JavaScript

In some cases it’s useful to be able to invoke a JavaScript function inside Rust. This session showcases how this can be done, by passing along our JavaScript functions to the WebAssembly module instantiation.

Pass a JavaScript Function to WebAssembly and Invoke it from Rust

Interoperability between JavaScript and Rust is limited to numerics and accessing memory directly. Since this can be exhausting and overwhelming to do manually the Rust/Wasm team has created the wasm-bindgen project to facilitate high-level interactions between Rust and JavaScript.

Set up wasm-bindgen for easy Rust/JavaScript Interoperability

Previous to this lesson, we set up our own Rust/wasm project from scratch.

The Rust/wasm team ships a template for you to get started right away. In this lesson, you'll see how to initialize the template (assumes you have `wasm-pack` installed) and see how this template gives you additional custom Rust features in addition to the `WasmPackPlugin` that will build your library on every file change.

Create a New Rust/Webpack Project using the rust-webpack Template

Having some kind of debugging tool in our belt is extremely useful before writing a lot of code. In this lesson we build a println!()-style syntax using JavaScript’s console.log to be able to log out values in Rust.

Debug a WebAssembly Module Written in Rust using console.log

While JavaScript has a garbage-collected heap, WebAssembly has a linear memory space. Nevertheless using a JavaScript ArrayBuffer, we can read and write to WebAssembly’s memory space.

Access WebAssembly Memory Directly from JavaScript

`js-sys` offers bindings to all the global APIs available in every JavaScript environment as defined by the ECMAScript standard.

In this lesson, we will install and use `js-sys` to invoke JavaScript's Date API to grab the current time. The date will need to be converted to a value Rust can use and display that date from Rust in the browser.

Use the js-sys Crate to Invoke Global APIs Available in Any JavaScript Environment

`wasm-pack` is a tool that seeks to be a one-stop shop for building and working with Rust generated WebAssembly that you would like to interop with JavaScript. This includes ability to publish modules so that you can share your Rust generated WebAssembly code with others. 

In this lesson we create a npm package and export a Rust function that will log to the console in the browser. We publish the module to NPM and afterwards use a `rust-webpack-template` to install and use the newly published package.

Create and Publish a NPM Package Containing Rust Generated WebAssembly using wasm-pack

WebAssembly is great for targeting performance bottlenecks in the browser. Now with node-loader, we can do the same on the server through Node.js

While Node offers also bindings to native extensions for C/C++ via node-gyp, there was no straight forward way to write Rust extensions. In addition did the node-gyp API change often and developers had to be careful to make their C/C++ code work with various operating systems.

Compiling Rust to WebAssembly solves both of these issues. The API is stable and once compiled to WebAssembly it will run on every operating system supported by Node.

Since Node doesn't support loading `.wasm` files a loader is needed. The loader flag though is only supported when using the `--experimental-modules` flag in Node 10 or higher.

Using WebAssembly with Rust

Nik Graf

Free Community Resource

Free Community Resource

Course Content