 Hi, who of you hands up who of you is here? with the intention that they want to hear a common voice talk about you know to TTL accidentally here. Yes, sir about that. That's not gonna happen So if you were here Yeah, if you're gonna sneak out now like that's all right like if Who was here for the Vab assembly talk earlier today? All right. All right. All right So I hope you're ready for more than So Yeah, thank you. Yoana for the introduction is as you mentioned. My name is Flaki, which is the short version of Smorzanski ishtvan I'm originally from Hungary I work with Mozilla as developer outreach and the tech speakers program and And a bunch of other stuff My my in my free time. I do a lot of IOT and Harvard stuff So so if you want to talk about that I'm really happy to chat about those things as well And yeah, the talks title is speed without shenanigans Which is gonna be mostly talking about, you know, how web assembly became a thing Why did that assembly became a thing who like why did we need this thing in the first place and How did you get your point man? It actually seems to be that it is going to be a big part of the future of the Vab So I hope you You join me on this journey So the story really starts around 2012 JavaScript has been that it is de facto language of the Vab as we know it But basically JavaScript was used to be this thing that you know powered a Scripting engine inside a web browser So, you know, you could make your mouse cursor like your like will like tiny blobs follow bubbles follow your mouse cursor or or something like that and You know, it didn't really need a whole lot of computing power, but it started growing. It started growing Gabrielle already mentioned how you know the improvement Of the features that web browsers would provide you like the the sheer scale of what Was possible in the browser was also making you put more code into the browser This eventually resulted in, you know, a big boom and code inside the browser and a huge growing need for This code to be faster this code to be more versatile in 2012 the V8 engine got released that kind of Started a third browser war between the browser vendors trying to, you know Trying to Kind of increase the speeds of their JavaScript engines as their competitors would You know improve the engines and we don't you know, the other browser vendors that ours is the fastest JavaScript engine What do you do now and that's kind of you know, also came out a lot of research a lot of knowledge sharing But basically ended up with a boom in JavaScript execution speed and This boom didn't falter for several years until at some point and 2019 Sorry 2015 Browsers started thinking about hey, this is good like the increasing amount of coding the browser is cool But we have a lot of pre-existing code bases that are not written in JavaScript And as you know code bases in the browser group people are like we kind of want to reuse the code that we use other platforms and somebody came up with the crazy sounding idea of how about we actually just We instead of manually, you know porting code from one device to the other in the web We just make machines to do this like make machines translate from some one language and Generate coding JavaScript. So basically trends compile like lower level languages into into browser languages and this is how asmjs came along and this is How I'm scripting came along. So if you're also here for for the for the previous talk and scripting was one of the defining factor how asmjs came to the scene and started this this journey towards you know Enabling browsers to do low-level code run low-level code in the browser itself and You know asmjs was just a format the browsers figured out that would be easy enough Asmjs is very tricky because it it is still JavaScript It's just a very weird JavaScript that you definitely wouldn't want to write by hand. Some people still do but you know Some people you know do birch or shit anyway so it was not meant to be you know Written by hand but generated by you know the megabytes from low-level source code and that idea of you know Making it closer to what a machine representation of program code is It would actually be easier for browser engines to optimize it So what would happen is a the mscripten or any other compiler There were some other compilers, but mscripten kind of became became the defector standard of taking some low-level language a code base written in C for example C++ and Generating JavaScript source code that kind of looked like machine code But it was still valid JavaScript code and browsers would detect this JavaScript code and Which realized that hey, I can actually easily optimize this and Optimum create an optimized version of it that could work Prefast even in browser So the whole whole idea you get is like one of one part of it is code reuse But also one part of it is it's just wanting to do more on the web like these bundles would end up you know hundreds of magnabytes on some some some occasion because they are still JavaScript they would take a long time to parse and People were you know, but they would they would be doing some amazing Amazing things like you just seen this demo if you have been earlier here Like there are full of 3d engines running in in the web browser And that was Possible with a SMGS, but people started seeing the limitations of this format and this idea And and wanted to do more, you know, you put a hundred megabytes of JavaScript in the browser You made something 3d. You wanted to do 60 FPS. You wanted to do 3d 3d I wanted to do anything else. So the games industry was a big supporter of Making all these compile to JavaScript compile to web languages happen It's easy to see why so it's easy to see why this happened Developed today is one of the biggest publishing target. You can reach the largest audience It's been like you have a you know a unity engine or you have a some some low-level engine that could you know Generate apps for Android generate apps for iOS Maybe desktop apps even and you would be you know But the easiest way to reach my the easiest way to reach my My audience is actually just send them a link and they open it in a web browser and they can play my game and So this became this kind of cross-platform reach became a huge drive behind That implementers trying to put this thing And push this thing for a long Yeah, so as Dave Herman used to be leading the Muslim research groups as the the main reason I care about the web is because it's the world's biggest software platform. That's not own nobody can tell you That I'm not allowing your app into my app store because you're gonna release a link for it I mean, you know unless you are like an oppressed government and they were literally going to be like shutting the The access to your website down but apart from that nobody could tell you that you're not able to distribute your content And it's easy to access as well. So it made a whole lot of sense So all these All these things are seated by all these all these sourced sources and powers like the needs for For improving this this kind of language that was asmjs that developed kind of Increased the need for for for going further away and and the interesting part about this is Asmjs was a thing that it's still JavaScript But your JavaScript engine in the browser could optimize it in a way that it could run faster as fast as twice as slow or even 1.5 times as slow as As native code there are limits to how far how far you can go But that the summary today can run very close to to whatever a native code Could execute in the browser the problem was not that the problem was the other features of this asmjs thing That made it cumbersome to use and problematic one of the things that I mentioned was actually That this was still JavaScript Which means that it needs to be parsed as JavaScript and you know as you might know a parsing Something is always going to be tougher than if you're going to be creating an intermediate format for it That's purpose-made that is going to be parsed for some of these code actually takes faster Takes take took longer time to parse the JavaScript blobs Then to actually compile it to the to the native representation. So you would the browser would spend your seconds On just the parsing the downloaded 20 megabyte JavaScript file. So they were like we need something else we need something different and Eventually fueled by a lot of these constraints that the old language had web assembly was bored So this is you know, you got an overview of how kind of like web assembly is not You know somebody came up with this idea and they're like there's a lot more to unpack behind it There's a lot more, you know efforts in trying to make like low-level functionality work in the browser's PN ACL and a bunch of others But basically it didn't came out from nowhere There was like a clear need for people wanting to do more in the browser and web assembly seems to be one of the best answers that we can give to you to these problems today One of the reason for that is actually that it's a joint effort. I Joint effort across all four browser vendors major from browser vendors Microsoft Apple Google and Missoula led to this effort into web assembly being released Pretty much at the same time in all four major browsers and then newest versions of major browsers Also part of this, you know, when you try to coordinate for for the at least three of the biggest companies on earth and like, you know for the For huge internet companies on earth like you're gonna have a lot of different different agendas So they are like, okay What's the minimum that we can ship to a browser that could work that we could agree on and Just to make sure that this thing happens And that's the this is what we call the bad assembly MVP the minimum viable product The minimum useful web assembly, you know core that you're gonna be able to extend and build on in the future to create extra extra things and So basically what they did is they ditched the JavaScript e representation to create in a binary representation This binary representation can be parsed into like kind of a S tree. So it's still transparent It's still easy to understand, but it goes through much faster in the wire But more importantly parses almost instantly browser engines currently Compile web assembly as it comes down the line in the internet So as soon as the code arrives pretty much, it's almost usable And you know, they started using it for things, you know as MGS show the path You know, you could compile low-level things like the internet archive started, you know, uploading games online and People went even further, you know Hey, what if we could we could like re-implement the whole operating system and go as deep down Let's start there as long as we can compile C code base We can create shims for stuff like we can like re-implement the whole browser and like people went crazy with his ideas When the SMGS came out and web assembly actually gives you the tooling to take web assembly out of the browser Web assembly has a core specification that actually has nothing to do with the web It's actually embedded that this web assembly core specification is embedded and implemented in a web browser But nothing tells you that you have to use it in the web browser There is a experimental kernel called Nebulet that allows you to run web assembly programs Basically, it's a it's an entire kernel that runs web assembly code as it is user land So basically all your this Nebulet operating systems System is basically it's an experiment But it the only user land code actually lives in web assembly, which is great because web assembly sandbox That means web assembly is secured by default Against a bunch of memory access problems and issues that came up that comes up and need a lot of mitigation in traditional operating systems so this is just one of the things that shows you that It quite often arises a need that you need You need more performance. You need more control over whatever you are able to accomplish in your stack And this was the same thing for browsers, but this doesn't come doesn't come just for browsers This comes up in Node.js. This comes up in in other systems, you know in Python You want to do mathematical calculations? You're going to pull in a binary module that does mathematical calculations and that's actually compiled C code So you're not going to do the performance sensitive calculations in Python Like actual Python code, but you're going to implement them in a more effective language And just pull them in into the language of source This is exactly how you should think about web assembly and this is how web assembly tries to be it affects It tries to be the fix for the problem and you need more speed or you need lower-level functionality Web assembly allows you to bring that into the web sphere or the web browser and also other host environments that are embedding Web assembly for example, I already mentioned Node.js. Node.js is not a typical It's still a JavaScript embedding environment, but it's not typical browser environment Potential fix today a lot of the problems could be web assembly when you don't need to compile native modules to access low-level functionality High-speed functionality But web assembly is able to provide you with these and there are a bunch of stories already in the on the internet that somebody Reimplemented this one core thing in web assembly and save their company a million dollars. I'm not even exaggerating So there's already a lot of you know, it's an MVP Minimum viable product, but people are already exploring the edges of these systems and this is why it's important that When you try to dive in you try to get the lay of the land you're gonna bump into things like what muslim is doing is replacing some parts of the file files browser with with parts compiled to web assembly and Musil is actually doing this in Rust Which I'm going to talk in a moment Why that makes a whole lot of sense but basically there's already Decent results of how this is happening that a lot of you see on stage On the slides is a link to how Musil replaced some parts of the Firefox developer tools Which is which are actually written in JavaScript and HTML 5 Some parts of those they replaced with a web assembly implementation This is a source map parser and they had huge gains in in performance and its stability in this performance That they could achieve with a very straightforward rough code base that was very more understandable than the hacky JavaScript code base that was trying to make sure that the JavaScript engine is happy and performant stays performant and And there's this secret sauce in here if you ever been to the Rust dev room is it Last year and I think to tomorrow Is also there's a rush dev room here at Fossum. I could very much recommend you check that out even if you're never heard about like low level languages or or Just a web developer trying to get by because the rush is really trying to change the way how You are implementing performance sensitive code in the browser trying to give you a chance to To use some of the the performance characteristics that was limited to low level code the limited to you know native code to give you this power as a as a web engineer or JavaScript engineer and And How they do this if I The most important part of this is is that it provides you a rust provides you with speed Without the visitor tree last rust like I mentioned Can create a very straightforward code base? That actually compiles to web assembly and creates a very performant Output code using web assembly or even Like a fallback Asmgs implementation you are able to to generate a High-performing code that could replace parts of your website that are performance sensitive And there are a lot of already a lot of examples for this not just from Mozilla For example wordpress is trying to reimplement some of their infrastructure for their editing infrastructure in in web assembly or In rust and and providing web assembly output for it And there is a there's a whole lot of in browser out of browser use cases. They're already using this and I already mentioned that rust is an MVP and it's kind of this minimal Sorry, that is something is this MVP and this minimal thing that you can use to to make web assembly Suddenly happen across all the browsers because it was very important to make sure that you know every browser is on in on it But there is there's a future and you know as people start to experimenting at people already Oh, hey, how can I how can I access the the DOM? I cannot access the browser down. Hey, how can I? Access the garbage collector all these questions are raising being raised By people who are experimenting with the technology and trying to push the boundaries and there are answers to the crash The answers to those questions is that they are in the works The committee didn't stop it the MVP actually the MVP was something that was about to ship in browsers But they already had some of these laid down in the moment web assembly appears for end users They just didn't want to block on things that they just couldn't figure out or some things that they wanted Industrial feedback on so they put those ideas aside and they're like hey We're gonna come back then they have more implement your feedback more feedback from our users We're gonna see how these things to fit together and this is exactly what's happening today So this illustration is from link mark link mark is amazing she has multiple multiple talks and articles About how web assembly is changing currently the landscape and the browser And this particular talk is one of her layers when she lays out the land of what is implemented currently and one of the things that you need That people are usually asking for and also that we see To make the the web assembly ecosystem and the VIP web ecosystem in the first place Actually reaches full potential Like I mentioned access to garbage collector and a bunch of others on the on this roadmap some of these features are already like Implemented of browsers behind flags Firefox nightly can use some of the some of the functionality related to two types In reference types in in Firefox. So some of these functionalities slowly lending people are starting to experiment with those to extend the reach of the platform and Like to wrap this whole thing up like the whole idea and there's a lot of fear a lot of you know I also some people are curing this this idea long that The web assembly is here and you can finally ditch JavaScript You know, you're never gonna need it anymore and that's not the idea And you know, I keep telling people that I've been following the JavaScript language from the spec level For like several years now JavaScript has evolved as a language a lot and is Becoming much more more and more usable every day as every day passes and every new version of the specification comes out So you don't want you ditched it the specification and your JavaScript in general But job but web assembly can be there for you when some of the use cases warrant that you have a more performant core or like a more More portable code base across your projects and and devices that you could reuse and and and plug it into your job existing code base like painlessly and There's a lot of work going on into the rust programming language to make it a programming language to to To provide these use cases because not every JavaScript programmer is Is a little systems engineer with C or C++ knowledge? So Rust is becoming a good new starting language for I Gonna I want to learn a low-level language that will let me create web assembly That I could embed in these use cases or if you already know C or C++ or have code code bases is your C++ The ability for you to reuse them in these contexts is really what this ecosystem is aiming at And I think the projector really wants me to get off stage now. So The purpose of this talk is really to first of all to start it's to ask you to start experimenting and also to To get excited about the future Because a lot of these features as they land They're gonna make a big splash in the web ecosystem as we know them today and gonna make a lot of changes Exciting changes not bad changes, you know, but exciting changes happen in the future So the talk is online on this URL Which is super good because at the end of this talk, there's a lot of links and resources that you can Follow up because you know, I could talk about this the whole day, but there are better ways to To you get your knowledge in and there are two links here as well SL software because my Twitter handle if you want to tweet at me at Moss hex and the muzzle a hex blog is Where you can follow a lot of the muzzle a developer Outreach or dev rail team and where link lark and a lot of other engineers at muzzle I'll post about some of these upcoming features from the browser be that Firefox or web assembly or a bunch of these technologies So thank you Thanks so much lucky questions because we do have time. Yes. I'm coming I'm gonna do my 21 K of walking today here I'm beating my steps Hi Thanks for clarifying the context around the web assembly what I didn't get though yet neither from your talk Nor from the previous one is How do you actually use it practically? So suppose you have a Kind of a rust project that uses like a native UI say an endcurses UI or How do I go from you know like compile set a target to web assembly to You know like deploying that's on a web page Yeah, so basically they are the usual workflow is you have some source code base be that rust or anything else You compile the source code base into into web assembly of that assembly is a very limited language in terms of types So what it actually boils down to is basically you only have access to integers This is some of the stuff they're changing in the future But because all computers have is like binary numbers in their memory Every problem can be you turn into a problem that only includes binary numbers and like you know basically memory There are chunks of memory so basically what you pass into an auto get out of a web assembly program is like chunks of memory or chunks of bytes and This means that you have to serialize your JavaScript code Into a format that web assembly will understand it will do the computation and give you back something from web assembly That you can also like deserialize and like consume on your Application so this is the general idea is web assembly is a very limited operating It's basically a very limited instructions that tiny computer with limited Access to types or like variable types that that it has so basically what you know what when you write some code That code has to interact with the JavaScript or whatever front-end ecosystem in a way that that that makes it That makes sense Now this is something actually that the Rust team is trying to work on a lot And this is what I was mentioning with the rust and web assembly interrupt. You will actually see a link here Reflecting on rust and web assembly in 2018 The rust has an entire team that are developing tools for you that you are able to be using your rust types To access JavaScript objects and your JavaScript code to access rushed objects without having to write this boilerplate code That is going to do the translation from binary code to to JavaScript like types They actually created an entire ecosystem around this to make this easier So if you if you're interested more about this interrupt that that's a good good starting point to to go But also like the future is also going to be bringing a lot of the features that are going to make it easier to Define custom types like make web assembly us understand Structs or like custom try types inside that web assembly best things inside into and out of like web assembly There are more complex objects on just numbers. So a lot of these things are still in the future roadmap Yes Hi My question is what are the limits of web assembly? So for example What I want to do is I want to communicate with the GPU drivers API's yeah, so I think that's not possible. So limits well the thing is Web assembly as I just mentioned like web assembly itself has nothing to do with the web or the browser itself The browser is just an embedder of the web assembly core specification And what that assembly does is you pass it a bunch of numbers it like not some calculations very fast on them And just gives you back a bunch of other numbers This means that the only way to access the the graphics card From the web assembly application is you actually make some for example You use that GL in a web browser context or in some of these embedding context like your web assembly runtime will actually call Native language functions that it was going to be accessing the the native drivers So from a web standpoint web assembly has no access to anything Web assembly has only access to the things that you give it so it's everything sandbox. I'm sorry Everything is sandbox everything is sandbox exactly. Yeah, yeah So the only things that you can you get access to are the API's the DOM API's that you pass in But the problem is you cannot call those API's because you cannot you know the convention of the objects that you have to pass Into these API's you have no access to in web assembly And these are some of the things that are coming in the future to make this Accessible from inside web assembly instead of having to translate Between those using your platforms API's All right. Are there other limits? What do you mean by limits? So there are limits like 32-bit aggressible memory which is also one on the roadmap to change that I Can really recommend link large if you really want to like have a overview of what are the current limits And how are they are going to be? Improved a link large article that I linked to here Is a perfect one because it explains all these limitations that we currently have and what cases they do those apply You know a lot of like high computation Like problems are not impossible because of the the memory limitations of 32 bit like she explains there is like excellent way All right. Thank you my question just links to the previous one because my understanding was that For example all those demo that we saw in web assembly using again you using in jail, I guess Yeah, we're just mapping open open gel calls to web gel calls But as far as technically yeah, yeah, basically yes So you so you have access to web gel directly from web assembly or do you have to go out to go back to JavaScript and then call Good question. No. Yeah. Yes, you have to go to JavaScript Those a lot of those code they say is so what my best of what rust tries to do rust actually has like a direct output to web assembly Because of that you have to do a lot of those things manually and this is why the Ross that Ross wasn't project Sort of creating those bindings generators like again like you can read about this and that could take care of like doing this glue code At this job script look at that you will need the other thing like the other projects usually Sorry, usually use M script in and a lot of the M script in Architecture has already had these glue code made because as mjs was doing the same exact thing Yes, I'm just was also communicating with that GL like kind of like translating this to this like a bi of M script in and they had the shim in the browser the runtime basically the asm.js runtime that had these translations from the You know the native language that you're you're coming from which is basically open GL or like some open GL API output the mappings into web GL in the browser and Basically what you didn't have to worry about that because or you also don't have to worry about that if you compile with that M Script and because it has these shims built in in the future You might be able to Passing data structures Directly from your web assembly code So you could generate these data structures that you need for web GL calls Directly inside your web assembly code and pass this on to you like for example the web GL APIs So you could like skip these like JavaScript trampoline that you would need in general But currently you're not able to supply the arguments to these functions because web assembly doesn't know about those types that these functions accept So you still have to do like the translations the same way on the other way around if you're going to do input into your M script And if you're thinking about games all the networking all the all the inputs like keyboard and gamepad inputs Those are all coming from web APIs Why a JavaScript shim that translates those into some kind of web assembly Understandable data structures pushes it into the web assembly Audio is the same thing as as the graphics it you know That is how we generate some kind of sound buffers that it's going to transfer into the web audio API So all this like web assembly has knows nothing about the surrounding role Those are all web APIs that the same web API as you would be using but some tools like like M script and takes care of like your translation between the two if you're using a specific setup in your like C++ code base or Or if you if they already have those mappings defined and those the shims already exist Is it possible to use the rust and M scripting currently or it's just for so what rust does is rust kind of it outputs its own Thing so they usually don't reuse the shims, but they use they do their own So rust is actually a better The rust wasn't as a world is better if you're actually trying to interact with the browser Because they actually have JavaScript implementations Like JavaScript API implementations and a bunch of other stuff Re-implemented in rust so you can write your rust code and call JavaScript functions and APIs from inside your rust code And those are going to be automatically translated in the browser, but not necessarily for gaming use cases Except for you know libraries that have there is lying around I mean you can also like Merged the two volts and they just take some of these from from from the M script and repo and just try to make it work Obviously that will also work, but it's a lot more manual work Okay, thank you. I think there's a note. Thank you so much. Thank you