In this section, we're going to take a high level look at what Webassembly is and how we can use it
in rust.
Webassembly abbreviated as ASM as a binary instruction format for a stack based virtual machine.
It is designed as a portable compilation target for allowing deployment on the web for client and server
applications.
While ASM is designed to be efficient and fast by executing at native speed and taking advantage of
common hardware capabilities available on a wide range of platforms.
Like most concepts, the best way to gain an understanding is to see it and then do it.
So let's jump into using Russ by starting out, setting up our environment to allow us to use Webassembly.
The first thing we are going to do is install Waves Impact, which is a one stop shop for building,
testing and publishing webassembly created by Rust and luckily it's a very easy install for us.
Just head to rust wisdom dot github forward slash wise and pack forward slash installer.
And if you are on Windows which I am, then you will just download and run this executable.
But if you're on Linux then you run this command down here and follow the on screen instructions.
So I've already installed it and it's a very quick install.
So once you have installed it, then continue on with this video.
So the next thing we are going to install is cargo generate and this is going to help us get up and
running quickly with the new Rust Project using a template that we can get from a git repo.
So to install it, we just run cargo install, cargo generate and I've already installed it to help
with the time of this video, it will take a couple of minutes or so to install, so please pause the
video and then resume it once you have completed the installation.
And then once you have cargo generate, generate installed, then the last thing we need is in PMM,
which is packaged with Node JS.
So head over to the node DJ's website and download Node.
I have downloaded the latest long time support version, which at this time is 16.15 point zero.
So that's what I recommend as well.
And then one thing to do when you have finished installing Node Slash in PM, I recommend just exiting
out of Visual Studio code and then restarting it because Node in PM will be added to your path variable
that the terminal uses.
So in order for the terminal to get the new path variable, I would just recommend restarting Visual
Studio code.
That way you have access to PM and Node from the command line and that's all we had to do to get set
up using Webassembly.
So now we can start creating our first project using Webassembly.
So we are going to run cargo generate tac tech git and we are going to get a template from the rust
plasm github.
So it is GitHub dot com slash rust casm slash chasm pack template.
And it will pull it down for us and it's going to ask us for a project name.
I'm going to name our -- game of life because we are going to create the game of life to get an
understanding of how Webassembly works.
And I'll explain what game of life is and the preceding lectures.
So you see that we have a bunch of files and a couple of directories generated for us and if we look
inside of source and then libraries.
We see that we have an external block with an alert function in here, and if you come from a JavaScript
or tight script background, then this might.
Make you wonder.
Okay.
Is this referring to the JavaScript alert function?
And it is.
So we're able to access the JavaScript alert function using an external block and then referencing the
function name.
And so what we're going to do by running this template is we're going to call our greet function inside
of our our ASM executable per se.
And our greet function is going to call on the JavaScript alert function and we're going to print out
hello ASM game of life.
So in order for us to run our ASM, the first thing we need to do is change it.
Our new directory, which mine was, was some game of life.
And then inside of here, we're going to run ASM, Pack, Build, and it's going to compile for us and
it's going to generate a new directory for us called Package or Pcgg for short.
And inside of Pcgg you see that we have a bunch of additional files created for us and inside of our
package directory, as I said, you see that we have JavaScript type script which we can now work with
on getting into a web page.
So inside of the directory we're currently in, we're going to run and PM install our excuse me and
PM init for initialize plasm app and then w w and this is going to give us a new folder.
I knew w w w folder that's really important for us.
So we need to switch into that directory and run in PM install.
And 9 p.m. install is going to install the Webpack JavaScript bundler and its development server.
And once it's completed, we now want to reference our ASM project.
So for us to do that, we go into the Uww folder.
We're going to go into this package, JSON.
Five.
And below homepage and above dev dependencies, we're going to add a new dependency for ourself and
ours is going to be the name of our project.
So.
Game of life.
And then we're going to reference where it's at.
So from here it is up one directory.
And then inside the.
That directory that we generated using was pack build.
And then once we do that, we can head over to we'll save that file and we can head over to index JS
inside of our WW directory.
And up here we're going to say chasm game of life.
So now we will run NPM install again.
And it will install our wisdom game of life dependency and now we can run in PM.
Run, start.
And we see that we compiled successfully.
So now we can head over to our browser and go to local host 8080 and we see that we have the Hello Zoom
Game of Life Alert, which if you remember, is what we did here.
Right.
So we're using the.
JavaScript alert function.
And then inside of our index, we see we have Chasm Creek and.
You're calling our rust function.
And so now we have successfully set up, built and ran our.
First Webassembly project.
So what we will do from here is now we will go and create the game of life.
That way we can really dive into how Webassembly works when we use rest.