1
00:00:05,530 --> 00:00:11,350
In this section, we're going to take a high level look at what Webassembly is and how we can use it

2
00:00:11,350 --> 00:00:12,130
in rust.

3
00:00:13,610 --> 00:00:20,720
Webassembly abbreviated as ASM as a binary instruction format for a stack based virtual machine.

4
00:00:20,960 --> 00:00:27,320
It is designed as a portable compilation target for allowing deployment on the web for client and server

5
00:00:27,320 --> 00:00:28,490
applications.

6
00:00:28,490 --> 00:00:33,950
While ASM is designed to be efficient and fast by executing at native speed and taking advantage of

7
00:00:33,950 --> 00:00:38,120
common hardware capabilities available on a wide range of platforms.

8
00:00:38,300 --> 00:00:43,000
Like most concepts, the best way to gain an understanding is to see it and then do it.

9
00:00:43,010 --> 00:00:49,940
So let's jump into using Russ by starting out, setting up our environment to allow us to use Webassembly.

10
00:00:51,260 --> 00:00:57,020
The first thing we are going to do is install Waves Impact, which is a one stop shop for building,

11
00:00:57,020 --> 00:01:03,950
testing and publishing webassembly created by Rust and luckily it's a very easy install for us.

12
00:01:04,880 --> 00:01:11,810
Just head to rust wisdom dot github forward slash wise and pack forward slash installer.

13
00:01:12,050 --> 00:01:17,420
And if you are on Windows which I am, then you will just download and run this executable.

14
00:01:17,420 --> 00:01:24,740
But if you're on Linux then you run this command down here and follow the on screen instructions.

15
00:01:24,740 --> 00:01:29,000
So I've already installed it and it's a very quick install.

16
00:01:29,540 --> 00:01:34,100
So once you have installed it, then continue on with this video.

17
00:01:34,940 --> 00:01:41,450
So the next thing we are going to install is cargo generate and this is going to help us get up and

18
00:01:41,450 --> 00:01:46,900
running quickly with the new Rust Project using a template that we can get from a git repo.

19
00:01:46,910 --> 00:01:54,650
So to install it, we just run cargo install, cargo generate and I've already installed it to help

20
00:01:54,650 --> 00:02:02,570
with the time of this video, it will take a couple of minutes or so to install, so please pause the

21
00:02:02,570 --> 00:02:07,370
video and then resume it once you have completed the installation.

22
00:02:08,690 --> 00:02:15,440
And then once you have cargo generate, generate installed, then the last thing we need is in PMM,

23
00:02:15,440 --> 00:02:18,770
which is packaged with Node JS.

24
00:02:19,340 --> 00:02:25,000
So head over to the node DJ's website and download Node.

25
00:02:25,010 --> 00:02:33,110
I have downloaded the latest long time support version, which at this time is 16.15 point zero.

26
00:02:33,110 --> 00:02:34,880
So that's what I recommend as well.

27
00:02:35,780 --> 00:02:45,110
And then one thing to do when you have finished installing Node Slash in PM, I recommend just exiting

28
00:02:45,110 --> 00:02:55,700
out of Visual Studio code and then restarting it because Node in PM will be added to your path variable

29
00:02:55,700 --> 00:02:58,730
that the terminal uses.

30
00:02:58,730 --> 00:03:05,210
So in order for the terminal to get the new path variable, I would just recommend restarting Visual

31
00:03:05,210 --> 00:03:06,290
Studio code.

32
00:03:06,890 --> 00:03:17,960
That way you have access to PM and Node from the command line and that's all we had to do to get set

33
00:03:17,960 --> 00:03:20,210
up using Webassembly.

34
00:03:20,210 --> 00:03:25,820
So now we can start creating our first project using Webassembly.

35
00:03:26,120 --> 00:03:35,810
So we are going to run cargo generate tac tech git and we are going to get a template from the rust

36
00:03:35,850 --> 00:03:37,310
plasm github.

37
00:03:37,310 --> 00:03:47,390
So it is GitHub dot com slash rust casm slash chasm pack template.

38
00:03:48,390 --> 00:03:52,740
And it will pull it down for us and it's going to ask us for a project name.

39
00:03:52,860 --> 00:04:03,030
I'm going to name our -- game of life because we are going to create the game of life to get an

40
00:04:03,030 --> 00:04:06,000
understanding of how Webassembly works.

41
00:04:06,000 --> 00:04:09,960
And I'll explain what game of life is and the preceding lectures.

42
00:04:11,460 --> 00:04:18,630
So you see that we have a bunch of files and a couple of directories generated for us and if we look

43
00:04:18,630 --> 00:04:21,900
inside of source and then libraries.

44
00:04:23,140 --> 00:04:31,390
We see that we have an external block with an alert function in here, and if you come from a JavaScript

45
00:04:31,390 --> 00:04:34,240
or tight script background, then this might.

