WebAssembly Introduction - Getting Started with Wasm

welcome to your introductory video on web assembly my name is Caleb and this video is really designed to give you the basics you've never used web assembly and you want to get started so we'll try to keep it pretty simple by first talking about what web assembly is and why you might want to use it so web assembly is a binary instruction format this will allow you to use other programming languages than just JavaScript within a web environment it says here that wasm is designed as a portable compilation Target what exactly does that mean we'll say you're writing code in C++ rust go or any other of these languages besides JavaScript and you would typically compile these to some Target such as x86 well instead you can compile it to wasum which is something that the browser can understand this will allow you to do stuff that would typically be a desktop application now within the browser so there's also this page which has a lot of good use cases and you can look through this list and it's a bunch of stuff that would be pretty computationally expensive probably not something you're going to first think oh I'm going to build this in JavaScript you're probably going to use a lower level language such as the ones mentioned C++ rust or go or any of these other compiled languages so if you want to do stuff like have games embedded in the browser or have an embedded video editor in the browser or build CAD applications remote desktop VPN encryption and all of these other computationally expensive tasks this is where web assembly can fit that bill you may be wondering why would I want to put these things in a browser well there's a few reasons why you might want to do this it reduces the need for the end user to install things and it will allow you to create crossplatform software from the get-go so you don't have to worry about compiling to multiple different targets you can just Target web assembly and that can work on all of the operating systems anything that would support a modern web browser so if you want to know what languages are supported you can go to the getting started page on the web assembly website and you can see a bunch of different languages here however it's important to know that this is not a language Fe feature this is a compilation Target meaning anybody could really take a programming language and Implement a wasum compiler now that's obviously not going to be an easy task but it's not like C or C++ or any of these other languages have some language capability to write web assembly rather it's a compiling process so in the example of rust which is what I'm going to show you in this video and I'm not going to assume any prior rust knowledge we're going to be using a tool called wmac for building JavaScript packages in Rust however if you want to follow along with another programming language once you understand the concepts of web assembly you could apply this to any of these different languages here and there might be support for other languages out there these are just the most common but you could probably find stuff for python or anything else not on this list so we'll pretty much be referencing this guide here so I encourage you to check out this page as well but I'll be showing you a few different things so hopefully this video will be helpful in helping you understand this content so the very first thing is if you've never used rust then you will need to install so you will want to go to the rust homepage at rust-orange go new-- lib and then give it a name such as hello wasum and then we'll open this in an Eder I'm going to use Visual Studio code so this is going to be our project and it's pretty simple you're just going to have a cargo. TL file and then the source which has your actual rust file and then a get ignore now very first thing if you've never used rust before you will want to go over to extensions and search rust and then install the needed rust extensions so I'm using the rust analyzer and rust syntax I think you can just install this group for rust as well if you want to go that route there's also an extension for toml files and that's called even better toml so I installed this as well and that's going to give us the proper highlighting for the cargo file this describes your package just like a package.json in node and we can go in here and Define dependencies the first one being something called wasum bind gen and the version for this is going to be 0.2 so that's what that will look like and then we also need to add a section in here called lib so that's going to look like square brackets lib and then inside here we will have crate type and inside of square brackets we will put C di lib and you can read a little bit about that here typically signifies that you like the compiler to create a dynamic system library but for web assembly Target it simply means create a wasm file without a start function so that is how we set up our rust project to create web assembly now let's take a look at our actual rust code we're going to replace this code here so we can delete this and the first thing we're going to do in here is import from a module so we will say use wasum bind gen colon colon Prelude and this will give us some of the most common wasum stuff and then colon colon asterisk so we will import everything from that and then whenever you want to create a function for wum you will use an attribute with pound square brackets and say wasum bind gen so the first thing that we're going to have in here is going to say x turn and this is where we can Define functions from JavaScript that we want to use in Rust so we'll create one here for alert which is going to use the JavaScript alert function and this is going to take a string as a parameter so we'll call that parameter s and this will be a type Str Str with the and sign so this is a string slice in Rust and if you have a hard time understanding any of the rust syntax I have a 1hour intro crash course to rust highly encourage you to check that out oops I forgot a m here so this is how we can use things from JavaScript next up we're going to Define rust specific stuff so another attribute wasm bind gen and we'll create a function we'll call it greet and this will take a parameter which will also be a string which we can say is the user's name and that will be a string slice then we will use the alert function and then we'll pass in an argument which we will generate a string using the format macro and it'll look something like this kind of like a function call but you'll have the exclamation mark and we'll say hello and then pass in that name so it'll look like this that is pretty much all the rust code we're going to start with so you've written your rust code now we can compile to do this we will say wasum pack build and then-- Target being web this can take some time as it's going to go through all of our files and this is going to generate a package folder and this is going to have JavaScript files which binds into the web assembly that we created so you can go in here for example and you should find a function for greet and you can see that right here now we're going to talk about using wum from a web page so we'll go in and create an index HTML file at the root of our project and I'm going to paste in a basic example of an HTML page it's pretty simple overall I just don't want to type all that out on this video and if you want to copy paste this you can also find it in the mdn docs scrolling through here and you will find that here and this will import that function and allow us to invoke it in JavaScript code now for this to work we're going to serve this file from a web server I'm going to use a very simple web server that can be installed as an an npm package there are various other ways you could do this for example python has something very similar as well but for me I'm just going to go into the terminal and install HTTP server and this will allow us to very easily start a local server so HTTP server and then it'll give us a URL that we can open with command or control clicking that'll open a web browser and it says hello web assembly so what's going on here it's taking our name which we said is web assembly passing it to greet going over to our source code that's going to be this parameter here which is then going to invoke alert formatting a string that says hello followed by that name so we're not getting a ton of value from the web assembly here because we're basically just using it to then invoke JavaScript so we don't really need this extra complicated stuff but this gives you the setup so then you can build out more complex things so how might you use this well computation Ally expensive stuff could be done on the rust side and you can then keep your JavaScript layer much more thin I'll show you just a very basic example of this by creating a separate function here and I'm going to create a function to calculate Fibonacci numbers but you could just imagine substituting this for any computationally expensive stuff or tying into a rust code base that is already written I've seen this with blockchains for example that are written in Rust if you have some SDK you can pull that in to your web development very easily with web assembly so we'll say function Fibonacci or just FIB this is going to take a number we'll call it n and we'll say this is a u32 and this is going to give us back a Fibonacci number so we'll say u32 then we'll use a match against n if it's zero we will give back zero if it's one we will give back one which is the start of the Fibonacci numbers so if you look up Fibonacci Sequence you can see 0o 1 1 2 3 5 8 13 and the formula is basically just adding up the previous two number Fibonacci numbers so for 2 we will say FIB of nus1 plus FIB of nus 2 very easy way of organizing this and actually this wouldn't be just two we would want this to be for everything else so you can use an underscore to indicate that then we could just use this down here in our other function to see an example of that so say instead of them passing their name they pass a number which will be of type u32 and then we can calculate num being FIB of N and then we could substitute both of those in so we'll just put two sections here and the first one being n and then the next being num so basically now when the user calls this they will pass in not a string but the Fibonacci number that they want to call or calculate so we could say six for example so now we will will recompile so we'll close out of our server WM pack build and then we will restart our server head back to the browser and do a refresh you might need to do a hard reload so you can just hold that down while you have the terminal up and that will refresh the page so the sixth Fibonacci number is eight that's the general process of working with web assembly and rust obviously this is just scratching the surface I wanted to give you the starter information as quickly as possible POS if you guys would like I might come back to this topic and do a more in-depth project of some kind let me know if that's something you might be interested in but thanks for watching and until next time please be sure to subscribe definitely support this channel by turning on notifications would appreciate that a lot I also wanted to mention two helpful resources I have a link to a free intro course to the software development career this will be linked down below it's with a platform called course careers and then secondly I have a lot of my YouTube videos up on my website adree and downloadable which can give you a new learning experience so definitely check that out if you'd be interested and with that thank you for watching I'll see you in the next one

Channel: Caleb Curry

Views: 3,973

Keywords: tutorial, programming, code, coding, caleb, curry, how to, wasm, web assembly, intro, getting started with wasm, getting started, introduction

Id: dqhJU772ckM

Length: 12min 7sec (727 seconds)

Published: Thu Jan 04 2024