WebAssembly Demystified

today I'm gonna talk about webassembly and many of you may not even heard of that here there's like what what is web assembly so I'm gonna answer some of those things but first I just want to make a little statement and that's I really feel that we're on the brink of a revolution and it's early right it's very early in the revolution but I feel like web assembly is going to completely change how we think of web apps and what a web app is capable of doing completely change it and maybe a couple years out but we're on the brink so as Gerard said my name is J Phelps and I'm an engineer over at Netflix and I the web assembly is important to me because I'm a big compiler nut so I like to work on compilers in my free time and when I first learned about web assembly I tried to get involved as much as I can you know obviously I still have my full-time job but I wanted to to express some of my excitement and passion and to the rest of the community because I noticed that a large number of people whenever I talk to someone about web assembly they'd say you know I've heard of it like on Twitter or something like that but I really don't know what it is like I so you know and people are always usually excited so what is web assembly well for one it's also known as wasum which is an abbreviation web assembly ASM is usually the abbreviation for assembly and it's an efficient low-level bytecode for the web and that's that's a cool catchphrase but what does it really mean what does it mean when I say efficient when I say efficient I mean that it's fast to load and execute and when I say load I mean it's fast you transport the the compiled files over the Internet to the person's browser and then it's also fast to parse those compiled files because this they run inside a virtual machine and once it's done parsing it it is still fast to execute and it's it's efficient and fast primarily because it is a low-level bytecode and if you're not familiar with the term code this is an example of one of the webassembly opera using the upper operands who's gonna be operators instructions I guess is a more familiar term for it and this is a hexadecimal so this is one byte so because as human beings don't usually read binary at least I know I don't that often it's it's an web assemblies intended as a compilation target right so you will write in some other programming language like C C++ rust and possibly some other ones that I'll talk about and then you compile that ahead of time to web assembly and then you shift those web assembly files to your browser so here's an example if you're not familiar with C or C++ I think it's fairly straightforward you know basically you can just ignore the types the end stuff and it's pretty much exactly like JavaScript this is for generating a factorial and with web assembly that C code equals basically this binary code this bytecode right and we're going to come back to this so don't worry if this is a little Lego what's going on web assembly is also designed to be safe and portable and safe and portable what I mean by that is it's just in the same way as JavaScript is right you don't have to deal with memory overflow exploits and things like that and it's portable so it'll run in any browser that supports web assembly just like JavaScript runs in all of these browsers because it kind of is the same goal of what Java intended to do and and job has been really successful at this on the server side not but not nearly as much on the web side with like the Java applet stuff so there's a really great quote from Ben Smith who's on the chrome team and he said that it that web assembly is the shortcut to your JavaScript JavaScript optimizer and it's actually very true it's not it's he's it's not a metaphor in all the browsers that have implemented web assembly they literally use the existing virtual machine they have because it's been hardened over the years and it's very fast and very powerful but because web assembly is is a strictly tight bytecode it can go straight to the optimizer and doesn't need to do all these intermediary just-in-time compilation so you might be thinking if it is this going to kill JavaScript then right if this is a short if this is a shortcut to that optimizer why wouldn't why would I use JavaScript then I can get faster performance of that and if you ask the core team of Chrome or Mozilla or any of those in there they're gonna tell you nope this is not intended to kill JavaScript and they're right it's not that's not the intent and it it probably won't kill JavaScript but I am gonna to make a little prediction and I'm gonna say maybe someday it might not entirely kill JavaScript but it's gonna change the way we write our Reb apps enough that you may end up writing majority of your app in a totally different language maybe even a language this is a bet that doesn't even exist today so the other question you might ask is well then will we be compiling our JavaScript to web assembly right if we can shortcut to that to that optimizer why wouldn't we just compile it well that's not really feasible because javascript is extremely dynamic extremely dynamic and sometimes we forget because we try and use best practices to not use some of those dynamic features but technically there are a lot of really really dynamic things that you can do with JavaScript that are pretty complex and so to have that compilation you'd have a fairly large runtime and in many cases you'd actually have to ship almost a virtual machine yourself so we're talking several megabytes of code just to be able to run the code that your application contains now as the web sembly gets further and further along and adds additional features this becomes less of a valid argument but as of now in in the future it does not appear that javascript is going anywhere it's a great language for its intent but webassembly just basically opens up new possibilities that weren't really feasible today so it would it would almost be slower if you could try to compile JavaScript to webassembly it's just it doesn't miss doesn't make sense so it's still missing things the MVP or the v1 of webassembly is best suited and was kind of designed around the C++ in or rust use case and why is that well since webassembly is very low-level it's a very low-level language it makes sense that programming languages that are basically just one step above an assembly language would be easier to compile to that right so languages like C++ and rust they don't have garbage collection they use different techniques like cincy you might use normal malloc just manual memory management in C++ if you're using the new versions you might use smart pointers or write or auto and things like that in rust they they use a totally different paradigm that's a that's a really great talk in its own actually but these languages don't use garbage collection so they don't need all this complicated runtime stuff to keep track of that stuff so web assembly is a really natural target for them and on top of that these languages aren't really a hundred percent designed or intended to you have to call into complex JavaScript things like mutating the Dom like it doesn't really make a whole lot of sense to build your entire HTML app in C++ because C++ was not designed around that use case certainly you can do it but more often than not when people are writing these C++ or Russ things they're usually going to target things like WebGL and or they're going to be more library specific like imagine in the future being able to write your own json.parse utility that was able to parse 64-bit integers like those type of things are really great use cases for these these low level systems languages but other languages I think I'm really confident I don't just think I'm very confident that other languages will be very popular in webassembly very soon and one example of that is turbo script and I don't know if turbo scripts going to be popular but I think that it really shows that you can you can have your cake in a lot of ways and eat it too and let me just show you a little snippet of turbo script I can guarantee no one here has probably ever even heard of this but what does this look like to you thank you yeah typescript this looks like typescript right and and if it if it didn't say float32 and if you didn't say delete position at the bottom you might think this was typescript because it really turbo script was designed to basically make the typescript programmer or the JavaScript programmer right at home but guess what this compiles to web assembly now before you get too excited because web assembly doesn't have a garbage collector yet you have to manually manage your memory so every time you new up an object it's basically calling malloc if you're familiar with the low-level stuff if you're not it's okay it's creating a new instance of that object when you call new and then if you you have to manually call delete to free up that memory if you don't call delete that memory just gets leaked and you especially if you lose a reference to that and you get then you can never delete it and the memories just leaked so but when you're doing things like libraries like let's say you're making a utility functions that do some sort of mathematical computation being able to man you're managing your own memory is really not that actually that big a deal people are very used to that when you're writing in languages like this or or in fact you may not even need to allocate on the heap you may be able to just use the stack and you and that just basically means you don't have to call new you just create objects that will just automatically be claimed reclaimed when the current function returns so I think these type of things really show that brand-new languages I think will be designed specific for the web use case like I just heard and I haven't confirmed this but I heard it like two days ago someone here in the audience told me this that Elm which is a programming language very much based on Haskell the Elm is designed specifically for the web and right now it target's JavaScript but they have recently decided to start looking at the future of trap Eiling to webassembly I don't think they're gonna be able to do it any time super soon because of memory management stuff but we'll get to them so win-win should wouldn't like target webassembly what kind of use cases is it best for well right now in the v1 they're really trying to focus on these heavily CPU bound computations things that deal with math where you're just using number maybe 32-bit 64-bit or any kind of numbers you're doing some sort of computation webassembly really shines with that and the most common thing you'd say engineers think of when they think of numbers is games at least if you've ever written a game there's tons of pixel stuff and it's a lot of these are going to be heavily OpenGL and so you can write your app in C++ or rust your game using the OpenGL bindings that you're very used to and compile that to web assembly and it will run in a browser and I want to show you a little quick demo see if it plays please play play oh it's being really slow oh no it's being jittery oh well that's okay I think you can get the idea that this is this is an example this is actually running in Firefox the latest version of Firefox without any flags didn't have to enable anything I just went to this website and this runs and I can move around on my keyboard and there's a whole bunch of other demos that are that really show off that even though webassembly is brand new you can already do things this is running the Unreal Engine for those of you familiar so pretty exciting stuff but most of you probably don't write games I don't write games so the the game stuff is not super attractive to me as an engineer but the other use cases are coming sooner than you'd might think right so you'll likely compiling webassembly or excuse me consuming webassembly binaries very soon even if you're not actually writing code that compiles to it you probably you'll start to see web compiled projects and libraries showing up on npm so keep keep a lookout for that even if you're not interested in in web assembly today so let's circle back a little bit what was that what's a binary stuff that I showed before I write I had that factorial and then I I showed that it got converted to this binary representation well think well what the heck is that well I I know like me when I when I first saw binary years ago like I'm just like don't want to look at this this is actually a hexadecimal of binary but crazy stuff right it can be really intimidating when you start looking at binary thinking about oh do I have to deal with this oh I I just don't want to deal with it but the pro tip I'm gonna give you is don't worry about it like if it's there's tooling already today around this where you don't need to really worry about that you can certainly if you want to if you nerd out on that pull more power to you and actually hit me up on Twitter cuz cuz I want to nerd out on that too but for the most part you unless you're implementing your own compiler you don't necessarily need to know a whole lot about binary so there's a textual representation of web assembly that's available so it's test the text is going to be to the rescue so and this is this is what that factorial function looks like in web assembly in the textual representation of it and this is text right so you can read text presumably but you may not right now understand what this means you may not understand the actual semantics of that but let's let's let's dive into this a little bit let's learn the fundamentals of web assembly so we can try and demystify this text when you see this because this is the text you're gonna see like if you have if you ship a web assembly module to the browser and you maybe set the debugger up or you pause on exception that's the textual representation you're going to see so web assembly is a stack machine language and that that's really important to understand if you're going to be actually trying to debug web assembly itself now if you never debug web assembly for some reason then you don't even know that but if you are debugging web assembly it's important to know that so you might be asking next well what the heck is a stack machine like if I have to know this what is it J well let's first cover a stack many of you may not already know what this is but I really want to make sure you completely understand what a stack is a stack is a data structure that basically has two operations you can push things on to the stack or you can pop things off the sack let's take a look at what that might look like with a with a visual stack we've got our stack here and let's say we've got an item now what we want to do is we want to take that and push it onto the stack so over there it goes now we get another item we want to push that onto the stack and it goes on top and that's an important distinction it goes on top doesn't go on bottom it doesn't go in and in some random order when you push things on to the stack it's always on top well push one one more for good measure and then there was the one more operation there was the pop so if I'm popping something off a stack of course we're gonna take the top thing we're not gonna go randomly we're not gonna go in the bottom we're gonna pop that top thing off the second and likewise when we continue to pop pop it it off popping it off and there we go now we've got an empty stack so this is this pattern of pushing and popping on a stack is called last in first out order so that's important I hope that helps fully understand what a stack is and if we want to apply this to the stack machine it's a stack in which the items that are on the stack are our instructions so these instructions run and evaluate and they push and pop values on this stack and you may already be familiar with it with a one form of stack like a call stack for example and each time you call a function you're putting that function on the stack it executes a bunch of things and then the call stack returns it pops all of those things off of the stack so let's let's look at some web assembly this is not scary I hope so let's let's first are very simply this is not web assembly but this is this is the very basic 1+2 right and in almost every language this is how you do it unless here in Haskell but this is what the web assembly example or CD the web assembly for the add operation looks like this is called a mnemonic so on the Left we have a textual representation of that and on the right we have the actual binary opto now you don't need a memory that memorize the binary opto again textual representation leaning heavily on that so back to our one plus two this is what the code looks like to add one plus two we've got a constant of one it's a 32-bit integer a Const of two and we're gonna add those two things together so let's go back to our stack visualization cost of one that pushes the one on to the stack a cost of two we push a two onto the stack and then we're going to push at we're gonna we're gonna execute add and what add does is it's kind of like a function call in its it's actually an instruction but you can think of it kind of like a function call that the computer itself will run and it takes basically two arguments and how it takes those arguments is it's going to take the top two items and it's going to take those off the stack it's gonna add those together which is three and then it'll put that back on the stack and and replace those two values so now we have the number three on the stack and so from here the next instruction might be pushing or might be dropping it off the stack like you don't care about it like return void or you may be logging this out or something like that yeah here's it here's a great example like like if if you have a log function this is how you do it you'd add the two numbers together and then you you call the log function so call is going to receive the result of add we've got a stack of instructions right and this I think is is is fairly easy to understand and it does take a little bit to get used to the actual output which you'll see here that which is that the compilers usually apply lots of Optus optimizations so even though you you wrote certain code the actual output may not be what you expect it to be and I'm not going to show some really complicated examples because I don't want to I mean it's just gonna confuse you so what's the point but like I can show you like a trivial one like a really trivial one ship for this example I don't know of any compiler that does that any native compiler that's not going to just do this right like it knows statically at compile time that one plus two equals three so it's just going to convert that to three and most compilers are going to be even more clever they're going look at what log does and if it can if it has the definition if it's statically linked it's gonna try and inline that definition so that you don't have to pay the cost of a function call because it statically knows it so optimizations can make things a little tricky but there's another thing we can do and then that's most of the web assembly tooling supports an abstract an abstract syntax tree representation of web assembly we were looking at the stack based representation but there's another alternative representation that is an abstract syntax tree now it's still gonna be evaluated as a stack machine but it's represented in a way that's more human-friendly and going back to our 1 + 2 add them together and then call log this is stack machine and this is abstract syntax tree version of it and you'll notice that it at first it can may be a little confusing but these are called s expressions and some of you I'm trying to see if anyone is smiling no it looks a lot like Lisp right I don't know if any of you've done lists but yeah it looks like listen why does it look like Lisp because Lisp invented s expression 60 years ago so and Lisp excuse me s expressions are used primarily because they're dead simple to understand because there's very little syntactic sugar and they're extremely easy to parse so all the tooling can can parse it very easily and compile it but you can see here that we've changed it so instead of I'm going to jump back here instead of having the stack of instructions we've instead got an AST so we can see that we call add with the two arguments and then call with it with the one argument which is the result of the adding and very often this is what you'll see a lot of people use when they're writing tests or when you're using all these toolings just because it's once once you get a function of a decent-size things just get really out of hand because sometimes what will happen is you'll have a ton of instructions and you'll have like one instruction at the very top like it's some constant or getting some local varial or something that doesn't get used until like the way bottom of the stack is because that's how you have to like programming and stack machines can get a little little confusing and hairy so you may be thinking why not source right well source maps are coming soon there they are not currently supported by any browser because there isn't a specification for it but it is on their to-do list and probably soon ish I know there hasn't been a lot of talk about it lately like there was a lot in 2015 and a little bit in 2016 lately they've kind of been prioritizing other things but source map is coming eventually so if you compile let's say let's pie on the sky idea let's say Elm in in a couple years is compiling to web assembly you if you set a breakpoint just like your Babel or typescript translation or set a breakpoint you'll see your elm code instead of seeing web assembly so that's the goal so the next thing is if this is exciting to you you might be asking how do I get started what do I do how do I learn more about web assembly if you want to know how the low-level stuff works like more learn more about actual web assembly there's a tool called the web assembly Explorer this is a hugely underrated tool like very few people have tweeted this very few people I know use this but it's so underrated because was a guy at Mozilla maintains this and basically on the left you can type C++ or C and there's a whole bunch of different versions of that and then compile that and see the web assembly text format and the Firefox x86 assembly and you can also see LLVM ir if you don't know what that is don't worry about it but if you do is this thing is amazing you can see exactly in in real time what your code is actually going to do in Firefox incredible tool and an really invaluable fir for quickly learning well what what happens when I do this or in what happens when I do that and you could find it here I'm gonna post my slides so that you don't have to frantically write this down or I'll tweet this later actually I think I'll tweet this later if you don't care really about like web assembly itself like you care about using web assembly but learning web assembly stuff you don't care about that the first thing you're gonna want to do is go to web assembly org and why is because they they have it is really early but they have right now some of the best documentation for getting started with it what you're going to end up probably using is they called em script in which is a project that's been around for a number of years but it's previous or it's its goal up until now has been primarily targeted towards compiling C and C++ to JavaScript using a s MJS and if you don't know what that is don't worry about it but it's it's being adapted because of the tooling is so great it's being adapted to also suit the webassembly purpose so it actually uses LLVM and it's it's a basically just another back-end to it and this is how you would compile your c file your c or c++ to web assembly and you get an executable app dot HTML that will load up the web assembly or you can also target just a regular wasum file if you don't want the HTML so I'm not gonna go too much into this because I personally find the tutorial things where like someone's just like showing you basically what the getting started would do kind of boring because you're not all you know able to do it right now so you'll probably forget but the web assembly org has has an excellent just play-by-play of what you need to install and I'll admit that I'm gonna skip ahead just a little bit one slide I'll admit that it is a little hairy right now when you're using the description stuff but webpack support is coming they are they just submitted a grant proposal to the Mozilla Foundation to try and get more funding to try and hire more people get into incentivize more people to contribute to this so that they can add support for web assembly in web pack and not just being able to like link different modules together like calling you know a web assembly module from your JavaScript but also imagine a C++ a rust loader when other languages like turbo script and elm and all these other languages compile to it imagine these loaders and so you don't even need to set up all this other extra tooling you can just import it like you import your less files or your CSS or whatnot that's the dream and the goal that we're striving to but we do need more people that are using this one of the problems we have right now is it's it's out in Firefox in Chrome but really there's just not a whole lot of people even playing with it not a whole lot of people experimenting with it there's they're the companies that are doing it our play are doing it a lot like they're making really big bets on it especially than in the gaming industry they're making really big bets but other use cases we need people to kind of you know experiment in their free time and and try and discover the growing pains and suggests where people who volunteer their time to work on these things should be focusing our efforts so and that that leads me into what's missing where should we would should the specification authors and community members like myself I'm a community member and a spec author but where should we be focusing our efforts what's well one thing that's missing is direct access to the web ap is right now in web assembly you have to call to JavaScript to make any kind of meaningful side effect actually any side effect at all really so if you want to console.log you have to call to javascript to do that that's a great a great really easy foreign function interface but you still have to call into javascript of that and that incurs a cost penalty and it's it's just not as great because then you need to actually include javascript to basically shim those things but that's that's not always going to be the case they definitely plan to provide web api s2m assembly so that you could ship a web assembly file without any JavaScript whatsoever but that's in the works it's still a TBD this one I've already mentioned garbage collection web assembly right now is primarily only for manual managed languages now you could ship your own garbage collector but it would be a little complicated because you can't inspect the actual stack right now but you could do it but it also that your garbage collector will probably be father rather large you know at least a megabyte probably more you probably make like a simple thing but isn't really it's like a garbage collection like like reference counting or something like arc from a swift if you're familiar with that but garbage collection is really going to be necessary for better interrupts with JavaScript so what happens if I if I call a function from JavaScript and it returns from web assembly I call a function from JavaScript it returns an HTML node or something like that there's no way to represent that in grab assembly right now because if we gave them an opaque reference to that element they we now don't have a way to keep track of who has a reference to it I could pass it around inside my web assembly and JavaScript would have no idea so it would have to leak that memory so interrupts with garbage collection is gonna be super important multi-threading this actually seems like one of the most likely to come next I'm not gonna make that promise but it from my readings and the talks on the the tickets it sounds like this is this is heavily being designed right now this multi-threading stuff and it sounds likely that web assembly is going to get really close to native threads like a very similar threading model to normal C++ style P threads so for me that's really exciting because up until that point like with JavaScript we only have web workers and it's really very gimped like there's only very very specific use cases for webOS m/r for web workers and having real threads is really gonna open up for a lot of things now it's also gonna pop for a lot of abuse so they're still gonna do things like preventing you or very likely to do things like preventing you from blocking on the main thread so keep that in mind and there's there's a lot more that isn't isn't ideal in webassembly for all these other languages right for for C++ and rust it's working fairly well but all these other possible languages even things like Oh camel they will be great in the future but right now they're not ideal for web assembly so the revolution is just beginning with web assembly I think that in in five max ten years that things are going to change very dramatically and so I I appreciate you guys letting me give my share my passions today and I hope that some of you will will join the discussions right jump on github web assembly dot slash design check out some of the things that people are talking about see what it is that might be coming in and the problems and it's also you know a great waste place to ask some questions you know they're a very friendly crew people ask dumb questions all the time and that's totally cool like it's it's totally cool although all the guys are very very kind and understanding so I you know when I first got it started I asked so I asked several really really dumb questions that in hinds I'm embarrassed but but you know and as I got up to speed it just keeps exciting me more and more so I if you have questions feel free to find me afterwards or tonight and I thank you very much for your time [Applause]

Channel: Coding Tech

Views: 70,716

Rating: 4.856709 out of 5

Keywords: webassembly, rust, web development, software development, wa

Id: 6Y3W94_8scw

Length: 31min 27sec (1887 seconds)

Published: Sun Nov 05 2017