Rust, WebAssembly, and Javascript Make Three: An FFI Story

hey everybody my name is Ashley and as Justin said I'm here to talk about webassembly but as you can tell from my incredibly long talk title I'm also here to talk about several other things including rust and JavaScript so the first thing I wanted to know is how many people here have written any rust all right how many people wrote that rust to compile it to webassembly heck yeah that's so exciting cool how many people have done anything in webassembly all right hopefully by the end of talk I've convinced you that it's actually worth trying now one of the biggest problems about this topic is that I'm here to talk to you about rust and webassembly which are both incredibly new kind of like edgy things that most people haven't used and this is supposed to be a practical conversation about technology you can use today and so I'm like I'm gonna take these two things that were born like pretty recently and trying to explain to you that you can absolutely use them and so that's a bit of a challenge but we'll see additionally I was I'm really excited about this talk because I'm gonna go into some depths of things and I was gonna do that because I was told that I could do some workshops and they would be before the talk and so that would help everyone get up to speed but the workshops are actually after the talk and so it's just gonna be a little in-between but hopefully I'm gonna go try and go a little fast because I feel like web suddenly is one of those things where people when I ask questions a lot and so hopefully I can make some time all right so I named this rust web assembly and JavaScript make three an FF I story how many people here just knew what FF I was when they saw me list it all right cool that's awesome so the FI I'm gonna be talking about is slightly different than the one that you might expect so FF I stands for foreign function interface and classically got to do the really scientific Wikipedia definition so a mechanism by which a program written in one programming language can call routines or make use of services written in another and so you may note that I actually had three languages written in my title and so some people may think this is a talk about how to teach rust how to JavaScript and believe it or not this is something that exists but it's not what this talk is about so if you want your rust to talk directly to JavaScript check out neon arguably I would say it's a little bit slow you're gonna want to use the webassembly version but neon is also very cool this talk is going to be about how we teach web assembly to talk to JavaScript using rust function signatures and if that sounds super intense I'm hoping by the end of this that you will actually realize that not only is it really not all that technical potentially a little bit tedious but actually kind of exciting and something that you can actually look into and kind of understand on your own let's see how well I do with that all right so my name is Ashley Williams this is a picture of me dressed as a crab if you're unfamiliar with rust rust has a unofficial mascot called Ferris who is a crab because rust people are called rust stations and the puns get worse so I'll stop there but I am on the rest core team I'm also on the rust wasm core team I wrote this tool called waz impac if you've written rust generated webassembly you've almost certainly used that I used to work at MPM and node so balancing this rust javascript game is my jam and I currently work at a company called CloudFlare on building out more web assembly tools if you want to learn how to run a web assembly on the edge because again more edge technologies there come talk to me because that's what I'm working on so as I said today we are going to talk about how we can connect all of these three things and make them live very happily together on the web being very very small and very very fast but before I do this I think it's probably important to kind of explain what some of these technologies are so what is rust so on its website rust declares itself as a programming language designed to empower everyone to build reliable and efficient software so fundamentally rust is kind of you could understand it as a kind of C++ replacement but instead of being C++ where you know maybe you could shoot yourself in the foot and the tooling is kind of terrible and the docs are kind of terrible we actually make the tooling really really nice the docs really really nice because we want litter everyone to be able to program at a systems programming level and in order to do that you have to make your environment inclusive and a great place for people to learn and so that's what Russ is really trying to do and it's what really inspires me about rust but some people like the technical details so here are a couple we are statically typed but we also have type inference you can say let name equal quotes Ashley and you can get variable but the biggest thing that people really pay attention to about rust is we have a concept called ownership and lifetimes which gives us this guaranteed memory safety without a garbage collector if you want to be really pedantic about it we actually kind of have what you could call a static garbage collector which is really a blood packed with the compiler that says you'll write your code this way and I'll take care of it for you but if you are s newbie don't worry about this and people often say that this is scary this is definitely the location of the largest learning curve in rust but you know great responsibility great power and we're constantly trying to work on those docks every day so some people like the hacker news version of pitching rust and because I work at CloudFlare I'm allowed to say this but one of the reasons you might consider rest for your company is cloud bleed was an incredibly huge security problem that happened for CloudFlare similar to the heartbleed security vulnerability and fundamentally what rust says is the safest program is one that doesn't compile so if you're doing some iffy stuff with your memory unless you explicitly tell rust no no trust me rust is going to go let's let's not do this I'm not compiling this program for you until you fix it so that's the that's the the orange website pitch for rust so with rust kind of out of the way let's talk a little bit about web assemblies so I ask people how many people here had heard about web assembly in there we're not that many hands and so I'm gonna go quite quick but I'm excited to talk about this in the hallway if anyone wants to so web assembly if you go to web assembly org we'll say it is a binary instruction format for stack based virtual machine which is a tag line similar to the old rust tag line which has the problem that if you look at that you may not be able to parse any of the words in it and so a more friendly definition would be it is a compilation target for running bytecode on the web so women sembly of course is on the web and so people are always worried about reading source and so it does have human readable versions you can see the top version is what you could call an s expression expression of web assembly who here writes lisp alright it finally one see you got it no but yeah additionally you can kind of take a look down there at the bottom of the buy code stuff it also looks like that but fundamentally you're not going to be wanting to write web assembly from hand you're going to be wanting to write it in a language that then is going to target web assembly as this compilation target so don't worry like I don't know I'm sure recruiters gonna be looking for people who have handwritten webassembly for the last ten years like tomorrow but that's like not a thing so don't worry about that but another thing just before I move on for this I'm really excited about web assembly being on the web but if we think about what's happened in the last six months if anyone's followed the hype cycle with web assembly the most fun things that are happening with web assembly right now are not happening on the web and so a great tagline for web assembly is webassembly neither web nor assembly so just to remember that because again naming things is very difficult alright so you might be asking yourself cool maybe I kind of have this idea of what web assembly is but like why why would you make this like you could but should you and so there's a couple of reasons this is one of the original white papers that announced web assembly you can see that it's from a conglomeration of different browsers so you have folks from Google folks from Mozilla Microsoft and Apple all coming together to talk about this and the primary motivation for web assembly is something like this so if you read this this is an announcement from Google i/o last year where AutoCAD announced that you can now autocad in your browser and that's kind of a big deal perhaps this is very specific to me my father is an architect I remembered going to his job and having to run AutoCAD on like a spark station and so the idea that you could take that software that needed such a huge computer like not a decade ago and now you can put it in your browser is an incredible incredible thing so when I talk about web assembly I'd like to try and motivate it when I define it so I say it's a technology that invites new types of applications written in multiple different language to be discovered and distributed on the web perhaps you can call me a millennial but I personally think that it has been relatively proven that the web is by far the best discovery and distribution technology that has existed to date and so if you want someone to use your thing read your information do whatever it really needs to be on the web and right now because of the web's capabilities there's some things that are just literally excluded from it because the browser and the web are literally not capable of being able to include those very performant intensive applications and so now what assemblies like no come on in the web is also for you so you might actually realize that this is not a new idea at all does anyone recognize these has everyone updated their Adobe Flash No yeah so this is not a new idea in fact it's an incredibly old idea so Adobe Flash is that big red F there this did not really have a logo and so it's kind of an interesting one but Google used to have something called Knakal or and you could today at a portable Native Client called pinochle and this was an attempt to do that as well and then of course we had Java applets and all of those types of things so why web assembly are we just repeating the same things that we did before is this a new flash and so again I would just remind you if we take a look at this this is all the browsers coming together web assembly has been formed through the standards process and continues to be we'll talk a little bit more about that later but this is like what if Adobe Flash was something that everyone agreed on was an open standard and was open source and was inherently built into your browser so as long as you keep your browser up-to-date you should never get a little pop-up that asks you to update your web assembly because that would be incredibly embarrassing all right so whether somebody's exciting because it's inviting these new applications but why is this important why is webassembly able to invite these kind of new applications into the web and it's largely to this idea of speed and size webassembly can go fast and it can be smaller than javascript and that's kind of the main idea now I want a caution with all new technologies there's this question of like well how fast is it and so we're definitely in a situation today where there are certain applications because browser engines are really awesome like v8 optimizes the heck out of things where JavaScript will actually be a little bit faster you know the browser's now have to write web assembly optimization engines and they haven't done that yet or they're working on it but in general web assembly is going to be relatively faster because it's less code it does not need to be interpreted because it's compiled and it's going to be smaller because remember I said it is a byte code so it has lot less instructions again wouldn't want to be writing it from hand because it's very unpleasant but one way to be faster is just to be less code and so web assembly is less code but instead of me telling you all of that in an abstract sense let's talk about a specific edge case so Mozilla is one of the frontrunners in developing web assembly and getting it out there in production and so this is a blog post written January 2018 so again this is like OG web assembly days by Nick Fitzgerald who I work on with the rest web assembly working group with and he wrote an article called oxidizing source maps with rust and web assembly this is a super awesome blog post and I always show this graph so these are a little maybe hard to see but the orange dots are going to be measurements of JavaScript and the blue ones are measurements of web assembly these are all in milliseconds and then across the bottom the first two are chrome the second two or Firefox the second two are Safari so beyond going hey javascript in Firefox what's going on there what you might kind of immediately recognize is like oh cool like the blue ones take less time than the orange ones the webassembly is faster but that is not what is interesting to me in this graph is anyone here on call on peter duty no all right so I used to babysit a whole bunch of node processes when I worked at NPM for the NPM registry and this graph makes me get really excited about web assembly cuz check out that standard deviation right oh my gosh the performance of the web assembly is so much more predictable can anyone guess why garbage collection so what does it really does not currently have a garbage collection memory management in Java scripts gonna meet garbage collection and it's gonna be a lot harder to predict but because web assembly does not have that it's gonna be significantly faster and significantly easier to predict its behavior and so I think that over time we'll see that web assembly is more consistently faster than JavaScript but again the killer feature really is its predictability and I think that that is really great all right so immediately after posting this blog post because it's the Internet another engineer who are who are really a respect but I'm very bad at pronouncing his name so I'm just not going to his Twitter handle is M R Aleph that's easier he immediately wrote a blog post using the classic kind of meme phrase maybe you don't need and so maybe you don't need R Us and lazon just beat up here J ass and if you are a JavaScript developer and you want to learn about v8 optimizations read this blog post because it is amazing however all of the things that he tells you to do to make your JavaScript faster makes your JavaScript inscrutable it is impossible to read it is very difficult to maintain but you can learn a whole ton of cool stuff about how things get optimized and so Nick followed this up by saying hey you know speed without wizardry when you can write an application in web assembly you can get this kind of speed in performance but you can do it without having to use all of these fantastic optimization hacks you can kind of just write your code the way you would write your code and by using web assembly as this compilation target you can kind of get that great stuff that you get from the hacks sort of for free and what you might be realizing here is that there's a sort of sense that JavaScript and web assembly are at odds how many people here have heard that javascript is going to die because of web assembly all right I'm gonna say it like eight times in this talk but I just want to say it now that's not true and it's not what web assembly wants to do so web assembly is not a replacement for JavaScript in fact it is going to be its complement and the entire rest of this top is going to be about an intense amount of effort from a relatively small number of people to work desperately hard to make sure that web assembly can play super nicely with JavaScript because we believe fundamentally that is how web assembly is going to be successful and we'll talk more about that all right so we fundamentally need that web simly needs to interoperate with JavaScript how many people here regardless of what I just said think that web assembly should kill JavaScript who's gonna be bold here alright cool this talk is for you I'm so glad you're here alright so before I kind of talk about some more motivations let's talk about technically what it means to make web assembly played nicely with JavaScript so the first thing is actually kind of a little bit basic which is like web assembly needs to be able to store and work with JavaScript objects okay maybe that makes sense we'll talk about the challenges there and then additionally javascript is very much an ecosystem based language right we need to be able to interact with the JavaScript ecosystem via modules and workflows particularly things like NPM and bundler all right and so when I talked about a small group of people this is the rest webassembly working group we meet weekly and we post all our videos on YouTube so if you want to hear these conversations please go check them out and we'd love for more people to get involved but let's talk about the work that came of this the word I'm going to be talking about is primarily work that happened all last years like a big year-long sprint to get this over the over-the-head all right so what I'd like to show you is I'm gonna demo writing some rust I hear the Internet is not going great and so I am very glad that I pre-baked something so I am not actually going to see demo to will use demo two today so one thing that I will is my little crib notes we've set up a whole bunch of tooling because we want people to get involved in this and so one thing that you should note is that with these three things fundamentally we can just get a hello world in rust wasm working and so assuming you have cargo and MPM you can also do this and I'll be posting the tutorials along with my slides alright so let's hop into demo two can everybody see awesome alright so if we take a look inside demo 2 if you've ever done any rough work what you'll see is primarily a rust crate package.json and rust is cargo tamil picking a markup language is hard if we can fight about it in the hallway but when you write rust you're gonna write your code in the source directory and so we're just going to open that up what so go into our source directory in here I just have a Lib some utils that we kind of baked in for you alright let's hop into this before anyone comments on it yes I use vim with no syntax highlighting it's it's fine cool alright so this is our live dot RS it's got 19 lines of code the first nine basically shouldn't matter to you or doing some cool stuff to make sure that you're allocating a little bit less memory but those are all just nice to haves the big thing that we have in here is our russ code that is going to be using a very important web interface called alert who can guess what this what this would do if i ran it in a browser anyone have any idea it will poof it will explode your computer no yes it's gonna pop up and alert and it's gonna say hello demo too which is you know not all that interesting but if we take a look at this code there's some interesting thing is happening here we're using this as the kids call it hash tag bracket wasm bind gen which is called an attribute in rust to kind of mark the touch points of where we want our rust to talk to our JavaScript and so if we look at 16 through 19 we are creating a function called greet and we want that function to available in the browser so from JavaScript I want to be able to call the Greek function and that Greek function is going to call alert but guess what rust doesn't have an alert function at all but the browser does and so we need to tell our rust which will then be compiled to web assembly you don't have this here but where you're going expect it it will be there I promise and so from lines 12 through 14 we've created an extern block and inside there we can just list our function signatures for the things that we expect to have and so here I expected to have an alert function that should take a string and you might see that that type is a ampersand STR and if you've done rust strings are a little weird I'm sorry but that fundamentally just means it's a string and so by doing so we're able to compile this to web assembly and it's gonna make that greet function work and it's also good to mean that what I call the greet function it's gonna go look at my browser for the alert function and call it with the string that I constructed in my web assembly if you don't know how that's working one that makes a lot of sense to that's what this talk is about but I wanted to show you it working before I explain how it works all right so here we have our rust and let's compile this to web assembly so we'll get out of here all right in here so I have pre baked this because I hear the internet is very bad but what you would do is you would run a tool called wasm pack which is the tool I wrote which basically says hey I want you to make me a web assembly that I don't want to like think about it that hard and so why doesn't peg does almost all the thinking for you and so you would run wasm pack build and wesson pack build is going to create this pkg directory here let's poke in there and see what's in there all right there's a whole bunch of stuff we got some JavaScript we got some web assembly we have a package JSON and we get some time we got a types file in there that's pretty cool so just for people aside if you love typescript web wiesen pack will generate type files for you automatically but it's also going to build your wasm and that's the wizened file right there demo to underscore BG but you'll also notice that we created some JavaScript and that javascript is very very heavy lifting and it's going to allow you to interact with that web assembly we'll talk more about that in a second but let's see this working in real life all right so let's leave our pkg file or directory and then we'll go into the dub-dub-dub one alright in here it's got a whole bunch more we've got a web pack config if you don't like that please know you can use web assembly without web pack it's just nicer with web pack people have opinions I got some other stuff in here but fundamentally we have an index dot HTML and index is I'll quickly show you the index such as HTML nothing nothing really fancy to see here you see that we're loading something called bootstrap JJ s currently webassembly needs to be loaded asynchronously and we thought hey we always know how we need to load it why don't we just create a template so we load it for you you can also load it yourself but all bootstrap Jas is doing is loading that web assembly for you and then in index J s alright we can see that we are importing as wisdom from demo to and you might notice that we're prim porting from demo 2 which is actually a JavaScript file so we're using our web something via JavaScript and we're calling wasm dot greet so that's a small tour of the code let's pop this open I'm gonna get should be able to run serve just here pop it up oh no did my demo not work that's terrible oh right I need to change one thing no that's correct oh no the demo gods hate me alas that was supposed to be a beautiful amazing alert message that we all really really wanted to see I know that's brutal what the heck no that should all work alright well I guess you'll just have to trust my head it works cuz my demo is now not working even though it just was do I need to npm install' oh here we go there we go I did the wrong thing yeah yeah an alert message has never gotten that much applause ever before yay for folks who are wondering what the issue was I have another demo where I just serve it as a static site but this one I needed to make sure that the webpack magic happened and so I should have run webpack serve instead of just serve but yes here we go we've got some stuff working hopefully this was a deeply compelling and not at all naive example that will make you desperately want to know what is going on under the hood here because it turns out it's a lot all right so that is the thing that we all worked so hard to make happen and well that was of course a very naive example there's a ton of things that people are now building in Rustin webassembly that are not naive and are actually quite big and our production level applications and it is super cool but again this is kind of where we started because the stuff that's happening under the hood is pretty big alright so wise and pack is the kind of orchestration build tool but under the hood we're using a tool called wasm bind gen how many people here think that bind gen sounds like city in Germany and not actually a technical tool at all yeah so fundamentally bind Johnston's for bindings generator and what I'm gonna do is I'm going to talk about how we generate both rust code and JavaScript code while compiling two web assemblies so that you can talk to your web assembly as if it is JavaScript and then I'm gonna tell you why all right so again rust web assembly JavaScript so oh hello anyways so one of our primary design principles is the idea that web assembly should be an implementation detail web assembly is super super cool but almost all of the things that are super cool and technical probably are things that most people when they're using it should never even have to think about and so our first real belief was that web assembly should just act like a JavaScript module we should just be able to interact with it like a module you shouldn't really have to know whether or not there's j/s or web assembly in there and so when you're originally thinking about compiling rusta web assembly you may imagine that the process looks a little bit like this right you've got some rust you use cargo you compile it to web assembly and then just kind of throw it into the lands where you heard that web assembly is supported which by the way web assembly supported in all of the major browsers in addition to standalone run times and nodejs but it turns out that this doesn't work super well how many people have any type of JavaScript or web application static site on the web all right keep your hands up if it doesn't have JavaScript in it well know people put their hands down already it's got JavaScript I know it does all right this is really what the web looks like right so there is a universe where people believe that you're gonna take an application compile it to webOS only just throw it up on the web and you don't need to interact with JavaScript at all but very few people actually have the privilege of being able to write a greenfield project and the vast majority people are dealing with legacy code and legacy code on the web is written in JavaScript and so when you have a universe like this this is actually quite complicated because the web assembly cannot talk to the JavaScript very well and so what we have created which I'm going to explain today is how we take your web assembly we jam it into a JavaScript module then when you generate a whole bunch of JavaScript so that when you send it over to the browser everybody around it all of the other Java scripts just like hey cool this is a new kid and he hangs out just like we do all right so again to reiterate we really need to interoperate with JavaScript and this is why this is module accounts I used to work at NPM I don't know what is going on recently and it's like I took this picture today and something happened with the stats I don't know what's going on but it doesn't matter what that last little huge jump is NPM is clearly one of the biggest packaged ecosystems that exists and regardless of whether or not you think it's full of garbage or not I don't really actually care it turns out that a ton of people are using this there are around 9 million JavaScript developers in the world a strict I did a search for how many JavaScript developers are in the world and then I just average the first five numbers I found so I don't know this jives will only believe though the web is a big thing we've already talked about what a delightful discovery and distribution mechanism it is it does not surprise me that there's a ton of developers who are behind making that work right and what I thought was most interesting is that at least on the couple that had like the next languages in them it seems like is around 2.5 million more than whatever they decided was the next most popular programming language so there's a lot of JavaScript developers in here how many people are hiring managers in here all right how many people who are hiring managers have to hire JavaScript people right yeah okay and it's also because there's a lot more of them so there's a lot easier to hire it's a lot easier to find a JavaScript developer than a Russ developer and finding a web assembly developer as I said 10 years experience right here no I'm just kidding so there's a lot of JavaScript developers in the world which means that if you really want web assembly to be successful you need to make that a tool in their toolbox not a tool just for people who want to write systems programming languages and think that the lack of type safety and JavaScript is a huge security problem all right I know that you're out there and I'm coming for you all right javascript important and web assembly will only be successful if we can make sure that it plays well with them all right reiterating that so as we move on from the idea that we really need to interoperate javascript we can talk more about our implementation details and this is where I put a lot of code on the screen and I try and do color highlights to make it easier but I also kind of half expected to have my slides here so that I don't have a pointer so you're just gonna see wild hand gestures now all right so fundamentally with this idea that brusca compiled to web assembly we've wanted wasm support to be unobtrusive right you should be able to write a Russ library that someone could compile the web assembly but also could like just use in a normal Russ program and it shouldn't be that implementing web assembly support would be so huge and obtrusive that it would like make it very unpleasant to have like a multi-purpose crate crate is what we call packages and rust I told you the puns were bad anyway so we believe it should be unobtrusive and as you saw from my demo what we've been able to bring it down to is the idea that you're simply going to be annotating any type of public function that you wish to export with this wasm bind gen attribute and that is the vast majority of what you're going to have to do alright now here's the big crux right I've been talking about web assembly needs to play well with JavaScript I haven't really told you why maybe it wouldn't right we need to work with and pass JavaScript objects into web assembly but web assembly doesn't support that at all currently web assembly only sports integers and floats it only only does numbers is how I like to say it and so maybe you're gonna like put your nerd glasses on and push them up a little and go well Ashley any type of programming could be expressed in only numbers right of course it's computer science but I'm just like uh-uh nope that that is not a game that I'm here for particularly with web assembly being something for the web I like to describe web development as fancy string concatenation and I'm I know I'm not wrong uh-huh I've been a web developer for a while but if I had to take every single string I ever needed and convert it into a whole bunch of numbers to send it over a boundary and then bring it back take those numbers turn them into strings that sounds like a whole bunch of work and I'm lazy who else here is a lazy programmer good this is a value being lazy is good about computers not about people though note that all right so fundamentally what our desire was we need to enhance alright the ABI of wesen modules like I never thought I'd be saying like JavaScript has a rich type system but if you take a look at web assembly like okay it's relative here but JavaScript definitely has like a significantly richer type system than web assembly so we kind of need to enhance that alright and this comes down to the question of how do we shoehorn JavaScript objects into au 32 for wasm to use and I am going to do a short tour of how we do that today all right so web assembly is also very interesting because it has something called linear memory which is to say the way it thinks about memory is that it's just one big array this is not really actually a simplification in any way that's like kind of just really what it is one of the things that I like to point out when I start kind of doing more like low-level programming is that it's not actually harder I think it actually just gets simpler and just way more tedious like very very tedious but the model here is like it's just a big old giant array and we've got to put stuff into it and take it out and the only thing we can put in is numbers okay by the way this is I have like a side operating system project and we kind of like make the VGA driver the same way you can get close to the metal just playing around with arrays it's fun alright so what we created with Rason bindin was what we call a polyfill for JavaScript objects in web assembly so you may be looking at this slide and go wait Ashley why did you cut and paste two little code snippets are exactly the same they are off but one very weird but load-bearing punctuation which is the ampersand and so I'm gonna quickly just run through because of this linear memory the way we handle passing JavaScript objects in web assembly is going to be different depending on whether or not that object should live for a long time which is the one over on the left the one without the ampersand or for a short time which is the one with the ampersand alrighty so again we need to remember that we're dealing with one big array and so what we end up doing is actually just making one big array in the JavaScript that we generate and so I'm gonna be showing you both generated rust and generated JavaScript and you'll see this consistently but fundamentally like I am not lying to you we're just talking about big ol arrays all right so let's talk about short-lived JavaScript objects so here is a bunch of code so what we'll see here I wish I had like my mouse pointer it's kind of tricky so the rust that we're gonna write is where I have this food out RS we have our foo function I don't like using food for examples but this is actually supposed to be as generic as possible so it actually I think kind of works here and so you have that annotation and we're writing this because fundamentally the typescript or kind of JavaScript interface we want is we want to be able to just kind of export this function and it can take any sort of JavaScript value whatsoever and so in order to make this happen you're gonna write that rust and then this is what was and bindin is going to create the first thing it's going to create is this generated rust and so what you'll note here is that your original function still exists and it's completely unmodified it's a pub FN foo still right there however right below is a very funky looking function we can see we have a pub extern c all right so this is we're kind of defining this boundary and the function actually has a generated name so if you go and use the tool chain that I just showed you the generated files you're gonna see like a check sum in the name you're gonna be like I hate this function signature it's it's a gross number and that's because it's generated and you shouldn't touch down files but here we're gonna be exporting this as foo that will be the name still but what we can see in here is that we are actually going to be grabbing some data from our giant array we're passing it an index and that index is going to be where all of our file for our string our data for our string is going to be our data for a J s value and so you're like okay Ashley where what do you mean that data for your J is value what is going on there and so what we can see up in Fuji is all right which is JavaScript that we also generate all right we're first constructing this new array which is going to be our heap for short-lived J s objects on the stack we're actually going to treat the first set of that array actually kind of as a stack all right and so when we add a borrowed object which is going to be this object that we're trying to call our function with we are going to pop that right on there and it's gonna operate the same way as a stack you push from on you push them off all right and fundamentally this means that that value is not going to be available once that function gets called right it can't be long let's only gonna live for the duration of that function all right and so I wish I could point a little better but in our JavaScript and this is the JavaScript function you end up calling as an end user export function foo all right the first thing that we're going to do is we are going to create this index and this index actually calls this ad borrowed object right so we have this argh 0 all right and what that's doing is it's taking the object all right and it's gonna pop it on to the stack that's in our heap array and then we're gonna use that index all right we're gonna call foo with that index it's gonna pop that right off it's going to do the thing it needs to do and then we're going to immediately erase it from our array that's what's going on in the final a section and so what you can understand is we just have a big ol array we have this JavaScript we're going to add the borrowed object alright and then we're gonna pass that index of where we've stuck it in memory to our Azzam function and then our wiseman function is going to use that index to pull it right back out and be able to call it but fundamentally this memory is being managed as an array and we're really passing around indices and what you'll see when we're talking about the long one is that you're going to professor going into season lengths cool yeah and just to kind of like check in on exactly what's going on here right we wanted export function foo the Foo function that we call comes from generated J s all right that generated is gonna be calling wasm dot foo and that wisedom dot foo is actually a generated function from rust which then ends up calling the rust that you wrote man that's a whole bunch of stuff right that probably didn't make a whole bunch of sense you have to kind of read these things over and over a couple times to get it it can get a little much so I got some some arrows but let's not talk about those all right and so for long-lived javascript objects I won't settle on this too long but what I do want to point out is that for these instead of kind of popping them in that little stack we've created at the front of our array we're actually just going to be pushing them onto that array and they're going to be staying there for a lot longer and again to access them we're gonna be saving an index and a length so that when we call it from webassembly whatever something's going to go look into its memory figure out that in to see that javascript passed it grab all of the data and then pull it back out but everything is stored as just these numbers in this array and you're passing around indices and likes to do so all right this is a bunch of code and then additionally because it lasts for a long time we actually have to kind of manually manage the memory by removing it from that so for long-lived JavaScript objects this gets a little bit trickier and so as you're writing web assembly as a practical takeaway you kind of want things that live short and you don't want them to persist as we go back and forth between rust and JavaScript because we call that the trampoline and like crossing any type of border it's complicated and it takes a long time all right but let's try and use something that maybe is a little bit more concrete like we don't want to talk super generally about how we're crossing this boundary let's talk about just exporting to JavaScript right so if we export to JavaScript let's say we have this greet function right so I want a wesen function that works like this I want this greet function I'm gonna say alert it's gonna have a name all right and so I'm gonna write rust like this this is the external ready saw and fundamentally we want to be able to use it in JavaScript like this so what happens all right we write this and then what Russ does and fundamentally what you need to realize about what why hasn't by and John is doing is it is writing a wrapper around your rust and then it's also writing a wrapper around your web assembly in JavaScript to make these things play together and so the first thing again we see our greet function but then we see that generated greet and again it's taking that pointer and it's taking the length and again that's how we're noting what that data is and then if you take a look at alert we're actually creating a placeholder and we're being able to pass that data into the placeholder with webassembly knowing that it's going to have to call that from your browser all right and then when we look on the JavaScript side we have this JavaScript that we'd really like to write a nice simple interface and fundamentally again we see this manipulation of the pointer which is really just like the index of where it is in the array and then the length of where that data is and so this is what it is called and so I would encourage you as you use this tool chain if you ever want to peer under the hood and take a look at this code you should try and understand at least kind of how its kind of stringing everything together because fundamentally as we move into web assembly being something that everyone is using the more you know about how this works like it's just array manipulation and there's definitely ways to do it more efficiently than we currently are and so this is a place where I think speeding up web assembly could be made so much better if we just had more eyes on it all right so again you'll see when you create something like this these functions called path string TASM get string from wesam and we are using text decoder right now to kind of take those from strings but the numbers take them from numbers and put them into strings now what you need to realize is this was a whole bunch of work and this is just strings right now wesam bind JNT supports literally every jsapi Web API and the echo strips standard for being able to convert like a rust function signature into a JavaScript one and so there's some really beautiful moments where you go whoa like what how do we teach rust to pretend it's doing JavaScript inheritance because we do that but there's a lot of very interesting lessons in there and that would take unfortunately an incredibly long time to explain but the real thing here is to say the best part about all this random generated code manipulating arrays you saw some unsafe blocks in there and probably didn't know what they were but assume they were bad and you're not wrong the best part of this is as designed so that you literally never have to think about it if you don't want to if you just want to build cool web apps and you want to be able to write it and rust then you want to talk to it like Java Script you just can write like you can peer into the box like this bird here and maybe you see what you did something you don't like maybe you did not like that last 20 minutes right it kind of bummed you out just close the box just close the box it's totally okay but sometimes it's fun to open the box I love this gif it's just this is how I feel about looking at my own code yeah it's just like nope close it cool all right so what why why would we do all of this weird work like this was so much effort to make webassembly talk to JavaScript like what why would we do that now that was like so much why would we do it and it's because web assembly isn't done my favorite thing about the web is that we are still building it and the cool thing that the web is that you can help people build it web assembly is just getting started the thing that's been released is not final web assembly it's the MVP really and so I don't know if you know Lynn Clark but also till Schneider Hyatt Luc Wagner I've worked with them all at Mozilla and they are brilliant people Lynn loves to draw code cartoons about web assembly and they are awesome and so web assembly has a lot of growing to do in fact this is kind of a map of the growing that the web assembly wants to do but the interesting thing about languages and their growth is that in order to get people to be willing to participate particularly like a larger group of people you have to give them a way to use it right and so I am it this is very close to me but the keynote here is called we are not waiting and it's about the open pancreas system and it's about why type 1 medics are not waiting for this cool technology to like become approved by the FDA they're just starting to hack on it and use it now and I feel that way about webassembly right now which is I'm not waiting like eventually they're gonna build something but it's really cool that I'm alive right now and that maybe I can help them build the thing that I think they should build or like be able to participate and so we need to get people starting to use it now the best thing about wasn't by Jen is probably in like five years it will be completely unnecessary and that's awesome like that's so cool to build this type of technology we're like you can already tell it won't be necessary but it will have helped so many people get involved so they could have helped make webassembly a tool that everyone's gonna love like a lot of people in here really hit it on javascript right and it was kind of hard to get involved in javascript when they first released it right it'd be harder to be mad at it if you had an opportunity to participate that you didn't take right this is that moment for webassembly and so this is your opportunity to get involved and a really great way to get involved is just to try it out so you can help by joining the web assembly working group we spend a lot of time working on this stuff tooling what is the thing that we should build right now web assembly is there's a lot of really awesome people in it but people are really focused on the technical details and they're not at all focused on the part about like how people use it Adobe Flash succeeded because it was an amazing developer experience right it exceeded for so long because it was such a good developer experience even despite like pretty much everything else being a pretty bad design decision on their part so I won't waiver somebody to seed which means people need to be able to use it there's also web assembly org you can submit feedback in issues and you can join the community group as well these are all open to anyone but and so I'll give you this I have a lot of passion about this and you probably are like why does this lady care so much about web assembly she loves it what's the deal alright so I care a lot about building tools that people use this is a tweet of mine that went viral and you know it went viral because there's a typo in it but the the cartoon says I like this painting because it has a bench and I feel that very heavily and the cool thing about jokes is like it's hard to know if they mean it positively or negatively and when people like the joke you still can't tell how they feel about it but to make it clear I build benches and that's what I care about and I think that that's the way to make technology that's successful so but the html5 design principle spec says in cases of conflict consider users / authors / implementers / specifiers / theoretical purity and I feel like we should all follow this design principle all the time which is to say I want people to use this tooling and so we're gonna do that huge song and dance with that array because I care more about you being able to use it than the pain of actually implementing it and so I want to do a small tour of these tools that I've talked about before I leave first off we have wasm bind gen this is a very fun codebase if you want to read the test they're like organized just by the types of JavaScript API and like literally they're string concatenation with how we write their JavaScript and so it's just fun to see that this is why as impact this is the tool that makes it so you don't have to worry about this tool at all but it will do it for you which is super cool and you can publish your stuff up to MPN if you could like to do that additionally if you were wondering if we can turn rust futures into JavaScript promises we can you can use this to do it it's it's not it's getting there we just got some good news for rust async so it will be better soon but you can do it additionally when I show that example I wrote an extern block and wrote the alert and if you maybe in your head when oh shoot do I have to literally define every function signature of every API expect to use in my rust no but at one point you did and sucked and we were like we got to get rid of that so this will do all that for you so if it's anything in the Ekman script standard for browser jeaious this will just make those for you can just import the function signatures you can spit I want to use this and it'll be fine we do the same thing for web sis but just because a lot of people don't know the full first how many people know what a web IDL is fair pretty much no one does like what if what if the spec actually compiled to code it's kind of the pitch for web idea but it's it's a it's a way to programmatically define the web api's and so we actually generated web sis with some difficulty but we pulled it off how many people here have heard that web assembly can't access the Dom all right if you get into web assembly people will say that it's true it doesn't have native access but with web sis you can and that's pretty cool and then lastly what if react was written in web assembly or just little pieces of it we're building this it's called glue check it out and then lastly I got to pitch my company I guess if you want to write rust and web assembly you can also do it on cloud floor workers and I made another CLI with another crab logo because I'm insufferable alright so to wrap this up web assembly should be an implementation detail most people should never know they are even using web assembly and I think that that's its power and not necessarily a curse though certainly growing the technology makes it difficult we're gonna see a lot of really cool things come onto the web and it's gonna be unlocked by web assembly but realize that with this power I want to make sure it's inclusive to all types of developers and not just the types that want to it's fine I can convert all my strings to numbers I don't care tech person I want it to be accessible to everyone and so that's why this developer tooling really matters so let's go forth make amazing things that expand the web platform or if you came here because you didn't really care that much about web assembly try to teach some languages how to talk to each other you will learn so much translation projects are some of the best possible ways to learn languages I know I learned about both javascript and rust working on this project and so if you're looking to get to know languages better translations and awesome activity thank you very much [Applause]

Channel: InfoQ

Views: 9,603

Keywords: Rust, WebAssembly, JavaScript, Development, Web Development, System Programming, Dynamic Languages, InfoQ, QCon, QCon New York, Transcripts

Id: nvLw_XKlZaU

Length: 53min 14sec (3194 seconds)

Published: Sun Sep 15 2019