Utilising Rust from Vue with WebAssembly
AI Generated Video Summary
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
1. Introduction to Rust and WebAssembly
I'm a tech lead and today I'm going to be showing you how you can use Rust from Vue with WebAssembly. WebAssembly is a new binary format available in the browser and it allows you to have high-performance code and less memory. I've used the Vue.js CLI to generate a template but I've used the Next version. For Rust side, I've installed a tool called WasmPack to generate WebAssembly. Now let's look at Rust code. I'm going to start a new Rust project with Rasmpatch and add a custom message to the browser alert from Rust.
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.
2. Building the Rust Example
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.
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.
3. Calling Rust Code and Deploying to npm
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.
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.