Your First Web Assembly

[00:00:00]
>> Okay, so far. It's a little bit different. So hopefully that was explained in a way that makes sense that you understand what's going on now because we get down into it. If I just, [LAUGH] I made a mistake I should have opened with like an example of Web Assembly and you'd be like, what?

[00:00:18]
And then by the time you got to here, you'd be like, okay, now this makes sense. That was a miss, maybe next time maybe V2. I really like this program called Web Assembly Studio, and we'll actually we'll open that in a second. But it's a fast way if you wanna write some web assembly right now or real quick without building up an entire tooling system.

[00:00:39]
Web Assembly studio, is super useful, it's really cool, we don't upload VS code or anything, it works in your browser. It's actually, it's built on Web Assembly funny enough. And it's a really cool open-source project. We're gonna use it, actually we'll use right now, let's write a helloworld function in Web Assembly.

[00:00:59]
Yeah, we finally get to code that less talking more coding. So, what we're gonna do is actually I think I have the example right here. Did I save? I do, but I'll start off yet let's pretend I don't have an example yet. Let's go to Web Assembly Studio.

[00:01:18]
So remember we said earlier that Web Assembly is a compile target for other languages, hence we write in C, we write in Rust, we write in Assembly Script. Or we can write directly, in Web Assembly and we won't compile at all, we just compile it to wasm. So let's open a new Empty Wat Project.

[00:01:44]
Create. And we're going to main.wat. And we're just gonna delete out this code that it puts in earlier. So when we're declaring, when we're writing Web Assembly module, we start with module and little space there. We're gonna create a function called helloworld. So func. And we prefix out with dollar sign to let us know it's a name.

[00:02:09]
So helloworld. And we're gonna declare some of the parameters to this function. So we're gonna say param. And the parameters are just inputs to the function. And we're gonna call this num1, and we declared as a 32 bit integer, as we discussed a bit earlier. And for a function if it's not a void function, as in void doesn't return anything, in this case we want it to return something because a void function isn't terribly helpful for calling it from JavaScript because it just wouldn't output anything unless we're writing to memory.

[00:02:46]
So in this case, we're gonna say the results of the function is a 32 bit integer as well. Okay, now you're with me. I feel it, I feel it. So in this case, we wanna call our number and then we wanna return it. So we're just whatever the input is, we're just gonna spit that right back out in this very simple example.

[00:03:11]
So I'm gonna say get local and we're gonna say num1. So get local, what it does is it grabs the locals, the locals are known as the parameters that would pass in. We can also say get globals, globals are the same concept as in JavaScript. They're things that are globally declared with an object.

[00:03:32]
So different numbers and, well, generally numbers, we can pull those in. But in this case, we're gonna say get local, which is an opcode, which we'll discuss in the next section. The return on Web Assembly modules is implied, so this will actually just return the number that we put in.

[00:03:52]
Next, we have a function, but we need to actually tell JavaScript that this function is available. So we do that with the export command. So we're gonna export a function we can call it whatever but I'm just gonna call it the same name as we did before because well, it makes it easy to reason about later.

[00:04:08]
So we're exporting something called helloworld. And now we're going to declare that it's a function. And the function is actually the helloworld function that we see, that we just wrote. Okay, and then don't forget to save. That's really important. And let's build it and see if I have any errors.

[00:04:30]
Hey, no errors cool. Let's jump to the main.js. We'll cover converting Web Assembly fetching and all these things a bit later. I don't want to get bogged down into that because that's more the browser implementation of Web Assembly and not Web Assembly itself. But in this case, because we declare our exports, when we fetch the Web Assembly module, it's going to have exports as one of the properties on the objects.

[00:04:56]
And that property that export is helloworld. And we'll say I don't know, 42. And then again, don't forget to save it is the most common mistake I always make is I forget to save. And let's build and run. Hey, not bad, not bad, everybody there everybody get 42 or whatever number you put in?

[00:05:25]
Yeah, congratulations. You just wrote Web Assembly by hand. I am so proud of you. Wait. [SOUND] You all have come so far. I bet you didn't think you'd be writing assembly today. Actually, you did. You probably like I'm taking a class on Web Assembly, we're gonna write web assembly.

[00:05:41]
You just did. Remember, we wrote we use the wat file. But that's not actually what's running in the browser. It's actually the wasm file, which you can't edit directly. So Web Assembly Studio will just tell you to use the wat file if you try to edit it and it even gives you a warning.

[00:05:59]
Because again, the wasm file is just binary data, it wouldn't make any sense to us. It's actually not terribly readable. It is readable but we're not that beginner and so we can read, raw Web Assembly. That was it. That is in the nutshell how to write web assembly.

[00:06:18]
Now, let's build on this a bit. Now that we kind of all have this fundamental base. We understand types, we understand like how to return functions, things like that we understand for some reason the s expressions. Okay, so we wrote a really, really basic example, I probably should add, if you wanna put a comment in your Web Assembly it's two semi colons back to back and that is a comment in Web Assembly.

[00:06:46]
Always useful to know how to write comments in any language.