WebAssembly Demystified: What It Means For NodeJS

I get to talk to you about webassembly I'm gonna try and demystify it a little bit it's a very complex topic so you know it's it's a there's a lot of things to cover and what this means for node it's pretty even more complicated than what webassembly is so Who am I I'm Jay Phelps I used to work at Netflix but recently I left to start a company with my friend Tracy called this dot and what we do at this dot is we do lots of different things when you support training mentorship stuff we do developer relations and then we also do staff augmentation and stuff like that so if this is interesting to you webassembly or not-- or any of these type of things feel free to reach out so let's get started what is webassembly well it's also known as well or was um depending on how you'd like to pronounce it I personally pronounced it wasa m-- and it the the spiel is that it's an efficient low-level byte code for the web but there's one thing in this talk particular that I want to do is I want to scratch out that last part for the web really web assembly is just an efficient low-level byte code the fact that they're creating it for the web is kind of a secondary thing it's this is actually a very unprecedented is a where instruction set that so think about like the Intel instruction set or the arm instruction set these are things that were created proprietary by like singular companies whereas webassembly all the major companies came together and created this for all of them like they basically all the preferences and all the desires for those companies came together so I think that's very important to clarify that so let's break this down a little bit what do I mean by efficient well I'm gonna mean that it's fast to load and fast to execute so if you're using web assembly in a browser it's gonna be fast to send over the internet so small bundle sizes are very important but then also fast to compile and parse times you know there's been a big push recently with javascript to get those parse times down because even if you've got your bundle size less than a megabyte there's still a ton of time being spent on that and so web assembly was designed with that in mind with those problems in mind and so there's something called streaming compilation and this doesn't actually apply to node because the files are obviously sitting on your hard drive but it's really important to know especially if you're going to be doing things like isomorphic webassembly like you're gonna running it on the node but also running it in the browser and streaming compilation essentially just means like we've got this this mobile device here and let's imagine that we've got some web assembly on the server and we want to send that to it it's going to get compiled to machine code as soon as that the download is complete but with streaming compilation we can actually compile it as chunks are coming across the wire so before it's even done we've compiled everything up to that point and in many cases it can compile faster than it can download especially in like browsers like Firefox and Chrome so let's take a look at that again just to make sure we're clear so the chunks of the web assembly module get compiled and they're finished compiling even before the next chunk has started so that's really important for the the browser story but it's also a low-level bytecode what does that really mean well it's it means that there's instructions that are actual bytes this is very similar to machine code right it's a binary thing and that means it's mostly intended as a compilation target this is not something that everyone in this room is going to be writing by hand you can write it by hand just like you can write assembly by hand like machine code assembly but it's not intended to be that way it's intended to take code like this this is C or C++ either and compile that to the the hexadecimal binary representation on the right so you compile it ahead of time and one of the most popular questions that I get asked about web assembly is is this gonna kill JavaScript right is that the intent of this and really the answer to that is no it's that's it's definitely not the intent to kill JavaScript it's really just to give another option so think about how many languages today are actually compiling to JavaScript and JavaScript is a terrible compilation target so this is really just giving you another option for that it's designed specifically for compilation but maybe in a long time from now it will decrease the usage of JavaScript and our reliance on it especially as new brand new languages like reason and Elm get invented and we may start to pivot towards those languages but is certainly not the intent and JavaScript's not going anywhere anytime soon so the next question would be am I going to compile my JavaScript to webassembly you know if it has that streaming compilation benefits and all that stuff why wouldn't I just compile JavaScript web assembly and the answer is super complex it really is really complex and there's a lot of nuance so you can it's easy to get into arguments about this but the general high-level gist is JavaScript is just an extremely dynamic language just really extremely dynamic and like here's a very simple example of this that not commonly known the but but due to the prototype inheritance how it works if you act you can actually call push on the prototype of array and totally screw up every array that ever gets created in JavaScript in that engine now it has it's actually technically empty it has a length of 0 but if you access the first item it actually exists and it causes issues with map and all sorts of problems and this is totally spec compliant it's just JavaScript is a very complex a very dynamic runtime based behavior so compiling you know strict JavaScript like compiling everything that could possibly be JavaScript web assembly would over all be slower the virtual machines in your browsers are and in node our tremendous they're great use javascript if you want to use javascript but and this is where the arguments start is what if you do you use a strict subset of JavaScript right there's there's been a whole bunch of experiments about this like turbo scripts and assembly script where they take the same syntax as JavaScript this looks like typescript for example and you can compile that down to web assembly because there's a lot of you know like the all the dynamic portions of it that we don't use super often but are certainly possible you just get rid of those right so it's not JavaScript but it's close enough and so that is certainly possible and there's been a bunch of experiments in fact Facebook just recently when I say recently I mean just a couple days ago created a PR on their project called pre pack 2 where they were they pre-processed JavaScript actually try and evaluate it ahead of time to figure out what they can statically know about it and they've actually been experimenting with with taking certain parts of a strict subset of JavaScript and compiling that to web assembly stew super super early and it's it doesn't work with very complex JavaScript objects and stuff but it's exciting to see what people will do with this but that is not the intent piling your JavaScript web assembly is not what you're going to do overall so the v1 is primary suited the the MVP of web assemblies for languages like C++ or rust these are low level system languages where you don't use garbage collection where you manually manage your memory and really the abstractions in the language is syntactic sugar for loads and stores of numbers inside of a linear memory right this is very low-level type of languages but other languages are a stated goal of web assembly they're just taking a very incremental process to the specification so languages like go and and the.net runtime and all these new languages like reason and elements stuff like that which are garbage collection garbage collected they all definitely be compiling to web assembly and in fact go has been experimenting with this even though web assembly is not a good target for it right now with the v1 they've already been experimenting with them they're rolling their own garbage collector and they've been working around some of the limitations of web assembly to experiment it's not the most performant at this point for go but someday it will be so currently right now when should a you target web assembly know I'm not talking about the future but right now when should you do it well the gist is that heavily CPU number computations whenever you're doing anything which just basically boils down to a bunch of numbers and you'd be surprised what that actually is in a lot of apps and in fact you a lot of people in this room especially if you've done any browser stuff may already be using web assembly and you don't even know it and so one example of that is the Mozilla folks they there's a project called source map so anyone who pretty much deals with source map in any way whether Babel less SAS all these things they all use this library including Firefox itself the chrome the Firefox developer tools uses this library and it used to be written in JavaScript but they ported it to rust and compiled that to web assembly and they saw an over 10x speed improvement which is huge especially for you know your local development type of stuff that's a huge improvement for me and then many of you are probably already using that today another use case is going to be as an alternative to writing native or napi there was an earlier talk about the end a new n API and instead of writing native truly native add-ons which require you know it to be compiled when you NPM install it you could write you didn't put you could write it in C++ and then compile that to webassembly now there's this is not necessarily a paved path this point so there's a lot of hairiness to that but there's already been people experimenting with this my friend OJ Kuan for example libsass is a very popular project which is a native implementation of a SAS compiler but one of the issues with that is the fact that when you npm install it it has to get compiled for your machine it takes a really long time there's security concerns about doing that and it's not portable right that that same library can't be trivially used in the browser as well and so webassembly he's been experimenting with and this actually works there's just some edge case caveats and then he's gonna do a legwork to try and get that upstream but there's already been a bunch of libraries and algorithms and stuff these are just a some examples that I know of off the top of my head that have been ported to compile to web assembly these are all available on NPM you can npm install these today and they run with web assembly transparently so you could also use node for example as a portable sandbox in fact I've spoken with a lot of people here today who actually have considered this and a couple companies that are actually experimenting with it today to basically using node is just a fancy very solid and well secured sandbox because there's there's complicated reasons but the web assembly itself has there's a whole class of exploits like buffer overflow exploits that are not even possible even if you wrote it in a high-level language where it would be possible like a traditional C++ or C buffer over overflow exploit can't be done in web assembly you can still overflow and your app may crash but you won't be able to jump to arbitrary executable code and stuff like that so let's go take a step back a little bit and look at what was that binary stuff that I showed earlier you know we got that and if you're like me you might be looking at this and going well this just sounds awful like you know that's it's just overwhelming what are you doing and and that's just because binary can obviously be intimidating I don't look at this at the binary and go oh I know exactly what that's doing I read that you know it's like the matrix where I don't even see the code no no no you know the pro tip is don't worry about the binary that's an implementation detail if you've ever written Swift or objective-c or even any native apps you know how often do you actually go and look at the machine code itself you know after college probably not a whole lot and that's because tooling should save you from that right tooling you should make it so that that that information you don't need to know the binary stuff but unfortunately we are early adopters on web assembly if you're gonna be using it right now and so tooling is not quite there to prevent you from needing to know it at all so there is a textual representation of the web assembly that can save the day for you and so that same binary can be expressed in this textual way like this this is a textual assembly and you may be thinking looking at that going well that's better but I still don't understand what the heck that is and so let's take it's just a second to learn the fundamentals of what web assembly is how it actually evaluates so web assembly is a stack machine language it's not a register machine that's the the opposite of that it's a stack machine and so well what is a stack machine well it's important to truly know that you know a stack is a data structure where you've got two operations you can push or pop you can't access in the middle if you push something the only way to get something off of it is you have to pop it and so a stack machine is a machine in which instead the instructions are evaluated as a stack so whenever you have a you have an instruction it's going to be pushing or popping things on this intrinsic stack as part of the machine itself instead of needing to manage a separate stack so let's take a look at an actual example 1+2 one of the simplest things well on the left you have the bytecode for it's for the actual opcode for the add instruction and webassembly on the on the right you've got the textual representation of it the mnemonic as it's called but you can just call it the textual representation and so that's the add instruction and so this would be all you would need to do to add that one plus two together let's kind of break that down with a stack visualization we've got the one so that's going to that's basically telling the machine put one on us on the stack so that's what we do we've got the two it's saying put two on the stack that's gonna go on top of that and then we've got another instruction saying the add and that's gonna say take the two previous operands off the stack add them together so take the previous two off the stack magically somehow machine add them together and then push the result onto the stack so now the result of that or that after that instruction has been evaluated is three so if we wanted to log that value out how would you do that well you'd need to slide in a call log right after that right after it that's assuming that log is a magical function that accepts an integer but but the the argument to that log would be the result of the stack above it so this is a little confusing still and most people are actually going to look at what's called an abstract syntax tree syn version of that textual representation and this is this is like here here's the example we have with the 1 plus 2 and the log we can represent this instead like this and this is much more familiar and you don't need to know anything about stack machines and if these are called s expressions and if any one is thinks it looks kind of funny yeah it does look like lisp if if you're familiar with that older language but it's still used today and you can see that it's kind of like saying function calls right it's kind of like saying the function call ad and it's got the two arguments and then the function call log and it's got the the singular argument so let's kind of look at what's missing in webassembly I've been talking about some of the high-level stuff and we kind of did a little bit of a deep dive into how does web assembly actually get evaluated what is missing today to be productive in like the the the node type of environment well the biggest thing that you'll quickly figure out is that web assembly today has no direct access to any kind of host api's not in the browser not in node you can basically load and store from memory and do a bunch of number crunching but as far as like logging or signals or any kind of host interaction nothing is directly exposed to it instead right now you have to give it things via JavaScript so when you load up a web assembly module which you have to do currently from JavaScript you have to give it imports you have to essentially dynamically link any kind of external type of side effects so if you need to read from a file or you need to you know access a WebSocket or whatever it is those type of things have to be exposed to web assembly and so that can you know it's not the end of the world there's a bunch of people there's projects like M script in which has done a lot of legwork on the C standard library but it's it's not ideal right and there so it is a goal of webassembly to eventually somehow expose native host bindings somehow in the browser that's gonna be the dom most likely and node the question is kind of a much more complex does that mean it's it's providing the note the standard node modules like you know the FS and all that the questions are a little open and especially with n api so one of the I've been I've been talking here at the conference with a couple people who directly worked on the N API stuff and the you know there's the open question of well with web assembly does that is that going to replace an API and the answer is to that currently is no ultimately it's a really note is a really big ship and so steering and turning that ship takes a very long time and a lot of effort and so NEP I the plan and experiment with that would have been you know several years in the making before it was even clear whether web assembly was actually going to become a thing and so they're considering web assembly and what that doesn't mean for the future but it's too early at this point in fact they kind of are hoping that the community will kind of experiment in you experimenting to figure out what worked what didn't work and then what can be pulled out and and made a standard part of note itself but regardless if you're using node with web assembly you're probably going to have to access JavaScript at some point so one of the other problems is garbage collection we need access to the native v8 garbage collector somehow and there's proposals right now that I've been working worked on for the last couple years to expose that in some way and and it's definitely coming but currently that's not possible so you can't actually pass like a JavaScript object into web assembly you could like use like a week map and then like create your own like convention of like a pointer that you know it's just a number that you pass into web assembly that actually is stored in some sort of table and JavaScript to reference that but you can't pass JavaScript objects into web assembly or access them inside webassembly natively because you wouldn't be able to garbage collect them the the next thing is multi-threading this is one of the things that'll when people reach for languages like C++ or rust they're said they're often doing so because they need that they need the real true multi-threading stuff and this is actually possible today with web assembly and it uses workers under the hood but you do it with it's all transparent the worker stuff is all transparent so you don't have to use message-passing because if something called shared array buffer the only caveat to that is that in the browser shared array buffers is disabled they launched it and then they pulled it out because of the specter and meltdown exploits but it's actually available in node so you can actually do multi-threading in node and so you if you use something like I'm scripting which is a project to help you compile your C++ to web assembly it will transfer you when you use P threads it will just transparently actually use workers under the hood and handle that all for you but there has been discussions workers are not trivial as far as the cost to spin them up they're actually kind of expensive in the grand scheme of things so there has been talk in the committee about like what do what does native P threads look like and the reason why they haven't given that from the day one is is ultimately they have to be careful of exposing true true parallelism to JavaScript itself because you could use web assembly as the intermediary so in web workers it protects you against that because if you access the web assembly function that happens to use true multi-threading in JavaScript you can't you can't bypass that some magical way you have to use postmessage to be able to to do that so it's like I said it's kind of a little complicated but P true P threads are probably most likely coming later so there's a bunch of other proposals as well and in as far as node goes we basically are trying to look for more people who are interested in this type of thing so that they can join the community group and inform us what do you want to webassembly to to look like in the nodes in the node ecosystem so in that to that to that point how do you get started like after this talk if you're really excited just to take a look and start to do too early adopt well the the most simplest is obviously web assembly dot org where you can learn more about the actual spec but if you're looking for community resources there's awesome wasum repo which is updated really really frequently it's almost exhaustive resource of different projects the different languages that compile to it different videos and documentation all sorts of stuff there's a lot of really great stuff and I wondered also mentioned that this has actually been supported since v8 r v8 sorry version 8 of v8 and it's actually been supported but prior to that if you're ok with using a flag and there really wasn't any difference between the flagged and unflagged versions and if you're curious even though this is a note conference I do want to point out that it's actually supported in all browsers today except for Internet Explorer obviously which will never be supported in but although all the modern browsers they're all behind this they're all part of the committee this is this is a very unprecedented amount of work that they've all come together and collaborated on so the the thing I want to kind of wrap up is just to talk about how I really am obsessed with this if you can't tell and I think it's a revolution I think the biggest node is definitely an unanswered question of because there's not a lot of people who have been experimenting with this in in node relatively speaking and so I'm really interested if you're interested in this I really want to talk to you here about your use cases I've in fact I've already done that quite a bit even on day one so I'm hoping after this this will inspire some people who want to come up to me and tell me what are you currently using your C++ for and how can we integrate that with node how can we improve that experience so I just wanted to thank you and if you have any questions or if you are really interested in web assembly and you want to hear me tweet about it you can follow me at underscore Jay Phelps on Twitter no thank you [Applause]

Channel: Coding Tech

Views: 50,555

Keywords: webassembly, node.js, wasm, web development, programming

Id: 2TdySRdQHOo

Length: 21min 10sec (1270 seconds)

Published: Fri Oct 19 2018