94 LXF249May 2019 9992May 01expli2nep
coding academy Speed up web apps
everyone! The alert() function takes the formatted text
that is generated by the format! macro and presents it
to the user.
Although the Rust code is relatively simple, the
JavaScript and HTML code used for using the
WebAssembly binary is much trickier.Let’s talk JavaScript
The random numbers are generated by JavaScript
using the Math.random() JavaScript function. Each
random number that is generated will be given as an
argument to the wasm.greet() function that is
implemented in Rust and compiled into WebAssembly
code. The contents of ./www/index.js should be:
$ cat ./www/index.js
import * as wasm from “ran-str”;
var x = Math.floor(Math.random() * 100) ;
wasm.greet(x);
The contents of ./www/index.html should be:
$ cat ./www/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Hello wasm-pack!</title>
</head>
<body>
<button value=”Refresh Page” onClick=”window.
location.reload()”>New Number</button>
<script src=”./bootstrap.js”></script>
</body>
</html>
If there are no errors, executing npm run start from
the www directory allows you to see the results of the
ran-str Rust project in your favourite web browser (see
Figure 4 above).
The good thing is that you will no longer need to have
Rust installed on your local machine in order to use that
WebAssembly code. You can also use the wasm-pack
publish command to publish your project to NPM.
However, you will first need to sign up at http://www.npmjs.
com/signup and then login using npm login for
wasm-pack publish to work correctly.
It’s worth knowing that the wasm-pack test
command enables you to test your WebAssembly
project. Its default output is as follows:
$ wasm-pack testmessage that is displayed in the box is defined in ./src/
lib.rs. Additionally, if you press the OK button, the
displayed message box will disappear from your screen.A bit random
We are going to develop another Rust project that also
generates a WebAssembly binary file. However, this
time it will be a more interactive example, as the project
will generate random numbers each time you press a
user-defined button on the HTML page, created by
WebAssembly code. You can initiate the project by
executing the following commands and changing the
./src/lib.rs file to the following (again, you can change
the name of the project if you prefer):
$ cargo generate --git https://github.com/rustwasm/
wasm-pack-template
$ cd ran-str # This is the name of the Rust project
$ vi ./src/lib.rs
Now, execute the following commands to build the
project and create the necessary JavaScript files that
will help you execute the WebAssembly code:
$ wasm-pack build
$ npm init wasm-app www
$ vi ./www/index.js
$ vi ./www/index.html
$ cd www
$ npm install
$ cd ../pkg/
$ sudo npm link
$ cd ../www
$ npm link ran-strExplaining the Rust code
The core functionality of the project can be found in the
greet() function that is implemented inside ./src/lib.
rs as follows:
#[wasm_bindgen]
pub fn greet(input: &str) {
alert(&format!(“Random number: {}!”, input));
}
So, this time, the greet() function expects some
input using a parameter named input. This means that
the JavaScript code will have to call it with a string
parameter. The value of that parameter will be
generated from JavaScript. The #[wasm_bindgen]
attribute tells Rust that this function should be able to
be called by JavaScript. Put simply, this attribute tells
the world that this Rust function is available toFigure 3: This
is the output
generated by the
lxf Rust project,
compiled into
WebAssembly
and rendered in
Firefox.Figure 4: The output of the ran-str Rust project that creates
WebAssembly code and shows random numbers that were
generated using JavaScript in your web browser.Although
creatinga
WebAssembly
binaryfrom
Rustisa
relatively
straightforward
process,
servingthat
WebAssembly
codeusing
htmland
JavaScript
mightbe
challenging,
especiallyif you
aren’tfamiliar
withJavaScript.
thereforebe
extracareful
withyourcode.