9992May 01e102yxpli0xlnshow May 2019 LXF249 93
Speed up web apps coding academy
It’s very important to have the latest version of npm
installed; you can update your current version by
executing npm install npm@latest -g with root
privileges. After updating npm, reopen your terminal for
changes to take effect – this is also really important!
Please bear in mind that although npm and Node.js
have nothing to do with WebAssembly, they might
create some problems in the publishing of the
WebAssembly code, which means that you should
make sure that they are properly installed.
If you do not want to manually install all these things
on your Linux machine, you could always use a Docker
image instead. Although you will need to learn some
new things in order to use Docker and work with its
images efficiently, you will see many benefits from this
choice in the long run, especially if you are using
multiple machines with different versions of Linux for
development and deployment. Unfortunately, we don’t
have the space here to explain more about Docker.
Hello world
After you’ve downloaded all the required files, you are
ready to start compiling Rust code into WebAssembly.
But first you will need to create a new Rust project
using cargo generate. This command will clone and
use an external project template that comes pre-
configured with some rational default values in order to
save you time. It will ask you for a project name, which
in this case will be lxf (you can choose any name you
want, of course). The Rust program will print a “Hello
World” message – this is what the WebAssembly code
will do, but in a way that you might not expect!
So, first execute the following commands:
$ cargo generate --git https://github.com/rustwasm/
wasm-pack-template
$ cd lxf # replace lxf with your own project name
$ wasm-pack build
Figure 2 shows the output of the previous
commands as well as the initial directory structure of
the Cargo project. The src directory contains the Rust
code of the project, whereas the Cargo.toml file
contains the dependencies of the Rust project.
The wasm-pack build command does all the work
for you, which includes downloading all necessary
components and generating its output inside the
pkg directory. The most important file in the pkg
directory is ./pkg/lxf_bg.wasm, because it contains
the created WebAssembly code. The output of the
next command will verify that ./pkg/lxf_bg.wasm
contains WebAssembly code:
$ file pkg/lxf_bg.wasm
pkg/lxf_bg.wasm: WebAssembly (wasm) binary
module version 0x1 (MVP)
In order to see the results of the WebAssembly
program you will need to publish it on a webserver
either locally or on the internet – in this tutorial we’ll
illustrate how to use it on your local Linux machine.
So execute the npm init wasm-app www command
to do this locally. You now have a new directory called
/www inside the root directory of your Rust project,
with the following:
$ ls -a www/
. bootstrap.js index.html LICENSE-MIT
README.md
.. .git index.js package.json .travis.yml
.bin .gitignore LICENSE-APACHE package-lock.json
webpack.config.js
Now go to that directory and execute npm install.
Instead of deploying the application in npm, we will use
the local copy of it, which means that you should go to
the pkg directory and execute the npm link command
with root privileges. Now, return to the /www directory
and execute npm link lxf. Lastly, you will need to make
the contents of www/index.js as follows:
$ cat ./www/index.js
import * as wasm from “lxf”;
wasm.greet();
This is needed for telling index.js to serve our
project instead of the default one. Finally, execute
npm run start from the /www directory in order to
start the local webserver. You can now visit http://
localhost:8080 and see the results of the lxf project
as rendered by Firefox (see Figure 3 over the page). ThetheCARGo tool
The Cargo tool is very powerful and can help you develop Rust
applications. Let’s look at most popular and useful commands of
this tool, along with a small explanation in order to help you
remember them while learning Cargo.
The cargo new command creates a new project – by default, that
project will lead to a binary executable. Should you wish to create a
library, you should execute cargo new --lib instead. cargo build
compiles a debug version of the local package along with its
dependencies. On the other hand, cargo build --release generates
an optimised binary executable or library.
The cargo clean command removes artefacts that Cargo has
generated in the past – it will enable you to build a project from
scratch. The cargo run command runs the main binary of the local
package, which is ./src/main.rs. cargo install installs a binary
executable, whereas the cargo uninstall command removes a Rust
binary. Last, the cargo test command enables you to execute all unit
and integration tests of the current package.
Figure 5 (see the final page) shows the default help screen of the
cargo tool. You can find more information about specific commands
by executing cargo <command> --help.Figure 2: The
initial structure of
the Rust project,
as well as the
output of the
commands used
for generating
the WebAssembly
binary file.theGoway
ofgenerating
WebAssembly
codeismuch
simpler
comparedtothe
Rustway,this
doesnotmean
thatGoisa
betterlanguage
thanRust.It’sup
toyoutodecide
whethertouse
GoorRust.