Hello everyone. I'm Joseph Lenton. I'm a tech lead at Attest, and today I'm going to be showing you how you can use Rust from Vue with WebAssembly. So let's get started.
Intro What is WebAssembly?
So how do we use it? I'm now going into an example in a moment, and for this example, I've used the VueJS/Cli to generate a template, but I've used the next version. I'll explain why in a moment. For the Rust side, I've installed a tool called wasm-pack. And the reason why is because obviously we don't want to be generating normal Rust binaries we want to be tied to WebAssembly, and there's a few other extras that we would need to set up. Rust, in fact, does all of that for you.
[01:30] So let's hop into the code. Here I have a template that I've already generated. The reason why I use the next version is because it installs with Webpack 5. Before we get into any Rust code, I need to be able to consume WebAssembly within the project. And Webpack 5 can do that. So I'm going to be turned on the ability to do that. In the viewconfig, I'm going to be adding the module exports, which will configure Webpack, where under the experiments, you can find asyncWebAssembly. And I am going to be setting that to true. And so now I'll be able to consume WebAssembly within this project.
Now let's talk about the Rust code. Well I don't have any Rust code here... so I'm going to start a new Rust project with wasm-pack new, I'm just going to put my-rust-example, and that will generate a brand new Rust project. Because I've used wasm-pack it adds in a few extras, so for example, it's added in somewhere the wasm bindgen to be able to talk to WebAssembly as well as a few other useful extras already set up. If I go into the source code that's provided, the default source code, its provided these two functions out of the box. This is an external function. And so it means external to Rust this alert, this is provided to the browser alert that's available. And so that's that external function. And so it's trawling the browser alert already in its default code from Rust. Here is a greet function that it's provided. Let's add on a custom message to this. And instead of calling with this, let's pass the custom message to the browser alert from Rust.
[03:30] So I'm happy with that. Let's build it. So I'm going to go into my-rust-example and then I'm going to do a wasm-pack build and this will build it targeting what's called the WebAssembly tool chain. So it outputs WebAssembly code, and it also outputs a few other things which are quite useful.
[04:34] So let's add this project to my Vue templates. I'm going to turn down to the Vue package Json down here, here it is the lightning-talk and I'm in the dependencies. I'm going to add on that Rust project, my-rust-example, and it is on file system. And it's my-rust-example. And I need to point to the Node package that wasm-pack built. Let's install that. Let's do a yarn install and then let's do a yarn serve.
[06:29] So that's awesome. Of course being a Node package, we just deploy that to NPM. And so why don't we do that now? So there is wasm-pack publish. So I'm going to do that. Wasm-pack publish, and now it's on NPM. And so now instead of using on the file system, I can just put in the file number of that and then install via yarn. And so that way I can share it with other people as long as they can consume WebAssembly. Thank you very much. I hope you found this very useful.