Vue.js London Live 20218 min
Utilising Rust from Vue with WebAssembly
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Transcript
Intro
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?
[00:29] 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 would compile that to WebAssembly, and then you can load that WebAssembly using JavaScript and execute that WebAssembly. And this allows to have hard performance code and less memory use than if you had written it in say JavaScript. WebAssembly is available in all modern browsers.
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.
DEMO
[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.
We have this package folder that's just shown 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 JavaScripts here. So I said before you would load the WebAssembly and then call it from JavaScripts or 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 typescripts and get all of the correct parameters and such.
[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.
And now we have the templates running. Let's go to a browser, let's go here and here is the templates. 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 going to go in 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 JavaScripts dependency, I can now import the greet function from my-rust-example. And now let's call greets. Hello from Vue via Rust. Let's put that. It's built. Let's go back here. Let's click me and hello from Vue via Rust. And so that button, this has poured into the wrapper JavaScript in this package folder, which is then called into the WebAssembly. And how cool is that? Which then called back into the alert.
[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.
by
Transcript
Intro
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?
[00:29] 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 would compile that to WebAssembly, and then you can load that WebAssembly using JavaScript and execute that WebAssembly. And this allows to have hard performance code and less memory use than if you had written it in say JavaScript. WebAssembly is available in all modern browsers.
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.
DEMO
[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.
We have this package folder that's just shown 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 JavaScripts here. So I said before you would load the WebAssembly and then call it from JavaScripts or 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 typescripts and get all of the correct parameters and such.
[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.
And now we have the templates running. Let's go to a browser, let's go here and here is the templates. 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 going to go in 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 JavaScripts dependency, I can now import the greet function from my-rust-example. And now let's call greets. Hello from Vue via Rust. Let's put that. It's built. Let's go back here. Let's click me and hello from Vue via Rust. And so that button, this has poured into the wrapper JavaScript in this package folder, which is then called into the WebAssembly. And how cool is that? Which then called back into the alert.
[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.
by