AssemblyScript Setup

[00:00:00]
>> Now, we've written WebAssembly by hand. And we've seen that for more complicated used cases, WebAssembly can get a bit onerous, a bit cumbersome, a bit difficult to read. But remember WebAssembly itself is meant to be a compiled target for high-level languages. So that is RustC sharp PHP, I believe you can write some PHP and compile down to WebAssembly.

[00:00:24]
For the JavaScript side, we can write a high level language that will compile down to WebAssembly, and that language is known as AssemblyScript. AssemblyScript, at a high level, is a TypeScript to WebAssembly compiler. As in it uses the syntax and the typing of TypeScript and JavaScript to compile well into WebAssembly modules.

[00:00:49]
I'm a really big fan of AssemblyScript for many reasons. I think the main one is that its documentation and its way of presenting itself is really accessible to everybody. From beginners to people are just getting started in JavaScript to more advanced people. Who really want to get down to the low level internals of memory and byte manipulation, and actually executing computer instruction code.

[00:01:16]
There is a level of AssemblyScript for everybody, and that's what I really love about it. More importantly is when we look at the docs, the documentation for assembly scripts. They put a lot of time and effort into it, so that they make it accessible. When I was doing research for this course about what's the best way to present WebAssembly to people.

[00:01:38]
A lot of the documentation I came across, it was just really arcane a little bit. It was so specific into the details of memory and bid shifting and things like that, that I didn't think it made for a good beginner introductory course. But when I looked at the AssemblyScript documentation, it's clean, it's readable, it doesn't make assumptions about your knowledge.

[00:02:01]
And it's really written in a way that it's designed to be accessible for anybody reading it. And I really have nothing but respect for the AssemblyScript maintainers, they clearly put a lot of work into it. And I do believe in the open source community, it's important to call out good open source work and a good healthy community.

[00:02:17]
And I think AssemblyScript represents a lot of that. So if you can, should donate some money to the project. I know I will and do there, I am really, really happy to be teaching AssemblyScript now. So we learned a bit about what AssemblyScript is, as in it looks like a variant of TypeScript.

[00:02:37]
I won't say you can just take your TypeScript code and put it directly into WebAssembly or AssemblyScripts. There are operations in AssemblyScript such as storing and loading data, writing directly to memory that aren't available in TypeScript. So it's not quite a one to one but it's fairly close.

[00:02:56]
If you have large complex operations that you're doing in TypeScripts. And you're not doing too many things with data structures or complex objects, things like that. You could actually put your code over without too much trouble. And now let's get started with AssemblyScript, and let's get our ID set up.

[00:03:14]
So I'm just going to switch over, I have a blank IDE. And I'm going to make a directory called IOS, which already did. I know I made this a bit further down in the steps, but I'm doing it now just for simplicity's sake. So make a directory called iwasm, and if you don't remember how to make a directory, we use mkdir.

[00:03:35]
And iwasm, it's a funny name [LAUGH], but it just stands for introduction to WebAssembly. So if you make that directory already did, it's a good place to have a repo. Next, AssemblyScripts requires us being on the latest version of node, so I'm gonna say nvm instal- -LTS. And npm is the node version manager, if you don't have it, I believe should have the easiest way.

[00:04:07]
I assume most people have it now, but just in case you don't. What is the easiest way of installing it? We might use brew, actually, yeah, it's a curl command. So if you copy this curl command, it'll add it to your bash. Setups you can just use nvm globally, and essentially nvm is a quick way of versioning the node because depending on the environment you're using.

[00:04:30]
You might need the latest version of node, you might need an older version of node, etc. Right now we're using the LTS version node, so that is, LTS is the long term stable or long term support. That's a version of node that we know is going to be supported for at least two years or so.

[00:04:50]
So if you want to build your projects in that, that's the way to go. In general, if you're developing things or you're just doing it for fun. You can use the latest cutting edge version of node, I forget which node version. We're up to is it 16? Might be more by now, but we want to see what the LTS version because it's going to be the most stable, it's going to be most consistent.

[00:05:12]
So let's check to see the version of node that we're using to make sure we're on the right one. No version, okay, we're on 14-5, that's perfect. Anything about 14, we're okay. Next, we're gonna install npm, so npm- i- g for installing globally or saw NPX. Whoops, something happened symlink nerd.

[00:05:49]
So I already had MDX installed, so it's just telling me that there's an error not a problem, we should be okay. And give me a second to clear this terminal. All right, so next up, let's initiate our repo, just it'll give us a package.JSON, etc. So I'm gonna say npm and knit, and call it I was it's fine.

