Getting started with AssemblyScript | WebAssembly | Tutorial

hey welcome back and in this video i'm going to show you how you can get started creating webassembly modules using assembly script now if you don't know what assembly script is it's a programming language that is being created which is essentially typescript but the difference is is unlike typescript which transpiles down into javascript assemblyscript compiles down into webassembly modules so there are some differences between the the languages because obviously javascript is a dynamic language whereas webassembly is a static language so some of the differences that you'd have in some of the capabilities and and in some of the syntax um are there but largely they are the same so if you are somebody who is familiar with javascript or typescript and you want to get into webassembly modules and you want to get into current webassembly but you don't really want to hand code webassembly which to be honest most of the population shouldn't be encoding webassembly right it's probably a very complex way of creating your web assembly modules but at the same time you don't want to learn another more system based language such as rust or go or c or c plus plus then assembly script is probably a great way of you sticking with your core javascript typescript knowledge but then being able to create webassembly modules using that so we're going to get started i'm going to show you how you get it installed on your machine how to create some basic code with it and then we'll compare that to the sort of hand coded web assembly that you would have created uh if you were following some of my other videos so let's get started [Music] okay so the first thing we need to do is we need to get assembly script up and running so to do that we we need to create our assembly script folder or the modules that we want to create and we would just do that like we would any other node.js or javascript based package so i'm going to create a new folder we will call that chris math because we're going to create some math packages today so we'll just cd into that chris math uh and then like any other javascript uh package i will just do an npm in it to get that started so i'll just hit return return return so that's me installed and you can see it's created my package.json okay so because assemblyscript is um just like any other npm package you can install it like any any other npm package so to do that i would just type in npm install i'm going to do a save and then i'm going to load a thing called assembly script loader so i'll just put that in there and that is going to be a package that is used for creating your assembly script okay so we'll just install that uh save and then it'll appear as a dependency so i'll take a few seconds to get that installed and in fact if i more my package.json you'll see there you go assembly script loader uh is installed in my package so the next thing that let's just clear that the next thing i need to install is assembly script itself now in this case i will just put that as a dev dependency because i'm not going to need that or runtime or anything like that so i'll put safe dev assembly script and that will install that and again that is now in my package json so i now have assembly script installed on on my machine pretty cool stuff so now that i've got assembly script uh part of my package what i want to do now is just scaffold up an assembly script project and and and what's really cool is assemblyscript has got this really neat npx package which allows you just to uh scaffold up everything that you need and uh and it makes life super simple so rather than you having to manually code all the packages and the conventions it will just do that for you so it's called uh as init uh so you just type in mpxcs in it and then dots so we want to scaffold it into the folder remember just now that'll take a few seconds i'm just going to say yes to all this stuff so i hit y and then that's all packaged up so if i uh look at that you can see it's created a whole set of things for me so if i want to look at what how that looks underneath i'll just type in code dot and then we can see how that looks in visual studio code so let's let's just have a little bit of look across some of the files that is created and then we'll talk through that and then we'll create some of the code so you can see there's a package json as you would imagine it's uh pre-built in a couple of uh commands so as build so uh if you do an npm as build then or npm run as build it's gonna um it's gonna build your code for you you can see it's untouched and optimized so you can sort of do debugging and release builds you can kind of see we've got the dependencies that we put in before so our package json is is is there you can see it's created an index json so it's it's created the code that you need so it automatically loads the uh the the wasn't file and then does an export so it's super easy for you to go and um go and test your code and write your code there that's fine there's a test folder so if you want to write some tests you see it's already create created a function there already for adding two numbers together um a bunch of known modules that we're going to ignore there's a get ignore file and then in here is the index ts which is actually where you write your code so and then finally there's a ts config which uh uh you know it's just giving you the config for your build so this is this index ts is the key place where we sort of start i'm gonna delete the the the function that was there already because we we can recreate that ourselves and then uh and then write some tests to do that so i'm gonna create rather than using the add two numbers we might do that again in a second the first thing we're gonna do is we're gonna create a function which will uh square two numbers together so again this is going to feel really familiar so if we just type in export because we want to export this function outside world export function we're going to call a function square i'm going to pass in a number so in this case it's going to be n1 for number one and then because it's a typescript then we have to declare what our our types are and also because assembly script is a static language so we need to know what our types are in advance it's a difference there is we can't use things like bars and we can't sort of infer that easily so we just need to be super uh declarative of our types so in this case i want this to be a 32-bit integer i32 you see this maps exactly to the types that you would have in webassembly so you would have i-32 you would have i-16 you would have f32 f64 etc so they all map very nicely and then of course if i want to return a type in this case i do i want to return i 32 then we're good to go and then i will create my brackets so to square that i just need to write my code all i need to do is type in return and basically multiply my parameter by my parameter so in this case n1 times n1 is going to be the squaring of that and then we're sort of good to go so that is my first uh piece of code now i created um some tests there so if you remember this uh this function i call this square so if i go into this test file and i want to test it then i'm gonna get rid of this add and then i can type in square and i would expect the square of 10 to be equal to 100 so we'll come back to that in a second so i've built my test um and we're good to go so what i'm going to do is let's clear all of this and if i want to just make sure everything works okay i i can run my build so if i do npm run a s build then that is going to run the webassembly folder that i created so if i go into this build folder for a second you can see that i've got various versions i've got some wasm files that that are now created that you've got optimized wasn't in fact if i wanted to like let me just delete the uh the build folder for a second so we'll just move that to trash and then let's run that build command again so we'll just run that'll take a few seconds it's going to create that and as you see it's creating a debug release and a uh uh a rel and a release as well so if i come back into the build version then if you remember when we looked at the uh the package.json you can see the it created a thing called untouched for the debug release and the optimize for the release release right really weird way of saying that and then my build command builds basically the debug and the release version of my wason file so if i come back into this build here you see that optimize wasm which is my release version and untouched is my um is my non-optimized debug version so if i come back in here for a second and we go into the build folder let's do an ls minus la and you can see the the the watson files are are fairly small right so this optimized wasm is only 97 bytes so that's pretty good and you can see the untouched version is 259 so you know the untouched doesn't have any optimizations the optimized one does now if you remember the earlier versions of my videos or if you haven't checked out my hand coding webassembly modules then you'll you may remember this so you may have forgotten but but it's kind of up to you um there is a routine um called what to wasm which allows you to take a wasm file a take a web assembly text format file so you can hand code and webassembly text format and if you're interested in webassembly text format and what happens under the hood go check out my videos it gives a lot of details of how it works how stack machines happen and all the uh and and how web assembly underneath the hood works um so go check that out but there's also a utility opposite to what to wear some which converts webassembly text to to western files but there's something called wasm to what which takes a webassembly module and converts it to webassembly text format so actually as part of assembly script you can see it's it's created the webassembly text version of your watson file so if i open the untouched version you can see there's a bunch of stuff in there right um so the bonnet goop we're not going to go into that into too much details the key part there is you can see there's a function which is called square which takes in one parameter and returns a result of i32 you can see local.get what that means is again if you check out the video i'll tell you but um what that means is local.get just tells you to go and get parameters so there's a parameter called door zero so get store zero it's gonna put that onto the stack because webassembly is a stack machine and then it's gonna call uh parameter zero again it's gonna put that in the stack so the stack would have two items right so whatever passengers are parameter so i pass in ten then the stack will have 10 and then it will have 10. and then the i32 will multiply that so pop off two items off the stack because the multiplication expects two items so we'll pop off the both items so that 10 and the 10 it'll do the multiplication and then it will so and then it will push uh that the result back onto the stack so the set will now have one item which in this case would be a hundred and then how webassembly works is when uh when a function is ended then what is ever is remaining on the stack will get popped off and that is returned so in this case the 100 which is on the set would get popped off and that would be returned as that result that's how that works so you've got all of this sort of goop at the top here but if i moved into the optimized version you can kind of see that what it has done there is the function itself is the same it does the local.get local.i32 multiplication um but all that goop that was there before has been removed and and you're just left with the kind of square function and there's a little bit about memory allocation so actually this is this is pretty clean right if i was to to hand code this myself then you know apart from a little bit of this group that is putting it at the top there it's not much different from what i would write myself and again you can kind of look at that so so i think i think there's i think um assembly script is quite an efficient way of writing code especially for small functions so you know if you've seen my video on rust um i i show you how the the web assembly that russ creates you can see that there's a lot more code there are much bigger files um i think assembly script is is a little bit lighter a little bit leaner um you know so for for really small web assembly modules i think assembly script is a really good way of doing that i think rust if you're creating more complicated things you're going to get more power out of that um and there's going to be less limitations than you would have with assembly script but um you know but it both are really great ways but if you want to do really lightweight stuff i think assembly script is is is really cool okay so that's how that looks as i said before i created a kind of a test for that so if we come back into my test there you see my module.square 10 100 so if we were to go back into my terminal for a second let's see the dot here for a second and then if i was to type in npm run test you're going to see it's going to run that test there and then it's is it came back with a pass there if i if i come back into this and then maybe if i put this as 45 we know that's not going to be right and run the test again there comes back with an error right which is 100 is not equal to 45 test failed hit save run my test again and then we're back uh up and running so as you can see i think it's um a really great way of writing web assembly it's probably much better than hand coding um and again you can you can build things really quickly as well so if i wanted to do more complicated things or less complicated or different things i can put the add two numbers back in you can i can put n1 n2 uh we'll have an i32 there uh and then what i will do is we'll do n1 plus n2 we'll save that and then i can come back into my tests again this time i will do the add two numbers so uh we'll call that add two numbers again add two numbers uh we'll put 10 and 10 and we'd expect that to be 20 we'll save that we'll come back into here let's let's run my my my build so just check everything works yep so good uh run my test there and you see it's passed so i've got now got two items in there i could get really complicated these are not that complicated if if if i'm being honest we could do we'll call something maybe weird at and then what we'll maybe do is we'll do n1 times n2 and then we'll maybe square the two items together so if i pass uh if i pass uh five and five that would add it up to ten and then uh and then it would square it you know so in fact we could even just do this as add two numbers we can put n1 in two there we go let's save that we'll call it weird ad if i come back into my tests um we can put weird ad back in here let's call weird ad my module uh and i would expect five and five to equal 100 uh let's just build that for a second should build okay which it does run my test that's fine so my test pass but if i change that to 10 um run test again you see my assertion fails so 100 is not equal to 10. so you can start building really quickly and if i if i were to sit and try and hand code that um it would it would just take me so much time in web assembly so to use some web assembly text format so this this becomes really kind of powerful the other thing that's quite useful is if you actually want to look at what the web assembly is created as you create this code it's really nice because as you see if i go into that build folder and i look at the optimize what you see it's got the square function it's got the add two numbers so it's using i32.mall i32 add and then you can see in the weird add to you can you can see that it's doing the ad in the model now this is really interesting so even though i did some function calls there this is this is probably a good example of the optimization so even though i did two function calls there what the optimized version has done is actually copied that code in there so you see it's done a a local.get and then it's done an ad and then uh and then it's done the multiplication here as well so i think that's really interesting so you start to see the power of that optimized.what there right because that's not the same code i wrote the code that i wrote was i call add two numbers and then i call square but what you see the optimizer's done is copied that code and copied that code in and created a new sort of mega function if i were to come into the untouched dot what you can see that this is the code that i actually created so you can see i've got this square and then i've got add two numbers and then i did this and then i did a call i called out two numbers and then i called square um so there's quite a difference between the the unoptimized version the optimized version and and this is again probably starts to tell you the power of having high level languages and if you think of the evolution of languages over time is that that we we started in this world of sort of writing sort of bytecode ourselves and then assembly language came along and then we started writing high level languages like cc plus plus et cetera but c plus plus was much later but c etc and and then you see as compilers have came out they've started doing these optimizations to get better and you can you can see the exact same thing happening in this very very simple example so i think i think this is really uh this is cool stuff um and and as you can guess there's there's a huge making function calls is quite a large impact right because you've got to load new call stacks etc so from an optimizer's perspective just sort of combining these two things into one function is is really a great thing to do there so again i think i think it's it gives a bit of a view into what compilers are doing awesome so last thing i want to do is we i've shown you how the optimization all that kind of works last thing i want to do is actually just run the thing for a second so um so let's have a look here so you can kind of see we've got this index.js that's being created automatically for us and that's kind of cool because once i've created that package i can just export that out and then somebody else can start start using that right so i i think that's kind of really important again just to show it working i'm just going to rename this from index.js to uh we'll call it chrismath.js again you wouldn't need to do this normally because it's already a package and you could just import the package and the index.js can be used as default but let's let's do that so i'm going to call this chris.math and then what i'm going to do is i'm going to create a new uh file called index.js and then what i'm going to do is just go const math equals require and we will take in chris math dot js okay and then what we will do is just console.log and we'll do our math dot square um we'll put in 10 and then what should happen now is when i run nodeindex.js then it will run a square function and it comes back with 100 and again i can just change that to whatever i can put 25 in there and then run that and you can see it comes back with let's do that again 625 right so if you remember we created a function called we're that two i think it was so we'll call it weird at two um and i accept it in two numbers so if i pass in 10 and 10 it will add those two together so that would be 20 and then it squared so it should be 400 i think if my math is right so if we come back to my terminal and run nodeindex.js and you'll see it comes back with 400 and again come back to vs code change that from being 10 and 20 it will be some other number that my mathematical skills are not capable of calculating which is 900 so that is kind of uh assembly skip script it's it's pretty cool stuff um i'm gonna be honest i i like it a lot actually i think it's really neat it means you don't need to learn anything other than kind of javascript um it produces really good webassembly code and that's uh you know it's fairly optimized so i honestly think it's one of those things that you should just start picking up and using i mean go check out my video on russ i think the the code that russ is producing is a little bit bloater and again but it's more for larger production scenarios so i can get why you would want to use rust in a lot of scenarios but if you're building some fairly simple stuff you use javascript then assemblyscript is creating some really nice code and you should just go ahead and use that anyway i hope that's been useful for you i'm going to have some fun with assemblyscript i think it's great um again i'm not going into all the language features and differences in this you can kind of discover that for yourselves maybe in a future video what i'll do is it shows some more complicated examples with the simple script but i think it's cool stuff anyway hope this has been useful and we will speak soon you

Channel: Chris Hay

Views: 325

Keywords: chris hay, chrishayuk, how to use assemblyscript, what is assembly script, typescript, assemblyscript

Id: YYmE1m1LN1w

Length: 22min 43sec (1363 seconds)

Published: Tue Nov 09 2021