Utilising Rust from Vue with WebAssembly
From Author:
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.
This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.
FAQ
WebAssembly is a new binary format available in the browser, often referred to as a compilation target. You can write code in languages like Rust, C, or C++, compile it to WebAssembly, and then load and execute it using JavaScript. This allows for high-performance code with less memory usage compared to JavaScript.
WebAssembly can be used in modern web development by compiling code written in languages like Rust into WebAssembly. This compiled code can then be loaded and executed in the browser using JavaScript, enabling high-performance and efficient memory usage.
To use Rust with WebAssembly in a Vue.js project, you'll need the Vue.js CLI to generate a project template and Webpack 5 for module bundling. Additionally, you'll need WasmPack, a tool that helps generate WebAssembly-compatible Rust binaries and includes useful extras such as wasm-bindgen.
To configure Webpack to consume WebAssembly in a Vue.js project, you need to enable the 'async WebAssembly' feature in the Webpack configuration. This can be done by adding 'module.exports' in the 'vue.config.js' file and setting 'experiments.asyncWebAssembly' to true.
WasmPack is a tool that helps compile Rust code to WebAssembly. It is necessary because it not only generates WebAssembly-compatible binaries but also includes additional tools and configurations, such as wasm-bindgen, to facilitate communication between Rust and WebAssembly.
To create a new Rust project for WebAssembly, you can use WasmPack to generate a new project template. This template includes necessary configurations and default functions, such as wasm-bindgen for WebAssembly communication and browser alerts.
To integrate Rust-generated WebAssembly code into a Vue.js project, compile the Rust code using WasmPack to generate a package folder containing the WebAssembly code, JavaScript, and TypeScript declarations. Then, add this package to the Vue.js project's 'package.json' file and install it using a package manager like yarn.
To deploy a Rust-generated WebAssembly package to npm, use the 'wasm-pack publish' command. This will publish the package to npm, making it available for others to install and use directly from the npm registry.
To call a Rust function from Vue.js, first import the Rust function into your Vue.js component just like any other JavaScript module. Then, you can call the function within your component's methods, such as an event handler for a button click.
WebAssembly offers higher performance and more efficient memory usage compared to JavaScript. It allows developers to write code in languages like Rust, C, or C++ and compile it to a binary format that can be executed in the browser, making it suitable for performance-critical applications.
Video Transcription
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.
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.
2. Building the Rust Example
Let's build the Rust example using RasmPack build, which targets the WebAssembly toolchain. The output includes a package folder containing a node package with the necessary WebAssembly code, JavaScript, and TypeScript declarations. We'll add this project to the view template by modifying the view package JSON, installing the necessary dependencies, and running the template in a browser.
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.
Comments