[00:06:17]
Yes, yes, yes, cool. And that's just gonna make a package JSON for us, it's gonna scaffold out a bit of things. Not entirely necessary yet, but it just makes things easier, it's how I like to start up projects. So next, let's install the software nerd. So we need AssemblyScript, and we need the AssemblyScript loader.

[00:06:36]
So npmi- -save, and using AssemblyScripts and the loader. A second, cool. And then next, we're gonna save the actual Assemblyscripts. We're gonna save this as dev, because we don't need the AssemblyScript code in production. We only needed to compile our AssemblyScript into rasm, and we're just gonna use the JSON production along with the loader.

[00:07:10]
So I'm gonna say npmi def def save Dev, and think I can just do AssemblyScripts. I'll have to do the ads, alright. So we should be in the iOS directory, we have all of our packages installed, we can check here, cool. What's awesome is that AssemblyScript will scaffold your project up for you.

[00:07:39]
It'll build out everything you want to copy, and it'll build tests. It'll build the directory, the assemblies directory, so we can run that with NPX as a net We're gonna say.to install it in this repo. And I was gonna say yes, and it's all done, that's pretty nice.

[00:08:02]
So what that did was it created these shortcuts in the scripts in that package JSON. It lets us build a Debug version of our code, and optimized version of the code. Which we'll talk about in a little bit, but it's more of a compressed version, more efficient version of the WebAssembly code.

[00:08:22]
And it also scaffold out all these folders, and let's talk about what these folders are. The assembly directory is where our assembly is going to go, there's an add function already built in there as a scaffold. Pretty, this should look very similar to that minus one function we built already, which we're gonna build it again in AssemblyScripts.

[00:08:45]
You can ignore TS config, that's the TypeScript config. The build directory is where all of the built Wasm and WAT files are, what files are going to go. And actually let's go ahead and run that now, so I'm going to say npm run as build. And if things are running correctly, you should see an output.

[00:09:13]
And then in our build folder now, we now have the optimize WAT folder, it's gonna look a little confusing. And add some glue code in there, then we have the untouched file, which is not as optimized and it pulls in things from the library itself. We're not actually directly gonna write any more WebAssembly, generally speaking, but it's nice to look at the WAT file.

[00:09:43]
And it's really useful to make a really simple example, if you're confused about how well somebody is working under the hood. And then run it through the compiler, and it spits it out and lets you. And it pretty much gives you the instructions for how it's going to operate.

[00:09:58]
And I personally find that more useful than trying to read documentation. Like seeing what the compiler is actually doing, I learned so much more from doing this. And we have a test, I think we are gonna run npm run test, hopefully that will work. And it's okay, cool.

[00:10:18]
When I was creating this course, the error I'd run into most often. Was it'll complain about if you tried to do a build, it'll complain about the. It can't use ES modules, which are a newer module syntax, that's why we have to use the latest version of node.

[00:10:33]
So if you're running to that error, double check that the terminal you're using is using the latest version of node. I guarantee that's probably the problem, I've done it several times because I switch terminals all the time and every. Bash instance has its own version of node because we're using npm.

[00:10:49]
There's a question in chat, Todd.
>> For the syntax highlighting, should we get that WebAssembly extension?
>> Yeah, thank you. I'm glad you mentioned that, I do believe I have that installed. Let me search my, da da da. What is the way Sandy Brian Holden is VS code expertise, I think at installed will tell me.

[00:11:15]
And then if I say WebAssembly, yeah.
>> Okay, thank you.
>> So unfortunately I do this myself [LAUGH] all the time, I've installed I think three different [LAUGH] WebAssembly. So I'm not sure which one is actually being used right now, I am an average engineer. I make mistakes, I don't know the details of everything.

[00:11:37]
I think the WebAssembly Toolkit is the official one from the WebAssembly Foundation, so I would I generally go with the blast version of it. And I think it's the WebAssembly syntax highlighting is the one I'm using, but whatever works, is what I say. I'm actually not even sure the WebAssembly toolkit is necessary.

[00:11:56]
It's a way of compiling folders or way of compiling WAT files which I think I must have a disabled. But there is a WebAssembly extension that, you can write dot WAT files, right click and it will convert into Wasm. That's probably not really what you want to do, generally, but I would use WebAssembly studio for something like that.

[00:12:21]
But if you had to, it's good to know these tools exists, and thank you for calling them out. And if you have any questions about my setup environment, please let me know. I try to write down every single step that I've done, so we're always aligned on the same page.

[00:12:34]
But I may have missed something here and there, but great question. Okay, So we are here, in case in the future these changes, some of these steps change. We were just following the Quick Start guide from AssemblyScripts. So if you follow this, we should. And even if things change in the future, we'll generally end up in the same place with the same folder structure, things like that.

[00:13:00]
But just in case, because open source changes a lot. Just fall back to these instructions if they're not working.