Utilising Rust from Vue with WebAssembly

Hello, everyone. I'm a tech lead and today I'm going to be showing you how you can use Rust from Vue with WebAssembly. So let's get started.

What is WebAssembly? WebAssembly is a new binary format available in the browser and it's what people call a compilation target in that you would write code in say Rust or C or C++, you compile that to WebAssembly and then you can load that WebAssembly using Java strips and execute that WebAssembly. This allows you to have high-performance code and less memory than if you'd have written in say Java strips. WebAssembly is available in all modern browsers.

So how do we use it? I'm now going to go into an example in a moment. For this example I've used the Vue.js CLI to generate a template but I've used the Next version. I'll explain why in a moment. For Rust side I've installed a tool called WasmPack and the reason why is because obviously we don't want to generate normal Rust binaries, we want to be tied to WebAssembly and there's a few other extras that we would need to set up. WasmPack does all of that for you.

So let's hop into the code. Here I have the templates that I've already generated. The reason why I've used 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 turning on the ability to do that. In the view config I'm going to be adding the module exports which will configure Webpack where under the experiment you can find async WebAssembly and I'm going to be setting that to true. So now I'll be able to consume WebAssembly within this project. Now let's look at Rust code. I don't have any Rust code here so I'm going to start a new Rust project with Rasmpatch, I'm just going to call it my Rust example, and that will generate a brand new Rust project. Because I've used Rasppatch, it adds in a few extras. So for example, it's added in somewhere the Rasm bind gen for being 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, it's provided these two functions out of the box. This is an external function and so it means external to Rust. This alert, this is the browser alert that's available. And so that's that external function. And so it's calling the browser alert already in its default code from Rust. Here is a G.R.E.A.T function that is provided. Let's add on a custom message to this. And instead of calling this, let's pass a custom message to the browser alert from Rust.

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 RasmPack build. And this will build it targeting what's called WebAssembly toolchain. So it outputs WebAssembly code. And it also outputs a few other things which are quite useful.

We have this package folder that's just showing up. And this package folder is the output that that generates. And this includes what is a node package. So it has a package JSON, just as you would normally expect. It has, of course, the WebAssembly code. We'll need that. It has some JavaScript here. So I said before you would load the WebAssembly and then call it from JavaScript. Well, it's provided that code for me so that I don't need to do that. And it's even provided TypeScript declarations so that I can call this from TypeScript and get all of the correct parameters and such.

So let's add this project to my view template. I'm going to come down to the view 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's on the file system. And it's my Rust example. And I need to point to the package, the node package that HasMpac built. Let's install that. Let's do yarn install. And then let's do a yarn serve. And now we have the template running. Let's go to a browser.

Let's go here. And here is the template. So I have a page that I've already started on called Click Me. It has a button. The button doesn't do anything. Let's call that Rust code from here.

So I'm just going to click me. Here is that button. It calls on the click me. Here is the on click me function. So just like I would import some in any other package or JavaScript dependency, I can now import the greet function from my Rust example. And now let's pull greet. Hello from view via Rust. Let's pull that. It's built. Let's go back here. Let's click me. And hello from view via Rust. And so that button, this has pulled into the wrapper JavaScript in this package folder, which is then pulled into the WebAssembly and back into the alert. So that's awesome.

Of course, being a node package, we just deployed that to npm. 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. So now instead of using on the file system, I can just put in the file number of that and then install file yarn. So that way I can share with other people, as long as they can consume WebAssembly. Thank you very much.