46
00:04:35,020 --> 00:04:35,840
Make you wonder.

47
00:04:35,860 --> 00:04:36,220
Okay.

48
00:04:36,340 --> 00:04:40,660
Is this referring to the JavaScript alert function?

49
00:04:41,470 --> 00:04:43,060
And it is.

50
00:04:43,660 --> 00:04:49,660
So we're able to access the JavaScript alert function using an external block and then referencing the

51
00:04:49,660 --> 00:04:50,590
function name.

52
00:04:51,420 --> 00:04:59,370
And so what we're going to do by running this template is we're going to call our greet function inside

53
00:04:59,370 --> 00:05:03,690
of our our ASM executable per se.

54
00:05:03,720 --> 00:05:12,240
And our greet function is going to call on the JavaScript alert function and we're going to print out

55
00:05:12,240 --> 00:05:15,180
hello ASM game of life.

56
00:05:15,450 --> 00:05:26,280
So in order for us to run our ASM, the first thing we need to do is change it.

57
00:05:26,290 --> 00:05:29,790
Our new directory, which mine was, was some game of life.

58
00:05:29,790 --> 00:05:37,320
And then inside of here, we're going to run ASM, Pack, Build, and it's going to compile for us and

59
00:05:37,320 --> 00:05:43,260
it's going to generate a new directory for us called Package or Pcgg for short.

60
00:05:43,590 --> 00:05:53,190
And inside of Pcgg you see that we have a bunch of additional files created for us and inside of our

61
00:05:53,190 --> 00:05:58,590
package directory, as I said, you see that we have JavaScript type script which we can now work with

62
00:05:58,590 --> 00:06:01,080
on getting into a web page.

63
00:06:01,740 --> 00:06:08,090
So inside of the directory we're currently in, we're going to run and PM install our excuse me and

64
00:06:08,100 --> 00:06:18,840
PM init for initialize plasm app and then w w and this is going to give us a new folder.

65
00:06:18,840 --> 00:06:25,230
I knew w w w folder that's really important for us.

66
00:06:25,350 --> 00:06:30,690
So we need to switch into that directory and run in PM install.

67
00:06:32,230 --> 00:06:40,510
And 9 p.m. install is going to install the Webpack JavaScript bundler and its development server.

68
00:06:41,020 --> 00:06:48,360
And once it's completed, we now want to reference our ASM project.

69
00:06:48,370 --> 00:06:52,570
So for us to do that, we go into the Uww folder.

70
00:06:52,930 --> 00:06:56,440
We're going to go into this package, JSON.

71
00:06:57,930 --> 00:06:58,350
Five.

72
00:06:59,470 --> 00:07:08,590
And below homepage and above dev dependencies, we're going to add a new dependency for ourself and

73
00:07:08,590 --> 00:07:11,650
ours is going to be the name of our project.

74
00:07:11,650 --> 00:07:12,070
So.

75
00:07:12,700 --> 00:07:13,870
Game of life.

76
00:07:15,360 --> 00:07:18,040
And then we're going to reference where it's at.

77
00:07:18,060 --> 00:07:21,180
So from here it is up one directory.

78
00:07:23,410 --> 00:07:25,450
And then inside the.

79
00:07:28,290 --> 00:07:34,290
That directory that we generated using was pack build.

80
00:07:36,020 --> 00:07:44,270
And then once we do that, we can head over to we'll save that file and we can head over to index JS

81
00:07:44,270 --> 00:07:46,850
inside of our WW directory.

82
00:07:47,000 --> 00:07:52,550
And up here we're going to say chasm game of life.

83
00:07:52,700 --> 00:07:55,310
So now we will run NPM install again.

84
00:07:56,150 --> 00:08:02,540
And it will install our wisdom game of life dependency and now we can run in PM.

85
00:08:02,540 --> 00:08:04,580
Run, start.

86
00:08:06,270 --> 00:08:08,780
And we see that we compiled successfully.

87
00:08:08,790 --> 00:08:18,450
So now we can head over to our browser and go to local host 8080 and we see that we have the Hello Zoom

88
00:08:18,450 --> 00:08:24,810
Game of Life Alert, which if you remember, is what we did here.

89
00:08:24,810 --> 00:08:25,380
Right.

90
00:08:25,380 --> 00:08:27,330
So we're using the.

91
00:08:28,940 --> 00:08:30,860
JavaScript alert function.

92
00:08:31,860 --> 00:08:38,280
And then inside of our index, we see we have Chasm Creek and.

93
00:08:39,660 --> 00:08:41,790
You're calling our rust function.

94
00:08:44,100 --> 00:08:51,180
And so now we have successfully set up, built and ran our.

95
00:08:51,940 --> 00:08:54,130
First Webassembly project.

96
00:08:54,460 --> 00:09:01,540
So what we will do from here is now we will go and create the game of life.

97
00:09:01,570 --> 00:09:07,630
That way we can really dive into how Webassembly works when we use rest.