 um gone online and thanks to engineers for hosting us as well as for like setting up everything so we didn't have to think about anything so that was really awesome and thanks to Aaron for agreeing to do this talk uh his base and I mean his base in Sydney right now and it's really late for him so uh we will have our usual open mic at the end of the session so today is like um there's no like really fixed time like we usually end by nine so today is pretty much just like everyone giving his talk and after that please feel free to ask all your questions this is a great opportunity um I mean to also like type things out so that's really clear for everyone um and also like comfortable for you if you like it like uh do take uh advantage of this uh virtual talk yeah um don't know about any other things uh please stay respectful and uh reminder from engineers are actually that this is being live streamed on their channel so yeah don't get any trouble uh yeah so without further ado I guess uh all of us should turn off our videos or if you want to keep it on that's fine too okay no issues but just nuke our mic yeah so hand it over to Aaron if yeah if you want to ask questions feel free to jump in and ask questions at any point in time or type them out in the chat either zoom or youtube I am monitoring those on uh second computer uh but I've also turned on live capturing on the slides so if I'm speaking too fast or anything like that hopefully you can catch up with the live captioning otherwise just shout out and say can you slow down or could you cover something again uh if it wasn't coming across clearly enough uh because I'm I've got enough time that we can spend tonight and I will promise I won't fall asleep while presenting well at least I'm going to try not fall asleep while presenting it's been a long day but we we'll get through this um but thank you for having me uh my name's Aaron uh I work for Microsoft I'm part of the developer relations team uh the cloud developer advocate at Microsoft uh you can find me online at uh on twitter at slice I blog at Aaron dash pal dot com and uh my github is Aaron pal so it's mostly my name except for twitter if you want to find me if you want to send me a dm ask questions or anything like that I've got some links also at the end uh of some content that I've written around web assembly specifically and kind of to follow up uh the talk that I want to cover off today but we're here to talk about web assembly so let's dive straight in this is web assembly uh well this most specifically is the web assembly text language and this is what you write when you're writing web assembly and let me just break down precisely what's happening in this code first off we're creating a module and inside of that module we're going to import a function from an object called console and the property of that the way I'm packing is log I'm just aliasing that locally into the WAF file as a variable named dollar's log so that's the the dollars after the declaration about halfway through that line and then this function will take two parameters they're both going to be 32s or i32 types and that's going to be the two arguments that the function that's provided to me from our host for web assembly uh that that's what I'll expect the next thing I'm going to be importing into this web assembly module is uh I'm going to import some memory the memory is going to be one kilobyte uh so it's going to be one memory page which is 64 kilobits and that's the minimum amount of memory that I can import for the web assembly module next I'm going to put some data into memory um I'm pushing that onto the stack at position zero so that's what int dot const zero is so stack position zero in our memory pushing on some data and it's going to be a string containing the word high and then finally this module is going to export a function of its own that function is going to be called right high and it's going to when that function is executed by the web assembly host it will pop two variables onto the stack uh they're both in 32s the first one is going to be zero the second one is going to be two and they will represent the memory starting position and the memory ending position that we want to be able to read out of and then finally we're going to call that function that was passed in from our web assembly host called dollar's log and by pushing those two things into the stack they are then going to be passed as the arguments to the function that's being called everyone's still with me hopefully hopefully everyone's still with me now under the javascript side of things because javascript is the most common host that we've got for web assembly someone did ask before about uh wazzy and that's another way that we can host web assembly and i'll talk a bit more about that at the end or if i don't remind me to talk a bit about that at the end but in javascript we need to create some things to make sure that we can execute this i've realized that the live captioning is sitting a bit over the top of the slides fortunately i don't think i can actually move the position of that but i'll explain what's kind of behind okay so the first thing that we're doing oops let me go back is we're going to create our memory in our javascript host for our web assembly application this is using the web assembly memory method or object and say the initial size of this is one page in size so it's 64 kilobits and just assigning that to a local variable called mem i'm then creating a function called log which will take two arguments an offset and a length so this is and this is the function that we're actually going to be passing across to web assembly when we're invoking it this function will receive those and i expect that they're going to be numbers passed in but because javascript is an inherently untyped language we don't know that their numbers we just assume they're going to be numbers but inside of that we're then going to use the memory that was provided read the buffer of that memory and then turn that into a unsigned 8-bit integer array and that will start at the offset of what was passed in and the length and we'll grab the number of bytes out of that to the length that we are specifying and that was getting passed in this gives me a byte array that i passed to a text decoder oh looks like my live capture you might have crashed well that was a fun experiment nope we're back so the we're using a text decoder a beauty of eight to decode those bytes into a string and then we call console.log which writes it out to the the console that's available for this javascript post finally we created an import object that we have a property called console which has a property called log and we're passing in a some javascript references which is going to be the memory that we created at the top of this file and then the very final thing which unfortunately you can't quite see from the caption that sits in front but behind that actually i think i can hide that briefly hey i can i can briefly hide that so what we can see there is that we're using web assembly dot instantiate streaming so this is an asynchronous function that expects a stream generally so a stream is returned from a promise and generally something like a fetch is done to to download the web assembly binary from some remote source in this case it's just running locally side by side with this javascript file so you fetch download that we pass in the import object we created before and then once we have instantiated our web assembly virtual machine we can then use the web assembly instance grab the exports of that and invoke the right high function let's just get the live captioning back on okay so if you're like me and you've just seen like five minutes of explanation of that you're probably thinking that this is utterly confusing right i've just shown something that doesn't look like pretty much most programming languages i've ever worked with at least and then a whole bunch of kind of complex javascript to create memory and functions that you know dealing with buffers and i don't think before i'd worked with web assembly i'd ever used text like the the text decoder or the like an unsigned array or anything like that i'd just those things were just not what i would use in javascript but this is the future as we're being told this is what web assembly like web assembly is gonna be a useful tool when we go ahead and build web applications okay well but maybe let's actually take a step back because i don't write into you know how web assembly works and like and show it off some code initially which i can appreciate is probably a little bit complex if you haven't come at web assembly previously so understanding precisely what the point of all that code is why it exists and like and even what's the point of web assembly let's let's step back and rewind and and look a bit at some of that stuff so oh so like what is web assembly now in around about 2013 mozilla put forward this recommendation for a specification in which they called asmjs which was short for assembly js it was a strict subset of the javascript runtime that was designed as a compilation target from other programming languages predominantly c and c plus plus you weren't writing asmjs yourself you were compiling to asmjs and because of the way that they were the the restrictions that were put in asmjs and the way you were expected to compile to it browsers could do a lot of pre-optimizations around the language itself it didn't have the loose typing to the same degree that javascript has because it was predominantly working with arrays and buffers and predefined known types we weren't using objects and glorified hash bags which is predominantly what we do in javascript and this allowed people to build really high performance applications particularly around graphic heavy and eccentric applications with supports of things like the unity engine and to um sorry not the the unreal engine to asmjs and it was really pretty playable like it was it wasn't as fast as running it like on bare metal on a on a laptop or a desktop or by a console system but it was still pretty decent particularly compared to what else you could do in the browser at that point in time but web assembly so web assembly essentially evolved out of asmjs they realized that there was a need for this kind of low level programming with inside of the browser so and if it was created to define a specification for that and that specification would become web assembly and the goal was to create a stack-based virtual machine that would exist with inside of a javascript runtime predominantly runs in obviously most javascript runtimes running in the browser but you've also got no js no js so has support for running web assembly and then now there's look at things like wazzy as ways to run web assembly outside of javascript runtimes necessarily but because it's now a stack-based virtual machine or a vm in and of itself it is able to get a lot more consistency across the implementations within browsers no longer do we have this they're differentiating you know what like what is the the underlying hardware that's available in a mobile device versus a laptop versus a tablet versus you know by a television or anything like that the the vm host just abstracts all of that away for us and because it's now running as a compiled binary rather than just plain old javascript or a strict subset of javascript we're able to optimize for it even better and get and remove things like jitting and stuff like that that would you you would traditionally have in a javascript application and because we now own the virtual machine where our web assembly applications run we can do things like control the amount of memory that's available for that so where you might have had applications that could have memory leaks or exploits against the amount of memory that they're using and crash machines because you just have runaway memory consumption the web assembly binary so the web assembly vm is constrained and we can we avoid some of those potential attack vectors but they also made a decision that web assembly would only support a really strict set of data types in fact it really only supports numbers there's some caveats to that but it's predominantly numbers like we don't have objects the same way as we would think of them in javascript we don't have strings the same way as we think of it in javascript we don't have functions quite the same as we think of it in javascript this is where the memory becomes important if we want to use something more complex than a number we end up having to rely on the memory and pushing things into memory to deal with that now web assembly isn't designed as the thing that you're predominantly going to write that web assembly text language that is the language of web assembly but you're not necessarily going to write that instead you're going to write some sort of a high-level language and compile down similar with asmjs where we were using the most common tool for that was llvm to do a compilation down to asmjs we're going to use some sort of high-level tool to compile languages down because let's be honest the the language that I showed at the start it's pretty foreign to most of us and probably not the ideal thing that we want to try and write all the time that that would get kind of cumbersome but if you are a list programmer you probably are very familiar with having to put parentheses on the end of things so maybe it is actually something that you would quite like to write when when I started playing with web assembly now I had this notion that well has anyone ever sat down and gone you know what my website needs you know what I need in the browser I need more c++ no I don't think that's ever been like a major demand of the applications that I've ever worked on that we're like yes c++ if only I could be running c++ in the browser they would they would solve all these problems so what's the point of web assembly then and if we're building applications as JavaScript developers what is the point of web assembly now one thing that I want to make clear is that web assembly isn't intended as a replacement for JavaScript there's plenty of things that you can do with web assembly that much better to do in web assembly than we would do in plain old JavaScript but there's a lot of thing that JavaScript is actually really good at things like working with the DOM you actually don't have the concept of the DOM available in web assembly at least not in its current form I believe that there's stuff in the spec that they're working on for future iterations that will expose the DOM in a more rich format but at this point in time the web assembly that's available inside of pretty much all the browsers doesn't have access to the DOM you have to do a bunch of stuff to make that accessible but some languages well they do actually seem to be going down the route of trying to make it a full blend replacement things like go lang or blazer in .net they're trying to be a complete replacement for running any form of JavaScript and I'm not entirely convinced that that is going to be the best way long term for how we can build applications using web assembly because like I said there's things that JavaScript is really good at and I think we need to remember that particularly as JavaScript developers that we don't want to just completely replace atool just for the sake of replacing it now there's a bunch of new terminology that web assembly introduces into the mix that I'll just touch on so that we all understand precisely what it is as we go into some demos shortly the first is the module the module was that thing that was the very top of the code base that we looked at right back at the start of this talk and a module is essentially a web assembly binary it's the thing that we're creating it's the thing that we're running it's the output from some compiler it's predominantly it's a binary file and inside of that we we have things that live so the module is the thing that you're going to use to create your virtual machine and you'll end up with a running instance of a module now an instance is your VM now you can have multiple web assembly VMs running at the same time you can create multiple web assembly VMs from the same module as well so if you've got a bit of code that you wanted to you know start up multiple times you could do that I'm not quite sure if that would be a good idea but you definitely can run the same module multiple types more importantly though you because you can run multiple web assembly virtual machines multiple instances you can actually do a bunch of things to make they make them communicate with each other as well so you could write some of some stuff in like go lang some in rust and they could talk to each other using the web assembly web assembly host and next we have a memory the memory so the memory is something that that is like a shared bridge between our web assembly host and our web assembly instance now if our host is JavaScript we create this as an array buffer and we pass that array buffer into the instance when it started that was part of that import object that I created but I because it's an array buffer that is essentially owned by the host by JavaScript in this case I can pass that into multiple instances so that's where if we want to be able to share values across multiple instances we could we could use the memory buffer there now this is useful for storing values so strings complex objects we can we can put all of those because we can represent represent them as as as uh binaries that we can put into this array buffer sorry bytes that we put into this array buffer so we um so that's how we can put more complex data structures than just ints and floats and stuff like that but then we also have tables tables are kind of like memory in a web assembly but they're designed to pass in function references rather than value references so if I've got a function inside of my JavaScript host that I want to make available to my web assembly host I sorry my web assembly instance I pass that I create a table I put a reference to that function in the table and then I pass that table into my instance when I start it and then I can access that inside of my web assembly application I can then use tables in multiple instances so I can share functions my web assembly application can push functions into tables and that's how our host can access them that's how we can also have functions that get called across from different web assembly instances so both memory and table can be adjusted in size on the fly they have to be you have to have a minimum size problem I forget what it is for table off the top of my head that memory is 64 kilobits so I bet you can grow that out to I think basically the limit of memory available to the host browsers will have a constraint on the amount of memory that they can allocate to web assembly but that's probably going to vary browser engine about browser engine and across devices so like a mobile device will have a lot less but that's not to say that you that you should try and put like two gig into a web assembly instance that's probably more memory than it really is ever going to need if it isn't you're building a pretty crazy web application okay do I understand a bit about what web assembly is and some of the terminology the web assembly has behind it but why would you want to be using web assembly in the applications that we're building well one of the really cool things that I think web assembly is good for is sandboxing and I touched on this a bit before the idea of being able to create a memory controlled security sandboxed environment that we can execute some code in we know that with a JavaScript application whenever we run third-party JavaScript on our page there is the potential that that third-party JavaScript could do something nefarious to the rest of our code base and we don't want that to happen but when something is running inside of a web assembly sandbox that's a lot harder to achieve because the code isn't being interpreted it's pre-compiled it's not there's no jit running anymore uh to do anything so we like we have a lot more of a controlled security sandbox there this could be really good if we're doing cryptography in our application we don't necessarily want our cryptographic algorithms exposed or we don't want them potentially available for corruption so we could run them inside of a sandbox and that means that we have a lot more confidence that they're running successfully maybe we want to share some code between our client and server uh let's say that you're doing something like image manipulation and you found a great image image library that you want to use but it's written in go-lan. Well you can then find a port of that to JavaScript or you can find a one with comparable features that runs in JavaScript and you can run that in the browser but then you still like it's still not the same you can't guarantee that what someone is seeing in the UI is going to be the same as what's getting output by the back end but what if we could actually just use that same code we could use that um web assembly sorry that that go-lan um module both client and server so that we can see real-time give that feedback to the user of what's um they're going to have happen to an image that they've uploaded but then actually do the the proper processing down the track or maybe we want to do you know some complex mathematical operations work with numbers in some way shape or form we know that JavaScript has some issues with the way that it can do with numbers based off of the way that it implements floating points and this can mean that we can have some odd-edge cases particularly if we're doing things that are very as like precision sensitive or we're doing things that require a lot of complex computations around mathematics so maybe we put that in we write that in a language that's better designed for mathematical operations something like you know a data science language like python or f sharp we can do that we could compile that down and then just call it as though it's another library with inside of our application and this is also where kind of like things like video games are also looking at WebAssembly as a core technology because they do a lot of stuff with numbers with processing like vectors and stuff like that and they can do that with more confidence in languages other than JavaScript all right so let's like we want to build something with WebAssembly now but what does that look like as a JavaScript developer how do we go about building an application that leverages WebAssembly well first off we need to look at a whole bunch of language options that we've got and we could do c or c++ we could use rust or we could do .net in like c sharp or f sharp we could use the word assembly text language like you could actually write that if you wanted because it compiles down to the binary format it's probably going to be a lot more complex because it doesn't have high-level constructs like strings really or complex objects so it can be painful we could use golang we could use assembly script assembly script that I find is quite interesting because it's like a it's a variation of type script so you are actually kind of writing JavaScript to a degree but then compiling it to WebAssembly to run with inside of JavaScript and I'm like oh my head hurts why are people doing that but these are a bunch of different options I've played around with c sharp f sharp and golang as ways of building WebAssembly. Next off we work out well we got to compile our WebAssembly into a WebAssembly binary somehow well how do we do compilations in JavaScript at the moment we use webpack or parcel or a myriad of other tools but webpack is definitely doing a good job of winning in the in the wars of building out our our building compilations steps inside of JavaScript so I tend to go with webpack and then you pick your front-end framework of choice I go with React because it's the one I like to work with but if you could use Vue or Angular or have them forbid vanilla j s I actually work with the DOM directly that sounds like a crazy notion all right so that's enough slides let's have a look at how we can bring all this together and I have a sample application so I've written a little bit of of golang it's a very exciting application that I've got here if you're not a golang developer don't worry I'm not here to convince you to write golang or anything like that but what I've done is I've created an application that will be it pulls down a markdown file from a github repo that contains a list of conferences that are happening in Australia I then have a function I then have a golang module that I've written called markdown tools which processes that file extracts out the conferences from the other stuff that's there into a data structure that I use with inside of my application and then this is just gonna this is a console applications this will just dump it out to terminal so let's have a look at that pop up a terminal here let's start off by doing go go build there we go so it's just gonna compile out my application and let's just do slash app to run this application and it's very exciting if we scroll up you'll see that there's a whole bunch of conferences it's just jumped dumped it out as json I could then pipe this through like I don't have it I used to have it in my my back stack let's try this dot slash app I used to have it in my back stack to be able to do like jq and I can't remember I can't remember the syntax of jq off the top of my head but I could find something in there because it's it's now just a json payload but this might be great for certain use cases it's a server application that I'm running or I'm interacting with the terminal but you know what I actually want to run this in the browser because as cool as terminals are the readability of this is not great as you can see I can't remember the syntax of jq to work out how to to query it to find stuff so let's turn that into a web application and here's one I've created earlier it's a react application actually I'm going to just do an npm start on this because it'll take it oh yep could you zoom zoom in a bit and make the font a bit larger for us thank you yes oh sorry I've I've got it on my large monitor and I forget that my resolution is probably quite large relative to watch people are running at home and watching on the live live share yeah all right that was the one thing I forgot to check beforehand cool did that save save settings oh is that uh is that better is that too big now okay good for me I'm touching you cool we'll leave it at 30 point that's um that'll do but I'll I'll scroll around the code so we can understand it okay cool my application is starting up so open up a browser what's gonna find is I've actually got the slides still running in the background and the live captioning is still running on the slides and I can see that on my second monitor I can see the live captioning but no one else can whoops did I start a browser I'm sure I just started a browser yeah maybe not yeah there it is eventually we will get the internet's up oh there we go oh come on there's nothing like live demos okay port 9000 um because that'll kick off the the webpack can compile on the background we'll see that running momentarily okay now uh so um the the application will show uh the markdown as um sorry the the data that's come back uh we'll come back just as raw json from my going application and then I'm going to turn that into a react application and put that into like some tabulated data so that I can do sorting and filtering and all that kind of stuff will then happen in client side uh we have a app.js sorry app.tsx that's right I wrote this in type script just because I wanted to see um how far I could push my uh by integration between the two things of JavaScript and web assembly I'm just gonna scroll up a moment um I do enjoy how so my computer has started to become let's just check something got to um I've had to swap on to battery so I could charge my other laptop but I think it's running there we go it was not running at top performance but we'll put that back up and then hopefully things will start running a little bit faster or or not uh now we're here we are wrong window I have so many windows open here we go okay excellent so it's a it's a react application um I've got some things in here like react router and the kind of usual stuff that you would have for a react single page application because I'm using type script I've got some type definitions around to like to find the way state works and things like that but the um the interesting stuff happens then in this module called fetch events we go down and have a look at how that that expose so that exposed me a function called download here we scroll down to component did mount um I actually wrote this before hooks was out if I was to go back and update this code I would totally be doing hooks everywhere because hooks are the awesome and it's the only way to write react these things but I have this download your function I pass in the label for the year I pass in the url for the markdown file that's relative for that year uh and then um that is going to return me an async an async function or returns me a promise when that's successful I will then um set states and update um the uh add those years to uh to state and then it does a you know some stuff to make sure that it displays let's go down to our render methods uh which then has a menu links etc etc but the important one is the idea the home route uh which then takes in a list of all those years and stuff like that the the components themselves are not particularly interesting what I want to focus on is this fetch events because that's where stuff starts getting probably interesting I will just have a look at the way the download year works first up um so it's uh so it's an async function uh so we use fetch so to download that that url we get the um the raw text out of that url sorry out of that response so that's the the markdown contents and then I am uh passing that across to this devi devids dot parse markdown now that function we'll see where that comes from in just a moment and then uh that gives me something that is comes back as a string I then turn that into json which I then do some iterations of to make into a literature that I want to use in my application but this dev events dot parse markdown where does that come from that comes from this very first line here at the top import dev events from dev events dot go that doesn't sound like a javascript file or a typescript file dev events dot go is unsurprisingly a go lang file here we're using the markdown tools um library that I've created which is the same one that our console application used I have a go lang module that I've written that does some interrupt with uh webpack and a webpack build step that I've got I'll show you that in a moment and what it does is exposes a function called parse markdown this function um it will receive a string uh so we unpack that from the arguments that get passed in it then uses my markdown tools to parse the markdown into the um the year data structure then converts that into json and then returns that as a string I use the go bridge which is the um the thing that I've written in um for my webpack interrupt to register a callback called parse markdown um so so register a function parse markdown and give it the reference uh parse markdown to that function on line 11 and what that does is it basically sets up so that webpack um can be used as a thing to orchestrate the compilation of go lang so if we go to our webpack config scroll down a little bit we can see that we are now supporting go as an extension to resolve and then if we find go we use a loader called go lang was an async loader which is just available on npm and that's kind of kind of how things all come together is that transparently this all then gets exposed as um as a bunch of javascript um or or type script in my case uh that I can work with um I've done uh some uh some stuff to uh to define the types because there's no way I can actually determine the types um without having to have written them myself but still uh I this all kind of works and if we come back to our browser tada this is the application running uh I'll bring up the developer tools oops undock those this morning so let me just redock those over here that uh let's just reload see all these htp requests are being made um and then if we have a look at the sources pop that open uh we'll see that there is web assembly and that's the stuff that's existed in here and um we actually get a fun like a bunch of fun stuff like the the go bridge appears in here and stuff like that if we come into I think it's the application tab now uh we can find the web assembly uh or maybe it's I'm sure they've lit it up inside of I'm sure it was lit up in here with inside of the edge dev tools but maybe not okay um yeah I forgot where it is um if it's available um but um this is like I said this is now a react application so if I came across to the react dev tools which component component sorry um I can see them there is a table it's got some stuff in it um I've got a menu up here I can like jump into the 2020 table I can say what events are happening with JavaScript in them cool I got there's two events happening in Australia with JavaScript um I only care about the ones in New South Wales uh and this is all now happening clients because I I've got that data but the the thing that I needed to do to get that data to process it to turn it into a JSON payload that I can consume in my react application was maybe too complex um to write in JavaScript or I had it written already in another language but I've now just compiled that down and we run it here so that's how we can combine it all together and hopefully that'll make a little bit of sense um so just to kind of wrap up um this part of the talk uh sorry excuse me um WebAssembly like it's here it's in all evergreen browsers so edge on the Chromium runtime um Chrome obviously uh Safari um Firefox and anything that runs uh as a as a Chromium base so um Opera, Rave, stuff like that um they all support WebAssembly on mobile it is there can be a little bit more hidden miss on mobile primarily because of the amount of memory required um but I know that Android does support it in Chrome um I'm pretty confident that it works in iOS but I don't have an iOS device myself so I haven't um any ever done any testing but I have run that application that I just had there uh on my Android device and it it works um it's just it's a little bit slower because it requires more memory so WebAssembly like I said I think the the primary use case for it in listen to the sort of things that I foresee myself building is the sandbox part of my application whether that's for security requirements for um IP sensitivity whatever it might be I can sandbox parts of my application into WebAssembly and make them give me a level of confidence in the way that they're running on the security model around the idea of being able to reuse client and server code I think there's some value in that particularly if you're doing thing like if your server is in my language like going or .net um I have seen that you can do things like see python so compiling python to see the WebAssembly and I believe there is a javascript approach to doing WebAssembly um I haven't looked into that too much because I haven't been in the javaspace for quite a number of years but I do remember someone talking about it uh with inside of my chain um but yeah that's definitely a good other use case for it and finally some languages are better for certain type of workloads than others um I think it's important to be a multi-language program of these days just being like just focusing on one language means that you can miss out on the value that other languages can bring in whether it's looking at um my object or interior languages next to functional programming languages and using a mix of those two or whether it's using um high performance languages like Rust or C++ and C for certain workloads and .net or Java for others you know kind of combine them together where it's possible and with WebAssembly we can actually take advantage of that and we're no longer just constrained to running javascript to run in the browser we can use other languages and compile them down to run with inside of the browser uh if you want to learn a bit more um the this first URL aka.ms slash learn wasm that is uh a short link to a six part series that I did on learning WebAssembly it kind of goes through the process of I didn't know anything about WebAssembly to start with to building an application and uh how to interact sorry how to integrate it into a build pipeline with webpack and all that kind of stuff so it kind of covers off by each step of the journey that you might go through and then WebAssembly.org is the homepage for WebAssembly it's got a lot of good examples uh talks about some of the like the underlying concepts of WebAssembly how the language works how the runtimes work and stuff like that um I learned a lot by diving into that to to understand the core building blocks of what WebAssembly is useful for and how you can use it but that's the core stuff that I wanted to cover off today uh in my talk um thanks for having me uh presented your user group tonight um I'm sad that I wasn't able to come over and do it in person but I'm glad that we're able to make it a virtual event at the very least um and to to just go back to some of the like the questions that uh were asked throughout uh throughout the my kind of freeform discussion at the start so uh there's a question asked about the about wazzy um which is an approach to running WebAssembly in a more generic host kind of it's it's something that I'm aware of because I have members of my team that are looking into wazzy and to use cases of wazzy with inside of uh Microsoft um so I but I haven't actually dived too much into it myself what I do believe it can be it could be compared to is almost like think of it almost like containerization darker and stuff like that this idea that you can build an application and then run it on a host where everything is really abstracted away I think the hardware is abstracted away the um the operating system is abstracted away so if you're deploying something into Windows or Mac or Linux it doesn't matter because it's the wazzy host that takes care of the interfacing to the OS and how you need to do those comms and what that means is that it's a lot easier to create portable applications and um I know that there's some experiments around trying to run wazzy with inside of like um Kubernetes so that you know because it's just like that's just a host um at the end of the day and it just tends to predominantly host docket component docket containers uh but that's where it can be useful for um and but by being able to be doing things that are um like really cross-platform using web assembly as the binary um method to to ship means that we can uh we can free ourselves from the way that we're doing cross-platform runtimes at the moment so that's um that's what I understand about wazzy and sort of the role that it might play in the future I think it's probably too early to save you know when that we're going to see that in production or anything like that um but it's something I would keep your eyes out for and think of what it might be useful useful for um there was another question I saw around uh databases and file access and stuff like that so first off it's going to really depend on where you're hosting your web assembly instances if you're hosting them inside of Node.js then uh you can do it like a database connection through like the node runtime like through a SQL server or like Postgres or Mongo or whatever it might be but yeah and there's no reason why you couldn't pull in like the you know the the Golang um Postgres database database connector and then write all of your SQL queries uh within sort of Golang and then just expose the results back out of a web assembly binary um if you're running that in a browser it does become a bit more tricky because you've got to think about how do you do the connection through from the browser to your SQL server um load you to your database server and then that requires your database server to be publicly available um over the internet or by on your internet if this is just for an internal thing but then then you started to think about you know security ramifications and stuff like that um you know are you properly securing the credentials that he used um to connect to it because they they they are running the browser and you are essentially shipping a binary down that someone could decompile and extract information out of so do you really want to be doing a SQL connection directly from um from the browser to a SQL database or a database somewhere possibly not now file system is actually quite an interesting one and I'm going to show off another demo um because this was something that I didn't kind of initially realize until I played around a bit more with it so from a file system standpoint but it's actually quite quite unusual the way web assembly works so this is this is my website um I did some work on it over Christmas um to add um a search component to it because my website is actually deployed as a static website um so it's just literally just says this um HTML and JavaScript and as I hopefully this doesn't fail but it is working um so I now have a search on there and the search is actually implemented in web assembly uh specifically I am using Blazor and compiling C sharp and F sharp to run now this application so this is running a .NET runtime and uh then the way the application works or the way my search index works is that I'm using a search library called lucine.net um which is uh just a it's a search index of the the .NET applications um and it goes out it downloads a pre-built index that I have of my website puts it on the file system that the .NET runtime has access to and then I can do things like let's do uh web assembly do a search for web assembly so here are all the articles that I've written on web assembly uh but let's do minus uh is minus F sharp so and this is all like happening on like on a search index that's running on what it believes to be a file system but it's not actually a file system and this is because like I said this is running on it um as a application so it's running on the .NET runtime which has the concept of a file system um provided to it via um mono and I think it's llvm I think under the hood they actually use llvm as the as a translation as you as far as the application is aware it's not a unix system um I I learned this out because I was using like system.io and exploring around on that and if you uh do like uh os name um it would return unix I was like that's very unusual I did not expect that to be used. Now what about other platforms um so going it will have the concept of a file system because going itself um has a concept of a file system how they represent that I'm not quite sure um similar with Rust and um and C++ and stuff like that I don't think they will have the concept of the file system quite the same way now what will become interesting in the future is the way that other the way that other browser APIs get exposed through the web assembly um there's an API that's being um designed at the moment to provide a file system with uh with inside of the browser now this file system is designed to be used with things like progressive web applications so you could imagine that you're building like a like a notebook application as a as a PWA progressive web application and you want to save those notes to disk so that you can then hydrate them uh in future in an offline scenario so for that you're going to need access to a file system and the browser itself doesn't have access to the file system right at anywhere other than to local storage or the next DB now if it has access to a file system it can write them to their like in a controlled location or a sandbox location or anything like that but then if that API exists in the browser there's no reason why you can't expose that through the web assembly and then web assembly has the concept of a file system that it can talk to as well so the different hosts the different um compilation languages that we use and whether it is C++ or C sharp or C Python or um Golang or Rust or whatever they will have the concept of a file system as a language how they translate that to working with this other web assembly is going to depend on the way that that language implements its runtime um for Rust and C++ and C they don't have a runtime per se so they won't have that you know that thing they're existing um .NET has the runtime so you are actually studying a .NET you're actually studying a .NET console application essentially and that gives you a file system that you can work with um so I've just noticed a couple other questions have come in on the chat so let me just have a quick scroll through those or um feel free to just unmute yourself and and ask the questions as well so there's a question about um so popular use cases for web assembly at the moment um and what would be some killer use cases so a lot of web assembly is around like gaming gaming is like a really popular use case for web uh web assembly at the moment because uh you can take an application that was written for you know for console or for desktop um and and compile those down and run them in the browser at almost comparable performance that you would get for just running them natively on the host so that's kind of kind of cool because it means that you don't have to have you know these install processes and stuff like that to get um an application there um another another use case um I see for um for Blazor in particular is around replacing intranet applications so I'd say that you've been building an intranet application that's um it's traditionally like a desktop application or something like that but you want to be able to now like not just tie yourself to like a particular revision of Windows and it can only have around Windows 7 service pack 3 well if you ship it as a browser application um that's going to make it a whole lot easier but we don't necessarily want to turn everyone into JavaScript developers and that's where someone something like Blazor fits in so um being able to to take those skills that you've got um as a developer and build um build web applications even if you don't necessarily know um a huge amount about building web applications it doesn't mean that I think every application needs to be written in WebAssembly I said in the um going through the slides I disagree with that notion JavaScript has a lot of value and you know to build a good web application you should understand the role that um WebAssembly sorry the role that JavaScript plays in that and you should also understand the role that WebAssembly could play in that. So there's another question around what do I think about other languages like Rust um as targets for WebAssembly now uh languages like Rust and C++ and C are possibly better optimized for using use cases in WebAssembly than the likes of .NET or Golang um and stuff like that and the primary reason is because they are sort of like memory uncontrolled um so you control the memory in those applications um like in like C++ in particular you have to create pointers and stuff like that because WebAssembly you have to do your own memory managers um when using say .NET we get very used to the fact that it just does garbage it does garbage collection on our behalf so but there's no concept of garbage collection inside of WebAssembly um there's proposals in the spec to add that but right now that doesn't exist so they have to do a bunch of stuff that WebAssembly doesn't technically support inside of WebAssembly so they like there's a whole bunch of overhead and this is why so this search application that I've got showing at the moment I think it's like five or six meg um and I have a few dozen DLLs that you have to download to make this application work and it's not exactly complex like it's not doing a lot of stuff right now um the Golang application uh I think the compilation of that is like two and a half meg for just the Golang application to run and all it's doing is passing markdown and that's because these languages they need to bring a whole bunch of stuff with them they have to bring their runtime and things like that um Rust on the other hand doesn't um like a a minimalistic Rust application to probably do similar to what I've done with the the WebAssembly Golang application you're probably talking about kilobytes in file size not megabytes which um my Golang version is and that's because it can just naturally compile out what's more uh now that's not to say that you can't do better things uh more intelligent things with uh with Golang and .NET I know the .NET team is doing a lot of work to try and reduce size of Blazor applications um and some of that is around so uh trying to work out what co-pars is be executed and remove the ones that don't get executed so that .NET native sort of things Golang there is an alternative compiler to the primary go compiler called Pani go which uh produces a much smaller binary that can run in WebAssembly um then we're talking hundreds of kilobytes instead of megabytes worth of size per sample applications but again you are still a little bit limited uh another question um in the chat is can WebAssembly draw for browser the short answer is no the slightly longer answer is yes you can provided you have something that will do the interrupt to the canvas for you um uh I think I actually have a demo of doing this uh actually I found that in search WebAssembly um let me have a quick here we go um now let me just check do I still have this application running uh bear with me one moment please while I scroll down here it is running um so this is a Blazor application that draws to canvas uh we'll load up in a moment you can see it this is where WebAssembly can take a little bit long and let's draw we we can draw some pretty colors whoop right so that's actually drawing on canvas um I'll pop the uh the link to this in the chat but but basically um there's a whole bunch of interrupt that is done in JavaScript to expose the canvas um up to WebAssembly or to .NET in this case and then um then kind of marshalling back and forth so there's a bunch of JavaScript that had to be written for this to work um but the actual processing of where the mouse pointer is the uh the lines that I'm drawing all that kind of stuff that's all done um inside of .NET uh it's just the actual paints to the canvas and then done with inside of um of JavaScript because it doesn't like the canvas isn't a concept with inside of WebAssembly because the DOM isn't available um okay so if I find a going program that can process images could I use that to process images as in browser and how would I pass the image from JS to WebAssembly and back and forth um so yes you can uh you would need to compile that going library uh down to WebAssembly and then you would have to do some things to expose the appropriate functions from that library to WebAssembly to JavaScript to your host this is kind of why in the uh so if I come over to fetch events um here uh sorry not fetch events um dev events oops that's not what I wanted uh dev events so dev events here and if I come into markdown tools markdown tools so markdown tools is just this is just a going library um and it actually uses uh a library that I found a good hub for passing passing markdown I then just work through the um AST of the markdown that I get back and do some manipulation to it um this file here this dev events.go uh that is exposing a library to my host and it provides me with a way to interact with that now um in the case of an image you might be um you might pass in like a base 64 encoded version encoded string of that image or maybe you pass in a um a byte array uh through memory of that image and stuff like that and then it can manipulate with that byte array inside of um going and then pass it back out as a new byte array or as a new base 64 string or whatever it might be I kind of do that marshal back and forth so you you the constructs of objects that you would have in JavaScript like the image type that we have in JavaScript you can't pass that directly into web assembly because that type doesn't exist but you can do things more intelligently around like the way that you convert that image into something that can be translated across the the bridge um and then the the next question say is that uh is there a standard approach from mapping dependencies between web assembly binaries so if uh one was uh one wasn't um binaries depending on another and so on and so forth so I assume that you're more referring to like the um if you had multiple um web assembly instances running and you wanted to communicate between them how do you manage all of that uh the process is pretty manual like there's there's no easy way that you can do that um management between uh just because there's there's nothing like web assembly the sandbox doesn't know about the other sandboxes um you have to explicitly pass that in um and if one web assembly instance expects to be able to call a function that just happens to come from another one if that function doesn't exist it will just crash because it like it doesn't it doesn't know that that one should be already running you have to you have to take care of managing all of those um so the question can we pass references by uh arguments by reference from JavaScript to web assembly no because they're um because they're running in two separate um memory uh environments you have to um push them into the memory table um so the memory array or a table if it's a function um and then that memory is available inside of JavaScript so um if you then you do manipulation of um that bit of memory inside of your web assembly uh module and then that memory is then made a that memory is available with inside of JavaScript and it has to do it uh like pull that memory back out turn it back into an object and work with it um it's so it's not it's not a by ref um it's more like by val as a as a form of reference passing cool um I think I've caught up oh wait no another question um so uh this question if I compile a JS program to web assembly would it still use JS limited precision numbers um I think from memory the um the number format used by web assembly for floating point might actually be IEEE 754 uh as well um I'd say don't quote me on that but this has been recorded it's on YouTube so I've been quoted at saying that um but there is stuff that it does slightly different with floating points um but I can't remember off the top of head uh but if you were to use assembly scripts which is essentially JavaScript that's compiling to web assembly um maybe uh you're gonna be have some restrictions on it um if you are passing you know floating point numbers um up from JavaScript to web assembly through the memory uh memory arrays then they they start life as JavaScript numbers um so if they if they lose precision within sort of those um there's potential to uh that you that um loss of precision is passed across um but I have not done the um uh was I a 0.1 plus 0.1 um uh whether that equals 0.2 uh just like that that that fun one that everyone points at JavaScript because this is why floating point numbers in JavaScript don't work um yeah uh that would be a good experiment for someone to try okay Erin thanks very much for your presentation so my pleasure thanks a lot for that that was very interesting um uh the rest of you guys can feel free to unmute your mics if you prefer to ask um casually over voice instead uh any other questions like this is a really great opportunity just to really look into it so I mean like don't be shy you're behind a keyboard now so we can say anything and I'm in another country remember so yeah I I can't even come and find you and uh and be like no why did you ask me that question so no questions I I have another question uh if you don't mind do you use wasm at microsoft cloud at the moment um or anywhere else in the organization have you seen anything so uh I know that there are parts of the business that are looking at it a lot more than other parts um I've been on some threads around how we can use wasm in particular scenarios um uh around serverless as one uh one place um there is definite interest around wasi as uh with inside of microsoft uh one of the people on my team he actually he's a rust developer and he's on the um the compiler team for by implementing rust and web assembly um so he's actually very deeply involved with a number of different parts of the organization first on the usage of rust with inside of microsoft and secondly on the role that web assembly and wasi in particular can play with um some of the projects that we're doing but as for as for specific use cases um I probably can't mention any okay any other questions anyone might have do you imagine you see dominance from such languages um are any other reasons or like a good support team or so I I mean I know the dotnet team is very heavily investing in it um they've been working on blazer for ages and they've got to commit to ship um I've talked to some customers around using blazer and they see it as a as a way to do things like replace um really legacy silverlight applications that turns out that there are a number of companies that still run silverlight in production and they see web assembly as a stepping stone to replace in those um similarly for companies that you know want to do that migration away from traditional desktop applications to progressive web apps or just normal um normal web applications they're seeing that web assembly can be a way that they don't have to convert their entire dev team into web developers but they can use um they can use web technologies but use and combine that with the skill set of people that are traditionally dotnet developers um to build internal applications so I think we'll definitely see um a good amount of uptake or at least a a good use case for internal applications for these more complex platforms such as um such as blazer there's a couple of options in the going space and I think that there might be one or two in the python space for doing that sort of stuff um in terms of like the more I guess performance sensitive sorts of applications where you build things that we might run on mobile devices and whatnot that's where I think languages like rust will take off more because they can produce things that are much smaller uh in binary size and much more targeted at what they can do uh they don't bring over these overheads of run times and stuff like that right the that search application that I showed on my website the amount of hacking I had to do to actually make that run inside of a page rather than just like blazer taking over the entire application was quite um it was quite painful just because it's not like the the way blazer is designed it's not designed to work that way similarly with um with going it's not really designed to work like I did with the that first demo that I had you can do it it just requires a whole bunch of additional work whereas someone like rust is designed to be used as a library for web assembly it's you know it's just like you know a function that you've got running inside of a virtual machine um there's other there's other interesting things like with the with the go-lane version you've got to do these there's this thing in go-lane called a channel a channel is a way that you can do bi-directional communication that in ways that I don't properly understand because I'm not really a go-lane developer but you can use channels to basically cause functions to not exit so you actually have to set up a channel inside of a go-lane application that never gets a message put on it which means that the function never executes and that's the way that you you start a go-lane application in web assembly because as soon as it executes through to completion well the like it just garbage collects itself so if you don't do that and I actually cover this off in the blog series um if you don't write like there was this um arrow c on like the the end of um one of the lines uh one of the functions I had if you don't have that line there you actually can't execute any code because it just terminates like the vm just terminates so like dotnet does a similar thing because it starts a console application basically it's it's running like a pseudo web server inside of a console application whereas like I said because rust is designed to be a library you don't have to do those sorts of hacks um there's another question asking about the size of the module the answer to that is it depends it's going to depend on the language it's going to depend on the amount of code that you've got in there and all that sort of stuff so the two demos that I showed today the first one just to show those tables from the react application it's a couple of megabytes in size for the the going binary um no I don't actually have the output of it somewhere that I can show it's just all living in memory at the moment um yeah it's it's I think it was around two and a half meg or so uh the dotnet one so with blazer it's a slightly more complex application it's got some more dependencies in it and that was like five plus megabytes and if you look at the network tab there's dozens of dls that get downloaded so they can be quite large and then obviously the more code that you've got the bigger it can become going you can simplify and and strip down smaller with tiny go so you can go from megabytes to hundreds of kilobytes but it's and then it's kind of equatable to like a large JavaScript dependency but um that's just the the price that you pay for these higher level languages and and taking on niceties like garbage collection and memory management um languages where you have to do your own memory management cc++ um and rust they will compile down a lot smaller so you can get um like you can get rust like hello world is I think we're talking like a kilobyte of size or something like something pretty pretty irrelevantly small in terms of what we deploy to the web these days but yeah I don't have a good answer because yeah it's really going to depend on the kinds of projects that you try to build and the platform that you're building from uh any other questions no if not then my my cat is going crazy sorry so thanks a lot about sharing today and it was really good my pleasure um uh I'll work out some way to share these slides if people want these slides is the best place just on the on the the github issue or shall I put them on the youtube live stream chat oh you can also put it on the github issue yep cool yeah maybe you too yep I will do that if we if we need to find you and ask more questions there and are you on twitter yes thanks to go um yes I am actually let me just uh I'll quickly reshare my screen uh and go back to the slide with all my information so here's where did zoom go zoom goes there whoops gotta hit share um that's where you can find me online okay thank you yep um and yeah I have that's my website and email um happy to have you feel questions where I can um and if I can't answer them I will try and find someone else that can I'll just pass them off to Sarah Sarah can answer them for me okay I'm just saying I'm saying if she's actually listening still um so if there are no other questions does anyone have anything to ask or announce or say on open mic can quickly take a few um if you're speaking and having to unmute yourself maybe you should unmute yourself but otherwise I guess nobody else has oh okay uh sorry uh sorry uh quick announcement hi uh huijie here oh we can talk about the live streamers already right uh yeah uh so