Let's Talk About WASM and WASI — Offline Stream #11

hello and welcome to another searching session today um is friday if i'm not mistaken and it means today according to the schedule we are doing a random one-off topic that means i pick a random topic and i stream it for uh for the whole stream or for the whole session as a matter of fact because i'm not streaming right now i'm not live it's completely offline recording so and the topic of today's session is wazi right webassembly system interface uh i worked a lot of with just pure webassembly as a matter of fact i wrote a lot of small different projects in web assembly i think the recent one was a rust browser game i really recommend to check it out it actually turned out very very interesting so i'm going to put it in the description rust browser game right and also maybe i'm gonna actually put the link to the wazi so i think this is official website of what i don't know how to check if it's the official website of wazi but maybe it is anyway so but i never worked like specifically with the webassembly system interface i never felt the need to um to use it and the interesting thing about this stuff is that [Music] i i guess it's sort of i already mentioned that it sort of competes with posix right so it basically defines its own system layer but on top of webassembly and i don't quite understand why we need wazi if we just have posix maybe you can argue that postx is sort of like an old and upsetted thing that was designed for a completely different environment or something like that but m script and actually implements like a posix layers on top of on top of the browser and that's how it ports all these things and that's precisely why i want to learn this thing like i know nothing about it but from what i heard about it it's just basically posix for web assembly right so it's essentially posix for web assembly even though you can literally implement posix on top of webassembly still we need a separate thing um and to understand what is the webassembly system interface we need to understand precisely on a technical level uh what is web assembly itself so do you guys know what is webassembly i i don't know what is a web assembly do i look like a programmer let's actually google it so web assembly webassembly is a binary instruction format for a stack based virtual machine that's a pretty precise description i think it's a pretty precise description but um okay so let's take a look at these two things what is a stack based virtual machine when you explain a stack-based virtual machine to um to programmers who are familiar with such thing as fourth they will instantly tell you oh this is like fourth right because they are familiar with force so uh they will see a lot of similarities but the thing is like there is a lot of stack based system all around us and people don't really notice them because people usually work on a level higher than them right so so essentially jbm for instance is also a stack-based virtual machine it's also like fourth right and as a matter of fact on a very low level in the native code you also have at least call stack sometimes and you can put the data on that stack and it's just like yeah so there's a lot of like things just like fourth um but anyway so stack based virtual machine is basically a machine that has a stack and it has instructions that operate on that stack and perform different things on that stack so essentially like a simple virtual machine in c right so a simple virtual machine is c uh vm let's let's pull it like this essentially defines a bunch of instructions right let's define a couple of instructions um so it's going to be instruction type and what kind of instructions do we want for our stack based virtual machine so for now let's define instruction uh push that pushes a value on the stack of the virtual machine then uh let's define something like add that takes two elements on the top of the stack and sums them up and puts the sum on the top of the stack and print that takes the element at the top of the stack and prints it and of course removes it from the stack right it basically consumes it as well so this is the instruction types that we can have in like a very small stack based virtual machine so then we can define an instruction right the instruction is going to be structure which consists of the instruction type and an optional operand all right so for now the only instruction that will need an operand is probably push because it needs to push some data onto the stack add uh takes the data from the stack and print also takes the data from the stack they don't need the operands but we're gonna just provide the operand you know specifically for push at least right and uh that's it believe it or not now you can just write a program and program is going to be an array of instructions right so let's actually write a very simple program so the first instruction is going to be uh something like um emacs instruction push and we're going to push an operand uh 35 right and let's push another operand like 34 right after that we can sum them up right we can sum them up and we can print the result there we go we just wrote a very simple program on our imaginary virtual machine yes so that's that's how we do that right so let's actually try to try to compile this entire thing and see if it's going to compile or not so let's include a couple of things in here uh so it's going to be sdg io stdlip and maybe it would make sense to actually i don't know let's actually just compile like this wlw extra old main main c and let's just compile this entire stuff and compile first try not bad not bad at all all right so we also need to know the size of the program so let's actually define program size and basically we take the size of the whole array right in bytes and divide it by the size of a single element in bytes and this is how we get the amount of instructions in here right so now let's try to interpret this program so to interpret this program you're going to iterate through all the instructions starting from zero up until the program size right up until the program size and dispatch upon the type of the instructions so we see we iterate through all of the instructions and we look at their type and depending on the type of instruction we're going to do different things so we're going to do program ip type and how many instructions do we have in here we have these three kinds of instructions three kinds of instructions mate okay and i'm gonna quickly replace this thing with that there we go all right um so if you encountered push what you have to do you have to take the instructions operand and push the value of that operand onto the stack but we don't have a stack let's define a stack so it's going to be an array of a particular capacity let's actually define stack capacity uh and what's going to be the stack capacity let's say it's going to be 1024 right and we also in the variable that keeps track of how many elements do we have on the stack right there we go so we also need a couple of auxiliary functions that push elements on the stack and pop up from the stack and also check for stack underflow and stack overflows we're going to implement them in a second so let's quickly do that so we're going to do something like stack push um it accepts the value and you can't push a value onto the stack if the stack is already full so stack size has to be less uh than stack capacity uh and if you have enough enough space on the stack you just push the value into it there we go so we also need something like stack pop to get the elements off of the stack uh so this one is not going to accept anything and in here we need to make sure that stack at least has like one element so it's greater than zero and we can in that case return stack size minus minus there we go we have a stack push and stack pop pretty straight forward all right so if you encounter a push instruction which you do you just push uh the operand of your instruction operand of your instruction on on the stack right if you encounter add you take first to element on top of the stack so here comes the first element it's going to be stack pop uh here comes the second element and then you put the sum of these two elements back onto the stack there we go so we implemented the second instruction and the third instruction basically takes an element on this on top of the stack and prints it so let's actually implement it like this it's going to be print f d uh stack pop and then break and of course if we encountered some value that doesn't represent any instruction type we have to assert that right we have to assert that saying something like um invalid instruction all right this is an invited instruction and i think we'll need to include a sword.h and let's try to compile this entire thing and it doesn't compile because stack label can be only are you serious is that because i need to put curly braces in here is that what you want in here yes uh but as you can see it printed 69 right and if you take a look at the program that we actually wrote here right so we pushed 35 and 34 and then we added them together and then we printed so you can modify this program for example you can put one and actually add added to two times so now your value your final value is going to be 70. there we go we implemented a very simple stack based virtual machine yes in a nutshell a stack based virtual machine is this a real world stack based virtual machine is going to have more instructions it's going to have more concepts like uh maybe on top of the stack it's also going to have like a static memory that it can access and so on and so forth right it can have like a lot of different things all right and uh all right so this is the um stack based virtual machine what you can do with this thing you can actually take this array and dump it as a binary data onto the file system right so let's actually implement the function that will do that uh save program um save program let's say to file all right and this is going to be something like const char file path construct file path and let's actually open the file so it's going to be f open file path we're gonna open it for writing in binary and after we're done we're gonna close this file there we go so and we're gonna use a function f right f right here it is here it is okay let's put it in here so what we're what we're uh saving to the file we're saving the program the size of a single element of this program is uh program zero right so the size of a single element and the amount of elements that we're saving is a program uh program size right and after that we're saving it into the f there we go so we essentially dumped the program as binary data into the file system let's see how it's going to work uh so well we need to do something like uh save program 2 file and it's going to be dump the bin right maybe let's actually call it program uh dot vm yeah i think it's gonna it's gonna look cooler all right and we have a program.vm 32 bytes of program that vm and let's take a look at the hexadecimal representation all right so in a hexadecimal representation you would see uh four zeros and these four zeros actually represent uh instruction push right so instruction push because enumerations in c they actually start with zero then one then two and so on and so forth and the single instruction is actually integer for this enumeration four bytes for the type and four bytes for the operand right so the first four bytes is the instruction and then four bytes of the operand and uh operand 23 in hexadecimal um so 23 is 35 precisely the numbers that we put in here the next four is zeros again so that means it's another push 22 is uh one less so that means it's 34. and here comes another instruction right instruction one right and that instruction is add since it doesn't have any operand its operand is set to zero and then we have an instruction print that is two so as you can see we sort of saved uh the program into like a binary format and we can easily write a program that loads it up and interprets it so basically we can easily unhard code this program and basically allow the user to load any kind of program from this file so we just implemented a binary format for our virtual machine right so this format is pretty crappy because it uh depends on ndns of the current machine so with the with the machine with different engines you will have to like invert the bytes and stuff like that but ignoring that we have a very simple virtual machine and a very simple uh binary format for that virtual machine and again what is the web assembly webassembly is a binary instruction format for a stack based machine so conceptually web assembly is this it just has like slightly different format it has like well thought out architecture and stuff like that compared to this thing it has more instructions it has like um a special memory right it has a special special memory region it also has a mechanisms to interact with outside world uh we also have a mechanism to interact with that how it works like print but uh webassembly has more complicated things but in a nutshell that's what it is yeah so it's a stack based uh virtual machine and a binary format so that's essentially what it is that is essentially what it is isn't that cool i think it's pretty cool so should i actually put this thing in the description if anyone want to play with it i don't know maybe some people want to play with it um so i'm going to put a comment in here uh maybe i want to actually put like a license so here is the mit license you can do whatever you want with this thing under mit license and uh then we're gonna i'm gonna have an instruction on how to build this entire thing so it's gonna be just um i don't know the cco main main.c right so you maybe i'm not going to even put any instruction because yeah just just build it with any c standard compliant compiler right um okay and let me actually put it into the gist and i'm going to put this thing in the description so we have bmc uh and there we go there we go i'm gonna create you know what i'm gonna create a secret gist just in case uh somebody will see me creating a public one and spoil the today's topic okay here is the secret gist and i'm gonna put this secret gist in the description um simple stack based virtual machine in c there we go so it's it's very simple it's very straightforward uh and you can extend this virtual machine you can add more operations in here for instance you can add a subtract operation right or multiply operation or you can make it work with like floating point numbers and stuff like that as a matter of fact uh i some time ago i did exactly that i have a project of mine which is called bm which is essentially a very like a more complicated version of this virtual machine believe it or not so here you have three instructions but in this virtual machine uh let me see let me see i think we have 64 instructions right and uh i think it's located somewhere in here right i think it's located somewhere in here uh yeah here is the table of all of the instructions right so and as far as i can tell there's like 64 of them for different things and stuff like that it also has the mechanisms for uh interacting with c code and whatnot and yeah it has a lot of things so all of that are instruction descriptions uh all of that are instruction descriptions and it also has an interpreter and it also has a compiler from like two custom languages to this uh virtual machine and stuff like that so check it out it's actually pretty pretty interesting i do uh development sessions for for this project on this channel as well uh my own virtual machine right so here it is so check it out it's pretty cool um [Music] but web assembly is actually more widespread right so this is a stack based virtual machine that is available in your browser you can already use it today and people usually use it by taking a c code or rast code and compiling it down to webassembly but you don't have to use languages to compile down to webassembly you can actually write in webassembly directly the same way we wrote the program directly in our virtual machine right as you can see we created very simple virtual machine and we wrote the program directly in the instructions of this virtual machine in fact you can do the same in web assembly below it or not you can do the same in web assembly all right so there is a thing called what what what yes that's the thing it stands for web s family text that's what it stands for so since web assembly is a binary format right just like the binary file that was was outputted by our program uh what is essentially this but in a human readable uh version right it's in a human readable version so basically it's assembly it's kind of confusing if you think about it so uh some time ago right people programmed in assembly everybody knows this low-level language called assembly before assembly people programmed in uh native constructions of the hardware people were programming uh very specific hardware they would take the manual for that hardware they would read it understand it and then a code in numbers of particular instructions and stuff like that um so they would code directly in the native code and then somebody uh came up with an idea okay let's actually assign human readable mnemonics on these like numbers and stuff like that and write programs in a text of this mnemonics and have a separate program that takes this human readable mnemonics and translates them into the machine readable code and that thing was called assembly assembly was called a human readable uh representation of a binary format right so um so uh yeah um how to say that yeah so assembly was a human readable a readable format web according to the definition from this this website is a binary instruction form it is a binary format and human readable human readable version of webassembly is not called assembly it is called web assembly text so this is a human readable format so assembly used to mean a human human readable format but web assembly is not human readable it's a binary format you're not supposed to read it the human readable version of webassembly is webassembly text yeah so uh web assembly text there we go ah all right um understanding web assembly so it uses something called the s expressions right so it uses something called s expressions uh yeah is there any information uh on wikipedia i think there should be something on wikipedia let's take a look at s expressions what is the s expression as as we can so s expressions is basically consists of two elements they consist of atoms right they consist of atoms and they consist of lists right so a single element of this list would be called an atom and a sequence of atoms is a list and you can also have nested lists right you can also have nested lists uh so here is example of an s expression right so this s expression has uh an outer list that consists of two elements first element and a second element and each element of this list is a list by itself that consists of two elements which are atoms and this atom is called milk uh and this one is called juice and this one is called honey and this code uh this one is called marmalade you can think of s expressions are some sort of a tech like a data format like um like json right so something like json in json you can also do something like maybe i don't know you can have an array uh of array of these elements which are going to be strings and so on and so forth right um yeah or you can think about xml right s expression is basically like similar to this kind of format right and uh yeah you basically write your webassembly code in s expressions like that uh so let's actually try to write something so writing a single function in web assembly would look like this as far as i know to start writing a program in webassembly you first have to define a module right so i think this is the simplest module that you can ever define so um let's actually put something like um hello dot what right so there we go so here's a single module and as far as i know uh there's there are special tools uh to take your webassembly text and turn into the binary web assembly the one that can be run in your browser right so um how is it called i think it's called wabit yeah i think this thing yeah this thing is called wabit the webassembly binary toolkit the web assembly binary toolkit one of the tools in that toolkit is what to wasm so it takes webassembly text and converts it to a binary representation of webassembly so you can find the source code of this thing in here i'm going to put it in the description just for you emacs because i just want to go to the description and love it so abit stands for webassembly yeah i already said binary toolkit yeah so here's the bobbit um and yeah let's actually take this thing let's take this thing and try to convert it into wasm uh what was them i already have it installed as you can see so i already have it on my machine and i'm gonna just uh pass it hello what and it succeeded and it created a wasm file which is quite cool and let's take a look inside of that wasn't file well there's some garbage in here all right and if we take a look in excel mode yeah there's some bytes in here so i suppose this is a magical uh magical number that spells as awesome and i guess here we have an empty module essentially right so this is webassembly right this is how webassembly looks like it's a binary format you cannot read it it's not meant to be read by humans it's meant to be executed by browsers or environments where you have um you know webassembly virtual machine [Music] how do you execute this thing actually how do you even execute it well you cannot just give it to the browser like you give a javascript to the browser uh while the script tag right you cannot just do something like uh hello wasm and execute it no no no no no it is not an option in a modern world you have to use javascript to load webassembly module to load webassembly modules and only then you can run functions of that webassembly module yes it's absolutely beautiful all right so um you can do that in the browser or you can do that in node.js like i'm going to do that in node.js because i think like i don't want to mess with the browsers like open console and stuff like that um i don't know but maybe we can do that in the browser just to demonstrate that it works in a browser why not and okay let's do that in the browser sure sure this turns into a web development session i love web development it's my favorite uh index htmls um okay so this is gonna be did they it up again i think i it up again let me restart my emacs one more time one more time uh okay so let me start e-maxing here index html so it's gonna be tag uh i actually wanted to switch to html mode yeah now we're talking uh tag add tag i um title and the title is gonna be web assembly uh demo right because that's what it is and then we're gonna have a body and uh we need to essentially include some script in here right so let's actually do something this is gonna tag i script um and it's gonna be src and it's gonna be index dot js there we go so it's kind of interesting right you cannot run javascript directly in the browser you have to use html to load javascript all right then that javascript will load webassembly for you so we have like three layers of obstruction but well technically you can still put the javascript in here but you're still using html to bootstrap javascript so to run webassembly right around webassembly you need you need at least two languages the first language is html and the second one is javascript so html will somehow make javascript running and then javascript will somehow make you webassembly running welcome to the modern software development the software development that we deserve cheers everyone anyway so okay so we're gonna do something like window on load and when everything is loaded up uh we're gonna do our thing i think the easiest way in here would be to i don't know use the sync functions because a lot of things in web assembly they are very much asynchronous all right so let's actually try to do async functions i'm not super familiar with the synchronous functions so forgive me if i make very stupid mistakes uh so here's the start and i'm gonna do console log start it all right and as far as i know you just need to do start and maybe catch some errors i forget how you you catch them i forgot how you catch them uh javascript uh promise uh so what are the methods of this stuff what are the methods then it is literally called catch okay uh so it's it's actually confused me that the cache is also keyword but apparently you can have a keyword uh as the function okay so that's fine sure sure that's fine so it's gonna be uh error e and uh can you can you even do console error you should be able to so error yeah you can do it cool uh so let me try to run this entire thing in the browser and is it going to be working is it going to be working we're about to find out console and it says it started absolutely beautiful isn't that amazing i think it's good them amazing started this entire thing has started so the next thing we need to do i think we need to uh fetch the uh the webassembly file right we need to literally fetch it what's interesting is that you cannot fetch it uh over the file schema right so we're using the file schema um and yeah you cannot fetch it because of the course or something but maybe there is a way to bypass course in this particular case but i don't think i know of such way so let's actually do something like uh hello wasm right so we're trying to fetch it and we're gonna put it into like bottom right and let's see what's gonna happen in here uh i'm gonna refresh it and there we go so uh fetch api cannot load url scheme must be http or gtbs for course requests okay so that means uh you need to also have http server right to run a web assembly in a browser you not only need two separate languages right html to bootstrap javascript and javascript to bootstrap a web assembly you also need to do that over a web server right so you have a webassembly module you cannot just run uh that module in a browser right you you can't just like give it to the browser and browser we're like no no no no you can't do that i'm sorry there's too many layers of obstructions and too many layers of legacy and backward compatibility to maintain for decades you cannot do that i'm really sorry so let's actually start a web server that will actually serve all that uh for for us somehow uh so we're gonna use python 3 a simple http server i'm actually going to run it like this uh python3 uh m http server and uh there we go does it work does it work okay so now i'm gonna actually uh okay it uses the eight thousand all right all right and it did a thing i think it did a thing and maybe one of the things we can do in here we can try to do console log wasm there we go and yeah we'll get a promise we've got a promise uh which is already fulfilled so to get the actual fulfilled thing in here i think we need to avoid it in here right so this is basically here's the response uh we get a response though right [Music] i wonder if we can just give it to webassembly instead anyway so we've got the thing we managed to query the thing this thing is correct so if i try to do it like that it will say it's an error because there's no such file it's 404 beautiful so but this one actually works all right so web assembly instantiate so the next thing you need to do you need to instantiate a web assembly instance right you need to instantiate webassembly instance so buffer source usually array buffer so compile streaming okay so as far as i know we won't be able to do compile streaming uh i can try to do it and we'll see why actually uh so let me let me show you so if you try to do something like hello wasm right and here comes the uh wasm instance itself we're gonna be awaiting it right so as you can see this one is a pretty straightforward you just fetch uh the the wasm thingy and you give it to webassembly streaming precisely what we have in here right precisely what we have in here and it should just work uh but it won't work by the way it won't work by the way so uh oh it actually worked all right oh i remember it didn't work over python 2. yeah wait a second just a second because it's kind of interesting um so if i go to asynchronous thing yeah if you go to a synchronous thing and if you try to i mean i know that nobody uses python 2 in 2021 but bear with me http server if you use something like this right so it's a python 2 and it still doesn't it still works surprisingly okay so maybe something changed since the last time i checked it all right that's actually pretty good that something changed so the problem was long time ago is that this thing wouldn't work even a specific mime type is not set i i don't even know how this thing is pronounced but it's supposed to be set to webassembly uh to application wasm or something otherwise it just won't even compile anything in here and uh python simple python server didn't set it because it was just serving like uh binary data but now it works for some reason i don't know sometimes things works sometimes things don't but anyway all right so um after we instantiate everything right uh we should be able to oh it's actually compiling stream is there something like instantiate streaming [Music] okay so maybe i'm going to look at one of my previous projects because i can never remember how to instantiate this thing properly i can never remember how to do that uh yeah so you have to fetch the file you have to take the array buffer uh and then you have to instantiate streaming well i mean this is a completely different thing okay so we can instantiate streaming uh all right so let's do instantiate streaming streaming i think that's what it has to be uh and if i refresh it okay so i also need to run it [Music] okay so we managed to instantiate web assembly okay cool so um and there you go you instantiated webassembly and now inside of this thing you have instance right so you have wasm instance and inside of the instance you have exports right you have experts and if your module uh would export any of the functions you would have these functions in here and you would be able to call these functions like this so this is what it takes to run your web assembly in a browser right so you need to have a webassembly module right then you use html to bootstrap javascript and then you use javascript to bootstrap webassembly right and inside of javascript you have to make another query uh you have to need another query to receive this binary blob then instantiate it and then deep inside of the instance you have the export of that webassembly module and you can run these specific functions of course a lot of these systems a lot of frameworks compilers they do abstract away that thing from you uh right but if you are the author of these frameworks and these languages you need to know this kind of stuff because to obstruct these things away somebody has to do that somebody has to abstract those things away for other people and it is important that people still understand how these things work in my opinion but my opinion doesn't matter alright so as you can see uh right now our webassembly module doesn't really export anything in here because it's just like you know a simple module uh let's actually make it expert something let's make it export something so uh what can we do in here what can we do in here so we can define a function inside of it right we can define a function so the way you define a function you use keyword func and then you define parameters you specify the type of the parameters and you can also have local variables and so on and so forth so um yeah you can also assign names to these parameters uh all of that is a textual representation it has nothing to do with the actual binary representation so this textual representation is just like for a human readability right for human readability uh so let's actually define a function um so can i just do something like uh power reddit do i even have a bot mode uh do i even have a mod mode i remember at some point i had the what mode installed on my emacs so we have it in here what mode no we didn't have it amax what mode so it's available in here [Music] i'm too lazy i can use a lisp let's use this one okay so i'm going to define a function all right and that function um that function where is my it's going to have two parameters right so it's going to have a parameter uh of the type i32 and another parameter uh is gonna be of the type i32 as well right and as far as i know you can also specify the yeah you can also specify the result right so what's what's your function is going to return uh and there we go so as far as the node parameters are local functions right they are they're local variables right and the thing you can do you can do something like local get uh and you specify the index of this parameter right you specify the index okay i want to get the parameter uh at index zero and push its value on the stack right again we know how the stack based virtual machine work we push this thing on the stack then i do local get one so that means i get this parameter and i push it value on the stack and then i want to sum them up right and uh to do that i just do i set it to add right so this thing acts precisely as our instruction add right it works precisely our instruction add and takes two elements on the stack sums them up and put it back on the stack and result is supposed to be um a top element on this stack so i declared that the result is going to be i32 and the result of summing up icg2 and i32 is i32 so that should be correct right so this is a basic program in webassembly that sums up two numbers that you uh that you give it right so but again it's a text representation browsers cannot run it you have to compile it down to a binary format and to compile down to binary format we have to feed it to what to wasm and this probably not gonna work because i probably made some sort of mistakes and it worked okay so our the size of our wasm was eight bytes the size for an empty module is eight bytes if we refresh it now now it's 32 bytes right and excuse me it's 32 bytes so it's a little bit bigger this is because it contains the implementation of our function right and if we go inside of this thing there you go we have a bunch of things and um yeah so this is essentially a function that sums up two numbers that you give it uh compiled down to webassembly binary code that you can now try to run in a browser um okay so let's actually do the following thing in index.js i'm going to simply call console.locubozom and let's take a look at the instance of that wasm let's take a look at the instance of that wasm so yeah i forgot to save this entire thing right if you take a look at the instance we still don't have any exports we implemented a function but we still don't have any exports and this is because it is not enough to just find a function in there you have to export it i don't remember how to export function i think it's something like export uh hello i think this is how you export functions uh let me try to recompile this thing one more time and i guess i was right so now the size went up from 32 to 43 and the reason why it went up is because now the webassembly module need to store the name of your function right as you can see now we have hello and it needs to store that name because it needs to be displayed in the in the browser right so it needs to be stored somewhere and now if you refresh your browser and look inside of the instance and one of the experts is going to be hello funk oh my god yes here it is here is our f function uh well hello function that we wrote directly in webassembly all right so um let me now try to code so now inside of js you should be able to do basm instance exports hello 34 35 and let's print the result of this thing let's print the result of this thing 69 right so that's what it takes to run webassembly in your browser isn't that beautiful isn't it exciting this is the future of computing yes for the future of computing [Music] cool so and yeah you can uh work with this thing directly if you want to of course in in real world you're not going to be doing this kind of stuff directly you're going to be writing program like in c or in rust or any other thing you see sharp i think c sharp has a couple of frameworks that um do all of these heavy heavy lifting for you uh so you don't have to think about it but they also generate shutdown of bloat but i mean who cares just buy a better computer um so but what is wazi like what the is was it right um so okay you can actually put data from javascript from the outside world into webassembly as you can see we did this thing here right we gave web assembly numbers 34 and 35 and web assembly managed to crunch them just add them together and return us the the thing but what if web assembly wants to go the other way around what if the web assembly wants to call a javascript function right what if webassembly needs to do like a printf debugging of some sort right how do you do that from webassembly well again webassembly is a little bit more uh complicated virtual machine like it's actually way more complicated about a virtual machine than this so it has a mechanism of imports right it has a mechanism of imports so inside of the web assembly module you can declare uh what functions are you gonna import are you gonna import and the environment specifically browser will be able to provide uh the implementations for those functions that you import and if a web assembly calls one of these functions it will basically call javascript functions right so that way you'll be able to sort of write bindings um for for webassembly right so um let me let me see what we can do in here so web assembly uh web assembly import functions how do you import functions i don't remember i do not remember how you do that so well i mean i already did that before so i might as well actually take a look at one of my one of my codes one of my codes so i think it's uh yeah you can import memory and you can also import specific functions okay so this is precisely how we do that so you declare that you have a function and its name inside of the webassembly is going to be dollar print uh it's going to be imported inside of like this path and this function has a single parameter uh is32 right so and essentially uh then you should be able to call it uh yeah you can literally just use call uh print right so um yeah instead of returning this entire stuff right instead of returning the result of the sum right we can actually call print um and the print will actually consume it so now we need to provide this function in javascript so as far as i know you have to provide it index.js uh you have to provide it somewhere here right so you're gonna have imports and let me see there was example in here stream instantiate streaming i think it's the second parameter of instantiate streaming i'm pretty sure it's the second parameter of this thing yeah import object yes yes yes yes uh so we have to do imports [Music] i don't remember how you have to specify it so maybe you just have to be js uh right and then you're going to have a print and the print is going to be a function that x uh that takes x and prints something like um this function was called by web assembly program with uh for uh with argument uh x there we go so that's how we do that uh let's now try to well first of all we need to recompile our webassembly program right it recompiled successfully and let's find our thing in here and it didn't work nice i'm absolutely happy uh i can see so it failed somewhere where did it fail i clicked on oh yeah okay it worked okay so uh this is the 404 actually okay so it says this function was called by webassembly program with the argument 69 okay so as you can see it worked right so what we did in above assembling here instead of returning this thing we called uh print with this argument and print was provided by javascript so we went from webassembly and then from webassembly back to javascript right so that's how we do that all right and as you can see so this like a sequence of these imports right and like a collection of these imported functions form an interface between your web assembly program and the environment in which web assembly is running it is an interface and again so where you have an interface uh you usually have a madness right because you may have programs that expect one interface from the environment and another programs will have will expect another interest inference from the environment so this kind of interface uh wants standardization right so what kind of functions uh you can expect from the environment that you can call uh from webassembly uh will you always have this print i don't know maybe will you always like have a function that opens a file right open file i don't know like it's kind of weird to have this function in the browser like browser does the browser even have an access to the file system well i mean it does have some sort of access to the file system but if you're like running the program in node it does make sense to have this kind of function you see like it just depends on the environment and this kind of interface needs standardization and as far as i know that's what wazi is yes as far as i can i never looked inside of the wazi but as far as i know wizard is just yeah let's standardize what the you can put in here because different people may put different things in here like like how do we know let's standardize that and that's i think what it is so and on today's stream after an hour of explanation what the is wazi i would like to check out wazi how about that how about that uh but before i check out wazi i want to make a small break and i want to make a cup of tea and after i make a cup of tea we're going to go into different tutorials as you can see we have tutorials examples i want to read more about this thing and see if it's something interesting because uh i worked a lot of with webassembly like i've rolled just webassembly programs that don't rely on any standardized interfaces with the environment i just like you know did small small things here and there just small chat posts but maybe the time has come to standardize my work you know the time has come to grow up and admit that yes the interface between environment and your program has to be standardized so yeah anyway let's let's make a small break i want to make a cup of tea so it's gonna be in a snap because i mean it's offline stream i can just easily pause and i'm back uh okay so let's take a look at what the hell is wazi um all right wazi is a modular system interface for webassembly as described in the initial announcement it is focused on security and portability of course everything in 2021 is focused on security and portability this is such a new concept oh my god oh my god nobody ever cared about portability insecurity ever and yeah we're doing that for the first time my god uh okay cool thank you very much very interesting so uh wasa is being standardized in a subgroup of a webassembly cg discussions happen in github issues and by weekly zoom meet can we join by weekly zoom meetings we can't join anyway uh very interesting uh so for a quick intro to wazi including getting started using see the intro document okay intro document very interesting uh so there was wasm time run times tutorial contains example for how to target wazi from c and rust the resulting wasa modules can be run in any wisely compliant runtime my god my cat uh do i have a wiser time i don't even know what the is the buzzer time uh wasn't time not not was it time right all right let's close all this and uh let me see wasn't time it's mother flipping bosom time uh standalone uh jeet style run time for webassembly using chronology what what are these words i know what is it crane lift what the hell is crane lift crane lift is a code generator and it's been archived wait uh the creative source now lives in was ah they they merged back and okay sure cool um cool cool cool cool um um okay i wonder if uh i have wasn't time in my debian stale machine of course i don't what did you expect i don't know what i expected okay so let's actually take this militia script and run it on our machine with root access so installing latest version holy the is going on uh user profile uh yeah i really love how these scripts like just just edit your bash rc like so rude uh imagine me working hard on my on my bash rc and then just some script comes in and just say i'm gonna edit that for you open a new channel to start using wasn't time uh so what did they do actually there let's actually take a look uh i wonder if i'm not going to leak anything sensitive i don't think i'm making anything sensitive so we have a wasn't time so we have a separate folder called wasn't time and if i go to wasn't time and you have a bin and what is this file uh this file is f you could have just let me download this file myself i couldn't do that myself does this thing think that i can i don't know how to download files from the internet and put them in the folders this is so insulting i don't know this is like i know how to do that like just like okay uh and sure which was in time uh all right so wasn't time wasn't time uh and then you can oh so can i just run my example uh that we like implemented at the beginning with wasn't time when the flipping wasn't time uh all right and error to run main module wasn't um failed to instantiate unknown import.js print was not oh it has not been defined ah i see what's going on in here so yeah yz probably doesn't have gsprint or something like that okay uh let's try to do something in here let's try to do something so i'm thinking uh that i kind of want to make maybe i don't want to make a make file but yeah so let's do what to wasm right first of all let's actually remove all of these prints right let's actually remove all of them and let's not call print and let's also announce that hello is going to return i-32 okay let's actually go back in here uh and then i'm going to recompile everything and let's do wasn't time wasn't time and nothing happened nice i don't know what they expected but did it exit with like and it takes it with a zero exit code cool um okay so uh let me see let me see so maybe we can take a look at some of the tutorials and examples tutorial um we'll split the tutorial into two parts in the first part we'll walk through compiling c and ras programs to vasi and executing the compiled webassembly module using wasm time runtime in the second part we will discuss the compilation of a simpler webassembly program written using webassembly text format and executing this using wasmtime runtime all right compiling toolbox from c let's start with a simple c program which performs a file copy which will show to uh which will show the compile and run progress as well as perform simple sandbox configuration the c code here uh uses standard posix api and doesn't have any knowledge of wazi web assembly or sandboxing interesting so the clank i'm assuming that you're going to be using clang because clank yeah clank can compile to to wasm or something um clank takes posix slayer and translates it to wazi which further confirms my point why is he is posix for web assembly and wazi is an attempt of big corporations to actually compete with posix where is my team tin foil hat but does it does this really have to be this complicated can we just take hello world and simply simply compile hello world and see if we could print something i don't know that would be actually kind of cool so the yz is the k sdk provides a clank which is configured to target buzzy and use devices 6 root now i have to install yz sdk do i really have to install yz sdk or something uh i don't want to do that i maybe maybe i'm not going to do that because it's kind of it's kind of meh just can't man but you we also provide like an extension was or maybe the text that this extension wasn't just that um [Music] [Music] okay let me do the following thing i want to kind of clean up this entire thing and create like a make file in here right let's create a make file uh to be fair maybe maybe not so because i wanna like split these things into separate folders like i'm gonna have like a my own vm and i'm gonna move everything related to this like my own vm in here right then uh we have vasem um a browser demo right here it is and here's everything related to wasn't browser demo um so here we have a custom simple vm right so maybe even i'm gonna actually like number it like this uh zero two wasn't browser demo and there we go so and maybe the next phase is gonna be zero three uh try uh like testing maybe trying i think trying is gonna be better trying out buzzy right so and in here we have a vm i'm gonna rename it to buzzy stream right yeah let's go to buy this stream crazy stream so and let me remove all of this stuff right let me remove all this stuff and i'm going to create a make file in here which creates a vm from main c is going to be using ccwlw extra the standard is going to be c99 is going to be extremely pedantic right and maybe we're gonna enable all of the possible optimizations because we want our uh virtual machine go go vm main.c there we go and once you try to review this entire thing uh yep it's going to give you this and then it's going to just do that and also output this thing so we may try to also get ignore all of this garbage in here so we're going to ignore this and we're going to ignore everything that starts like with ends with vm thingy all right sorry um so wasn't browser demo so in the washing browser demo we are generating bosom right so i want to create another make file in here and this one is going to be basically hello wasm uh it depends on hello what and we just do what to wasm and we're just generating it like this and then we're gonna git ignore uh git ignore uh wasn't in this specific folder so um maybe i'm also going to do a readme dot md um saying something like simple uh stack based virtual machine in c uh and we're gonna have a quick start in here quick start uh console it's gonna be make and then you just run vm and that is it um so read the source code um read me in the scene made it c for more information and education all right so the next one is going to be read me [Music] wasm in browser uh it's actually called raw wasm in browser demo right so and then we're gonna have a quick start uh and in a quick start you're gonna just do make and then you're gonna open your favorite browser right so you're gonna open your favorite browser and just open uh index.html on it yeah i guess that's how you're gonna do that look open dev tools console and observe the output observe the output so this is what expected in here in here we're going to be trying out the buzzy uh and to be fair i don't really want to install like yz sdk and stuff like that um but i already have rust right i already have rust so as far as i know rust has a target for wasm and it also has a separate target for wazi in wasam so we can try to use that and just explore that thing somehow i suppose that's one of the things we can do so and also i'm gonna actually put the license in here uh so it's gonna be all that this can be released under mit you can do whatever you want with it so maybe we want to actually do some sort of readme um i don't know [Music] so rt party facts of uh wisey uh wisely like sodium session of sodium session on voicing okay i don't know that's basically what it is maybe there's no readme i'm not sure if it makes any sense to put it here but yeah um so maybe i'm gonna put a link to this video in the in the readme a little bit later but for now i'm gonna do git init and let me see if i can commit all of that so we have that uh we have that and it's gonna be already set a goal right and um so maybe i'm going to quickly create a private repo i'm going to quickly create a private repo where i'm going to actually put all of that so and maybe that private gist is going to be completely obsolete now right so it's going to be a wisey stream um a wisey sodium stream artifacts and this one is gonna be private let's just create the repo let's use create the repo and i'm gonna just copy paste this entire thing and add origin add origin and i'm going to put in here all right so let's push that right into the reaper mate right into the repo is it there is it there seems to be seems to be there so this uh kind of private gist that i put in here is sort of obsolete right it is sort of obsolete but i'm just gonna i'm just gonna keep it here because as the video progresses maybe people will look into the description and look into this thing because uh at the point when this thing was created people didn't know that there will be a repo in here uh so i'm gonna put it in here like a yz surgeon stream uh repo and let's just put them in here so why is this stream so but this repo is also going to contain the custom custom simple vm maybe it should be called simple custom vm but i mean i don't speak english anyway so anyways anyways um so let's go to here somewhere zero three so let's actually try to do something like this i'm gonna create like a very simple rust program right something like println uh hello world and can i compile it down to webassembly wazi was he was uh okay so i can compile it down to like native code right did it save it i think it didn't save it so here it is so rust c main rs okay so it's taking some time i need to warm up some hard hard drive caches and whatnot and there we go we have a 3.2 megabytes of a hello world isn't that exciting i think it's got them exciting here it is here is the hello world yes we used to use so i do have just web assembly targets because i needed that target for rust browser game right again you can find it in the description maybe can you can you find it in description uh yeah yeah i mentioned it um so and to build this entire game if i remember correctly you need to install one of them wasn't 3232 target through rust up and uh so how do you use this target let's take a look at the make file uh you use it like this you see like this you set target to that and you just compile it i wonder if it's gonna work for our hello world i just wanna see how it's gonna how it's gonna fail right so this one's gonna be main.rs and let's let's put it like this okay is it gonna emax is extremely annoying okay so this is again this is the main and it should fail i'm pretty sure it should fail okay it didn't fully fail which is rather interesting so and it generated like one megabyte of this stuff and where does it print everything where does it print everything this is a good question so it's just like a fully blossom all right let's try to run it in a browser can we just run it with wasn't time uh wasn't time uh maybe i should restart my browser yeah i think i should restart my email i just called dmx browser haha very funny okay yz stream zero three and uh yeah can i do wasn't time on the main dot wasm and it did nothing it didn't print anything it exited with zero uh exit code it literally did nothing welcome to modern software development like i mean in this particular case if the executable is not correct right so which is probably the case and that's why it doesn't work okay i would expect wasn't time at least tell me something but it didn't tell anything it didn't say anything right so at least it would say something like bruh this is not like why is it compile compliable or something anyway maybe we can try to run it in a browser using our like uh bootstrapping setup um wasn't browser demo so i'm gonna just copy paste these things in here right so here are the things and in here what we're loading in fact is hello wasm right so we are importing hello wasn't maybe i need to do something like main vessel right so because here it is uh and that should be enough uh i can now try to do python 3m uh http server 69.69 and let's just run it and see if it's gonna do something right uh and it didn't even uh okay wasn't hello is not the function all right [Music] so so maybe i should not run this oh yeah i need to start it somehow i wonder if uh i can just see what's the entry point yeah let's actually try to do it like that so i'm going to print the whole wasm context and see what what kind of things do we have in there yeah so here are the experts and you have a main okay so you do have a main and can we try to run that way and that would be interesting uh so i'm gonna just do something like main i'm not gonna provide anything i'm just gonna run it uh and it didn't do anything because it couldn't output anything to do stuff it's kind of funny that i'm obviously doing incorrect things so yeah i'm obviously doing incorrect things and none of this system actually even like sort of warned me that i'm doing incorrect things neither rust compiler no browser nor wasn't time nor anything just tell me that i'm doing incorrect things anyways so i wonder um [Music] if i try to disassemble it so wabit by the way on top of having what to wasm also has wasn't to what so you can do a reverse operation you can take a wasm file and convert it into what so let's try to do that i'm going to do something like what wasm to to what right and yeah there we go this is what we got and uh we have a bunch of functions and whatnot and i wonder do we import anything this thing doesn't even import anything right so i like how the thing that is supposed to um produce side effects just compiled with any without any problems doesn't import anything doesn't complain about anything and just lives in its own world so it doesn't like i didn't see any imports like yeah there's no inputs in here uh exports maybe yeah well it exports the memory maybe it prints things into the memory maybe that's the case in here let me double check that um yeah i do run main so i do run main maybe i can take a look at the memory somewhere here's the instance exports memory maybe we can see something inside of the memory being printed uh yeah i don't really see anything so yeah it's just like yeah it's it lives in its own world i i know that i'm doing something incorrect right so i'm supposed to be using like a yz interface a quasi interface but i just want you to try that and see if any of these like runtimes will react somehow to that but i guess yeah all right so um as far as i know uh there is a list of targets supported by by rust right so if i try to google rust wasn't 32 unknown unknown will find this page uh uh webassembly support so yeah you have bosom 3232 unknown but there was like a page of um of supported targets rust supported targets uh platforms i think that's what it was i'm pretty sure uh yeah there we go yeah there we go here's the list of all of these things so you have wasam unknown uh in scripture and there is a wasm buzzy uh and this is precisely what we probably need to install in here let's actually install it the way you install new targets is through rest stop usually so let's quickly do that um okay so wasn't 32 buzzy there we go all right that was that was great um so now uh can i just run this thing it's gonna rust c target uh target wasn't wazi and rts uh error loading target specification could not find specification for that was and was in print target list uh did they oh it's a wasm ah it's a bottom 32 i'm sorry it's a 32. okay so the previous size was 1.6 megabytes and it's now it's 1.8 probably to accommodate the imports or something i don't know all right so this is a completely different executable uh compiled to a different target for youtube [Music] hi all right uh so let me see let me see i wanna do uh wasm to to what right it's going to be wasn't to what and i'm going to just take a look at the imports in here uh and now we're talking look at that look at that now we are talking so here are the imports we have wisely snapshot preview and some other stuff uh oh yeah so proc exit fd right all right i think i know what these things do proc exit probably just exits the execution of the program right it's similar to exit syscall of unix right if you take a look at the linuxcs calls right let me take a look at linuxc schools cisco table uh so just a second and to find [Music] so here's like a list of c scores and cisco is essentially interface between your program that running in operating system and the operating system the kernel right so it's kind of similar like imports for webassembly program and your browser right in the browsers everybody knows that modern browsers are basically operating systems so yeah and you have different c schools in here you have open cisco that opens a file read cisco and most importantly there is exit cisco uh that basically removes the process from you know from existence and i think that's what they are i think that's what they are proc exit basically exits is called fd right probably um the uh function the right cisco that writes to a particular output or something uh so these environment sizes get i don't know what these things do uh some directory names and i guess that's it maybe this this is not a full yz interface right as i has already said that yz is basically standardization on what to expect here right so um and since we don't really do much we depend only like six inputs in here right so probably it's not only standardizes the functions that needs to be imported it probably also standardizes the memory that has to be imported or exported the structure of the memory like maybe the first chunk of the memory has to be um you know allocated for stacks and whatnots another chunk is memory for the heap and uh so the entire environment is aware of that and so on and so forth it's probably not only imported function it's probably a little bit more complicated so yeah i feel like i need to mention that because uh there will be people who will be like so yeah yeah so so far it imports only like six of them and does it even import like a main function uh yeah there is a main in here there is a main and oh yeah so by the way a wasm time should already work yeah awesome time should already work and let's let's just run this thing with the wasn't time the flipping was in time and there we go here is the hello world here is the hello world [Music] cool that is so fast my gut the technology went so far cheers for the future for the technology [Music] so it's actually pretty cool that they can now do that i wonder if uh i can run it in the browser i'm pretty sure i won't be able to run it in the browser because the browser doesn't provide any of these like magical import functions or whatnot but that would be interesting to just try out let's actually try this out let's actually try this out uh so i'm just gonna so i'm gonna just open this thing so we're in 6969 and import was a snapshot preview one okay so this is what our program expects it expects a wise snapshot preview all right let's play a little game in here let's play a little game in here and provide that thing you know for for the for the executable why not so as far as i know there are why is it polyfills in the browser was the browser polyfill um i'm pretty sure i actually didn't spell it yeah so but it's kind of boring like i mean eh let's actually hack it so basically we try to run the wisest thing and it will fail because it cannot find this specific stuff in here and let's just provide it and see what's gonna happen i think it's gonna be way more interesting than just using polyfill you know that's a normal way of doing things uh so import module proc exit okay so uh let's do the following thing i'm going to provide a proc exit and in here we're going to provide something like uh console what the am i doing console hola brock exit uh i don't know if any arguments are provided in here so i'm gonna just assume that maybe something is provided uh maybe we can do something like args and just just like this and uh just print the args like that so basically take everything right take everything and print everything in here sounds like a plan uh right so we're gonna like trace this entire fd write okay so let's also implement fd write for this thing um so here's the fd write do we need anything else so we also need environ size get all right um environ size gets okay uh so in warren environ get environment get uh fd pre-stat get all right fd pre-stat get pre-stat dealer name [Music] um dear name okay it actually did something all right so we did fd right one i'm i swear to god this is a pointer i swear to get this as a pointer in the memory so if we go there in a memory we may actually find something there hmm and one and two probably standard inputs and standard outputs like standard error or whatnot uh but this is actually very weird fd right so it accepts four arguments in here um it accepts four arguments in here and of course it's actually completely panicked when when we try to do something else in here uh run start panic and whatnot it's it actually reached the unreachable yeah yeah so probably fd wright is supposed to return something and my best guess by the way my best guess on what it's supposed to return would be the amount of written bytes yes i'm pretty sure it's supposed to return the amount of written bytes because this is usually how right c scores work right write cisco uh accept the file descriptor the buffer that you want to write the amount of enemies that you want to write and they usually return how much was written and based on that you make an assumption that something uh wrong happened or not and because we didn't return anything uh rust environment didn't expect that and panicked okay so maybe rust programs after all are super safe you see you're running in a completely like malicious environment and this thing just crashes beautiful absolutely beautiful everyone should program in rust and abandon sea cheers for us cheers for the progress all right so what else do we have in here so yeah so we need to return like how much we written so let's actually assume that we written zero bytes right we've written zero bytes and let's see what's gonna happen and still nothing nothing pretty much happens uh all right so my guess was completely incorrect it's still panics and whatnot [Music] or maybe it should actually write things into that memory or something or maybe we should just read the documentation about this function so that would be the best thing to do was he uh why is he fd right okay um so it's funny that the first thing we see in here is the is rust i would like to see the official wizard docks at least here are the official wise docks uh okay so this is gonna be fd alright and end the type excuse me so i want you to click in here and eh am i an idiot i feel like i'm an idiot because because i'm clicking on this thing and oh here it is a file descriptor subscriber has a okay variant cases a file descriptors subscription if you write as capacitable before writing this event always triggers for regular files [Music] okay okay okay i don't understand this documentation uh file memory access pattern at visuary so web assembly interface oh you can actually use yz in here that's pretty cool um do they mention anything about fdo right import the the required fd write by the function which will okay so it takes four of the eis so we can clearly see that it takes four integers and returns a single integer uh it takes file descriptor okay i already made sense of that then iovs the amount of this ivs and and written so that's really interesting so what is iovs uh ieovs io vector list of scatter gather vectors in which to store data my god uh list of ifvec this is a file descriptor okay so file descriptor one for std out uh the pointer to the iovec array which is stored at a memory location zero okay so as you can see it's also standard is it standardizes oh well i mean it's just like it's it's us who stored it there we're printing one string stored in ioxo 1 uh a place in the mirror to store the number of bytes written o a place in memory to store the number of bytes written so it not only returns the number of bytes written but it also writes that value to the memory uh like in two places that is very interesting okay all right that's pretty cool that's pretty cool so i wonder if we managed to implement that so [Music] why this is called iovs if it's just uh pointed to to printing of one string like what that is really really strange so wasmere dukes [Music] so if we take a look at our example right so here's the file descriptor here's an array of the things that you want to print so it's iovec ah this is because iovec yeah it may probably contain the size and whatnot and some other things right right right right right and this is where you have to store this size written and stuff like that [Music] so it fails somewhere here and it's failed inside of this stuff okay i see this is very interesting so it's fd write for some reason is more complicated than just write cisco right it accepts file descriptor it accepts like ifx and stuff like that and it's just like why are you doing that hmm why are you doing that and i'm still not sure what is a uh iovex so why is it i back uh let's take a look at the rust documentation so it's a buffer plus size all right uh and they're allocated in in this particular fashion uh so i suppose it's a ah because the actual thing is probably located in a different place yeah so basically it gives you the pointer to the buffer right and the size of that buffer so you have to do like two indirect jumps you have to do two indirect jumps to actually write that so this is a pointer to iovec so inside of iovec you need to find the pointer and the size of the buffer so you have to do another jump and then knowing the size of this buffer you'll have to write that buffer into into the standard output and also not forget to write the size of written bytes into that memory as well and this is probably why it still throws unreachable even though we return like zero in here right so it probably does something weird so i kind of want to implement fd right i kind of feel like implementing with the right i think it will be kind of cool so uh let's actually refactor this entire thing this one is going to be of course fd then uh io vec uh are you vac slam and then and written right so and we can actually print those things uh like this so this one is gonna be uh fd right all right so this is going to be fda right and then the actual fd in here is going to be something like this fd uh iowa there we go uh ifx lin and this is uh n written there we go there we go uh all right so this is basically the precise information of what we have in here so um i guess we're gonna ignore fd right because well i mean we don't necessarily have to ignore it per se um so it's just like if fd is one we have to print everything with console log and if it's fd2 we have to use uh console error so that's the the main difference in here so one of the things i would like to do is to find the location of iovec and the question is what's the size of iovec uh i would presume if it's a wasm 32 the pointers and the size are 32 bits right so you size i would presume that the use size on um on wasn't 32 in in rust is actually 32 so basically we're gonna have like eight bytes in there uh for this kind of stuff all right this is actually very very very interesting i wanna try that so but i need an access to the memory right i need an access to the memory and the question is how do we even um have an access to the memory i think we should be able to export the memory because i remember that rust exports the memory all right so let me take a look at the instance uh so here is the instance and so here's the module okay so maybe experts here's the memory and here is the buffer and here is like everything so we have to do it like that maybe i should actually have fd write like this empty right and let's go fd let's put this stuff in here so it's gonna be something like this uh and uh let's move everything in there let's move everything in there and this one is gonna be just fd right fd right there we go [Music] but we need to have an access to the memory we need to have an access to the memory so that means um we have to do this slightly differently unfortunately [Music] [Music] why am i having with that okay so i remember uh the way we accessed that so i just trying to remember how how you access the memory uh i think i'm gonna steal this kind of stuff yeah so you instantiate and you have to take the memory buffer and you have to create a view on that memory buffer yes that's precisely what you have to do i don't know why i'm having trouble with that maybe because i'm tired maybe already already something like this uh all right and might as well declare this entire thing like somewhere here right so i'm gonna declare it above uh this one is going to be undefined and of course it's going to be wet and let's actually go back to the original code in here right there we go and so now our f write function should have an access to the memory view right so we instantiate everything and then we set the memory view and only then we're writing a run in main and main will would start doing all of these things okay okay okay okay okay all right so i want to take a look at the iodex all right so how do we get this stuff from ifx so if i remember correctly [Music] memory view you have to do the sub array right so we have to do the sub array right sub array starts with io vex all right and how many bytes do you want to have well i suppose it's going to be iovec iovex size but the question is what if x size is equal to i will assume that it's equal to eight yet again because i avec according to the definition in rust uh is a pair right i actually lost it actually lost it um maybe it's somewhere here no let's close everything in here uh are you back rust oh here it is i had it in history um to show declaration um yes okay it's just a pair of a pointer and the size so instead since we're in 132 the pointer is probably 30 like 32 bits and the size is also probably 32 bits so the whole size is probably uh eight by i confusing bits and bytes i'm sorry i'm already tired but i really want to implement that i think it's going to be cool if we managed to implement that all right so let's actually try to um write this entire thing so uh i'm gonna write it in here literally um right uh yep let's give it a try so this one is going to be yeah we have to go to local 6969 let's take a look at this entire stuff uh game is not defined ah okay ah because it could be pasted the code uh all right all right look at that oh my god yes i think i was right it does look like true okay it does look legit because you have 13 so this is the pointer and this is the size and it's size 13 if you take a look at the original thing in here you have 12 characters oh the hello world has 12 characters and printerland adds another one which is a new line it is trying to print hello world yes and hello world is located in this address and the question is what is the endianness what is the endings in here so essentially we need to extract address from this thing right and find it in the memory that's what we need to do we need to extract the address and find it in the memory and there we're going to have the um the thing [Music] okay so this is just that uh and i wonder if we can have a function that converts array of bytes into [Music] the number so i want to have something like this let me let me show you what i want function uh mem to uh number mem to number so we're gonna accept mem uh and go from x of mem i think that's how we're gonna go so this is gonna be a result and this is the result and in here essentially we're gonna do a result multiplied by two-handed yeah essentially something like this plus x right so we're basically appending bytes and i'm going to assume that the it's a least significant byte so what's the lsb um right uh so i wonder if it's going to work like this we can try but at some point we can easily reverse things around so it doesn't really matter that much so uh okay so ivec so this is where we start ivec pointer offset is zero ivec size upset is four right uh so this is basically what we're gonna have in here um okay so now we need to have two numbers it's gonna be ptr iovec ptr memory view sub array uh iovec starting from that plus iovic ptr it would be cool to have a special function that just does that for you right [Music] so essentially in that function you would have something like draft right you accept the pointer you accept the size and it will just return you the chunk of memory well of course you also want to accept the memory um so this one should probably call something like bytes i don't know so this is a byte uh so in here we're gonna do something like mem sub array uh pointer pointer plus size yeah essentially that's what i want to have and of course this entire thing is just going to return you something so and here what i'm doing is just do draft memory view and the pointer that i'm allocating is i of x right i of x uh plus i of that pointer offset and the size is four right so we know that it's it's that ivec size uh size of set four um and in here maybe we can print this entire values and on top of that you can right away uh convert them to so let's actually put like this bytes to number uh i want to actually kind of print that first before uh we're going to try to convert this entire stuff so it's going to be either ptr and it's going to be either ptr like like this and this one is going to be size and let's see if it's going to do something interesting uh all right i look ptr so yeah we extracted everything correctly everything was extracted correctly this is the point of this is the size and let's see uh if we can convert all of that to uh to the actual number so it's gonna be bytes to a number um bytes to number uh huh so we got and this is incorrect because you need to reverse them okay so um javascript reverse uh can i just reverse okay so maybe this is what i need to do i need to do a reverse in here and is it gonna work now is it gonna work now yo okay so here's the pointer and here's the size so the next thing i need to do i need to take this thing and de-reference it yet again so so it's going to be something like message is a draft memory view memory view uh the ref memory view starting at i vec ptr and the size of this entire is ivec size there we go we made like two uh indirect calls so this one is gonna be basically message uh and let's print the bytes of that message right so what do we have in here all right and i can see already 10 at the end with which is the new line oh boy oh boy where is my soy okay so um let me take a look at some other things so i think rust i don't quite remember but where did i have an encoder uh text yeah i forgot how to do the text encoder so remember i had a couple of things for the gif um yeah this one i think this is where i can steal some code oh i never actually committed that code interesting so maybe i have it somewhere locally uh so research wasm and uh js so yeah you have to do text encoder um let me take the message and you encode it or maybe text decoder it just depends on what you yeah you usually usually use ctf decoder all right so we're going to treat it as gtf and index.js so this one is that maybe we actually have to put it somewhere here right there we go [Music] to utf text decode and decode all right we will be able to do this kind of stuff i don't know we'll see and hello world yes yes yes yes so we managed to kind of partially implement fdrite function of wazi isn't that cool i think it's kind of cool i really like that it's actually pretty cool and the next rights actually the next rights are rust runtime panicking right because you can see the message note run rust back trace environment okay because the fda right is not implemented correctly so the rust runtime tries to panic but it tries to panic why if you write which is implemented incorrectly and that's precisely why it's panicking so and that's why it's like uh getting to the unreachable state that's actually pretty cool i liked it who needs these boring ass tutorials when you can have this kind of fun i mean this is fun like yeah this is actually fun can we just like properly implement this thing i suppose and write as they say like they say it's like the place where you need to put um the number of written things right i think we can implement that i think we can um so all right so this is what we're going to have in here um display lines so here is the message uh i think we're gonna ignore i like ivex land for now though um we could have implemented them all because it's just like a matter of iterating through all of them okay so let's do the following thing if fd is equal to one you're just printing the message you're just printing the message in like in the standard output right nothing special just message otherwise if fd is 2 you're printing it with error otherwise we can do console assert i don't remember if console assert what do they accept let me see console assert and it's gonna be false do you accept the message that is gonna be sent uh yes it does accept it okay so and it's gonna be false uh i'm gonna put something like this um known uh file descriptor uh fd all right file descriptor fd so we're gonna ignore this entire stuff and now we have n written right we have a n written what we need to do we need to dereference this thing so we need to derive memory view and written and the size i would assume again it's the variable of four bytes right it's a variable of four bytes because it's a wasn't 32 so it's going to be probably four um but there's no easy way to write things there right is there i'm pretty sure there's no easier way to write there but i mean we can just take the message size ifx size and serialize it into there i think we should be able to do that right first of all i'm gonna just try to implement that and as you can see it managed to print hello world and then it started panicking it's actually oh and it used a vector error oh and it also printed the stack trace now yeah we can see the stack trace now holy we implemented enough wazi we implemented enough wisely to actually see a stack tracing from rust holy this is so cool okay uh that's so fun what the um all right so essentially here we can just return something like uh iovec size because this is how many bytes we've written but that should be not enough like because we also need to save it into the memory uh right and as you can see it still panics um okay so how we're gonna write it there i'm gonna just iterate from zero to four plus plus i all right and essentially here what we're going to be doing we're going to be saving the ifx size uh but i probably want to actually have a copy of ifxi so i'm going to put something like ifx size here and let's put it like this all right so and memory view i wonder if i can modify this memory so the memory starts at n written plus i and in here we have in something like n um mod this right mod this so we take that byte and then we have to divide this thing by this thing so to shift it and maybe that will work right because we are putting them in lsb order right so if you try to do things like that without reversing you're going to have a msb all right most significant one msb order but if you do it like that is going to be lsb and i assume that it just expects lsb uh all right so let's see what's going to happen and it didn't it still didn't work surprisingly surprisingly it still did not work we can try to dereference this number and just do something like uh maybe oh maybe the problem here is that it it actually never printed like proc or anything uh thread oh wait a second i cannot expand any of this fd right okay so start like main start something something print and it panicked precisely in fd right right and that's everything that it said in here um begin unwind but maybe like it never tried to actually run anything else so i'm not quite sure uh what exactly is running here but i wanna do the following thing i'm gonna just uh print uh whatever we've got in the memory just to see if we got this stuff correctly uh all right so yeah it's it's 13 seems to be correct seems to be correct and we also return so maybe i just don't know what is unwritten okay so why isn't fd right let me uh let me read more about what i mean rust doesn't really tell us much about this thing so i'm not sure so why the dogs are also kind of obscure uh so [Music] i still don't quite understand what the hell is fdo right file descriptor has a capacity available and written [Music] no no man no um [Music] a place in memory to store the number of bytes written ah discard the number best written from the top of the stack so but we we do return one thing we do return is that because like i know it doesn't try to run anything else in here right does it like the only it just doesn't like fd right so that's what's going on in here like it receives something unexpected from fda right it just receives some maybe i'm working with the memory incorrectly maybe that's the thing in here uh maybe i have to like work with it directly or something so here's the memory buffer maybe i can modify the memory buffer directly uh i'm sure why i'm doing this memory view it's just like something that copy paste it uh let's actually put memory buffer [Music] and i just need to put this stuff in there and let's see if it actually worked well it should just work but it doesn't still write an unexpected identifier well yeah well i mean it technically printed hello world but i just not sure um why it doesn't like it and why it starts unwinding so i have exercise uh is it really amount of bytes written or is it amount of so here's ifx size what if i put ivy clan in there maybe that's what you expect i'm just not sure what it expects maybe we could read uh fd write implementation from rust and just see what it expects we could do that why not [Music] when you call well i mean it's just an import right it's just an import [Music] yeah and write assume init so oh right so it's a pointer the length from row error what is it from a roll error where does it where does it come from wait wait wait i think i saw it great error okay so um from row it's a from row os error but i just don't see it okay rust rust error from row error am i blind i think i'm blind i'm sorry um because it literally can't find this thing anywhere like where does it come from maybe it's a part of wazi it could be part of wazi by the way speaking of [Music] why am i so dumb [Music] um yes i'm already streaming for two hours just give me some slack ever no it treats error as error know so are you serious well that didn't help okay i don't know i don't know what it wants but we managed to get a hello world from this thing and i'm gonna call it success all right so um yeah that was cool to be fair uh apart from why is he being just a standardization of what your webassembly module can import there's not that much interesting about it uh except like maybe some languages or environments that implement it on top of it but by itself it's just like it's kind of a boring thing but uh trying to implement fd right c school of buzzy was kind of fun we like semi successfully managed to do that um [Music] oh yeah by the way wait wait wait wait wait wait wait wait wait wait wait memory memory view right so we're going to put a zero in there and memory view holy we successfully did that i'm sorry if it was too loud yes i successfully ran was a program without was a polyfill i just implemented a deal right that was hard but i managed to do that holy it's so cool but you had to like manipulate memory directly and stuff like that okay so this stream is a complete success we implemented we polly field we polyfilled one function from uh from wazi okay so i'm gonna end the stream here all right so uh let's actually yeah without any errors so we managed to do that and no polyfill required um what's funny is that the the program doesn't even call any of these functions if everything is successful right if everything is successful it doesn't even call them but it still requires them because i guess maybe it's a minimum thing uh to have there well we can just provide them in here right but yeah so it doesn't even call them it doesn't even call proc exit that's what's interesting um i guess i guess i guess i guess i guess anyway uh let me try to do a committee committee i think i think this is a very interesting thing to have uh zero three uh and then here we have what uh read me md it's gonna be i'm gonna actually commute it after the stream whatever so alright so uh you can find the link to this repo in the description so i already put it in the description uh the reaper is private right now but after the stream is going to be unprivate so to avoid any spoilers today was a pretty cool stream not gonna lie it's very it was very educational for me and it was very exciting because i managed to sort of hack wazi without even reading documentation so well i mean i read some of the pieces of the documentation but uh yeah so that was very cool and that was very exciting but unfortunately boys and girls it is time for me to go even though i was programming in rust it is time for me to go ah thanks everyone who's watching right now i really appreciate it have a good one initial tomorrow tomorrow we're going to be doing a game development in c plus with opengl it's gonna be fun trust me and yeah so check out the description all the links um yeah and i gotta go love you

Channel: Tsoding Daily

Views: 1,336

Keywords: programming, coding, problem solving, algorithms, data structures, pure c, rust, rustlang, webassembly, wasm, wasi, native programming, web development, webdev, javascript, async, await, raw webassembly, posix, linux, emacs, wasmtime

Id: 2qV-1JhxWeE

Length: 129min 33sec (7773 seconds)

Published: Fri May 21 2021