YTread Logo
YTread Logo

WebAssembly for Web Developers (Google I/O í19)

Jul 03, 2021
I'm Surma, I'm an Open Web Platform Advocate Developer working with a Chrome team for Google in London and today I have the great pleasure to talk about one of my newfound passions which is web assembly. You've probably heard of him. a little bit and you can hit me up on twitter if you have any questions in the future and later on my colleague deep down from the wisemen engineering team will talk a bit about the future of web assembly before we get started though I wanted to get us all on the same page because the web assembly is often very closely associated with c+ nuts, so much so that many people think it is about C++ when in fact web assembly is much more than that, many of the demos you can find online are about C++ and M scripts and that makes sense because M strippin is an absolutely amazing tool, but it's very important for web

developers

to realize that it's not just this Atlas and web assembly itself is really a really useful tool for have in your back pocket and that's what I want to talk about in this talk.
webassembly for web developers google i o 19
I want to show some other languages ‚Äč‚Äčthat support web assembly, how you can use web assembly maybe without learning a new language and then like I said Deepti is going to talk a little bit about what the future of web assembly might hold to make sure that everyone knows or we are here for this is what assembly dot org where we can explain what is web assembly is a stack based virtual machine and if you don't know what a web stack based virtual machine is absolutely fine but the important thing is that you You realize it's a virtual machine, which means it's a processor that doesn't actually exist, but it's been designed to easily compile on a lot of our key textures and that's called portability, so it's a machine. virtual designed to prioritize portability so that when you write code in any language and compile it into a web assembly, that code will compile to that vi's instruction set rtuality. to the machine and then those instructions are stored in a binary binary format usually in a dot wasm file and because that virtual machine is designed to easily compile on real processors this file can now be ingested by a runtime which in our context here it is most likely the browser the browser can convert that watham file into the actual machine code of the actual machine the browser is running on and then execute that code and from the beginning the web assembly was designed to make that process be sure so yeah you're running code on your bare metal but it's not something insecure we already talked about web assembly in the last post/out actually quite a lot it's a technology growing super fast in the real ocean maturing at a very impressive rate and we talked about how some big companies are using web assembly. bring their existing products that they probably wrote in C++, for example, to the web, for example, it was AutoCAD who had been working on AutoCAD for years and it's a well-known product, but now they struggled to compile it into a web assembly and, suddenly, it was running in the browser, which is kind of mind-blowing when you think about it.
webassembly for web developers google i o 19

More Interesting Facts About,

webassembly for web developers google i o 19...

Another example would be the Unity game engine or the Unreal game engine which now supports web assembly so these game engines often already have some kind of abstraction built in because you build your game and then compile it on a Playstation or Xbox or other systems but now the web assembly is just another target and what's awesome is that the browser and the web assembly are able to deliver the performance needed to run these types of games and I think it's amazing and these things are going to keep happening, so you saw in web keno that my colleague Paul Lewis created a startup that perception toolkits that help you create immersive experiences and they wanted to create links to the real world in the form of QR codes and image detection so that players Browsers can already detect QR codes using the Shape Detection API, but not all browsers have that influence, so what they are doing is using that Shape Detection API. way detection, but if that's not available, they've cross-compiled a library of zebra crossing QR codes to assemble on the web and load that on demand. to fill the gap if they find it and image detection isn't on the web so they built it themselves and used web assembly to bring a new capability to a browser the QT UI toolkit announced that they now also support web assembly that means you can now take an old Lib QT application and compile it into a web assembly and then you have this weird window in a browser tab experience which is not ideal but just shows that it works but Lib QT it's a very powerful and generic UI library, so there are many demos on the website at the bottom where they actually build a good and native looking UI using lip beauty and web assembly, for which if you don't know much about web assembly you might be asking how don't you hear do that and the answer in these cases is M scripting The purpose of M strips is to be a replacement or direct to your C or C++ compiler and instead of compiling to your machine code it spits out a web assembly and they really try to be drop-in replacements any code you wrote to run on a system should magically run on the web and that's very important as a distinction to make because M scripting does a lot of the heavy lifting behind the scenes to make that happen and I think because it worked so it works so well in these scenarios that's why it's currently so closely associated with

webassembly

because originally M strippin was an atom J compiler.
webassembly for web developers google i o 19
This was an idea from Mozilla where they wrote this compiler that takes C code and turns it into JavaScript. what you see on the right is Adam J's it's just regular JavaScript and all browsers that can run JavaScript can run Adam Jess but the plan was to give some browsers and understanding of Adam J so they would have a dedicated fast pa for make these kinds of programs run faster so you have a lot of memory and you have some variables and all of a sudden your C++ code can run on your JavaScript engine but C and C less often use other APIs like opening files and maybe OpenGL so the M scripts made it work by using WebGL to pretend to be OpenGL and emulate a filesystem so it can pretend to be working on real files so basically they're emulating a full POSIX OS to make code run on the web that was never written for the web so they hacked that made that happen so when

webassembly

came along, hmm sc ripting just added a new output format but kept all the work they had done to make that emulation so amis Krypton was basically able to lose all the experience they had with you know how to get POSIX code to work on the web and enforce to web assembly so they were able to deliver extremely impressive and really mature demos and tools extremely quickly around web assembly and they deserve a lot of credit for taking everyone along with it and leveling the playing field for all the other languages ‚Äč‚Äčthat have come along since. and I think that's why the web assembly is so strict, so it was useless due to the rapid maturity of M scripts, but what about web

developers

and you?
webassembly for web developers google i o 19
Who might be working at a web agency or maybe even a freelance developer? How can M? How can weassembly be useful to you? Do you have to learn C++? use web assembly many people end up like this because what is C++ when you know JavaScript and actually works the other way around too when I see a C++ developer see or write JavaScript for the first time they make the exact same face and I'm not saying that because one language is better than the other, but only because they require such a drastically different mindset to write. my time is very different to think about what i am saying is that until now there was no incentive for a web developer to learn C++ and therefore the number of people who are comfortable in both worlds is quite small and As a result, web assembly seemed like a very niche technology when in fact it's a really handy tool to have in your back pocket and so what I want to talk about is the two main use cases that generally I see when I think about web assembly, on the one hand I want to talk about surgically replacing small modules in your JavaScript application, bypassing bottlenecks with web assembly and I want to talk about the myth that web assembly is faster than JavaScript, but first I want to talk about the other facet of ecosystems that might look like.
Kind of weird because probably no one will disagree when I say that the JavaScript ecosystem is pretty big. I mean, just look at NPM, it's huge, but it's a fact that not all themes, not for all themes, JavaScript is the first choice. The other languages ‚Äč‚Äčcan be, so sometimes you run into a problem and you're looking for libraries to solve these problems and you find them in C or rust but not JavaScript, so you can sit down and write your own port of JavaScript. or your new option is to leverage the ecosystem of another language using web assembly and that's exactly what we did with Skoosh Skoosh is an image compression application that runs entirely in the browser and offline, not server-side and can put images and you can compress with different codecs and then visually inspect how these different codecs have different effects on the visual quality of your image now the browser already offers that if you know because with canvas you can decide what image formats you want to encode an image in and you even get control over quality but it turns out these browser codecs are optimized for compression speed rather than compression quality or visual quality so it was a bit lacking in polish to be honest and it's also a bit tied to the codex that the browser supports, so until recently only Chrome could code in webP and none of the other browsers s, so it wasn't enough for us, so we

google

d the offer and found some codec encoders for JPEG written in JavaScript, but they were a bit weird and we couldn't find a single JavaScript encoder for web P either, so we thought that we had to look for something else and we found a lot of encoders in C and C++ so web assembly so what we did was compile for example the library called jpg mods into the web assembly loaded in the browser and we replaced the JPEG encoder of the browser with ours and what that allowed us is that we actually got much smaller images with the same visual quality. configuration which is pretty cool, but not only that, it also allowed us to expose a bunch of expert options that the library had but the browser obviously didn't expose, so things like setting chroma subsampling or different quantization algorithms to not only be valuable for squeezing the last two bits out of an image, but also as a learning tool to see how these options really affect your image visually and file size.
The point here really is that we took an old piece of JPEG mods code dating back to 1991 and it was written definitely not with a gun mind, but we're using it on the web anyway and we use it to improve the web platform and we use scripts em, so with M scripts to show you how that works, usually. I'm in a two step process, the first step is to compile the library, something I can link to later, image codecs often use threads and Sandy because image compression is a highly parallelizable task, but neither JavaScript nor weassembly have support for threats or just though it looked like Deepti we'll talk about that a bit later what's coming up on that front but for now we disabled Cindy to make sure we don't run into any issues and in the second step you have to write a piece of w What I'm calling bridging code is the function that I want to call from JavaScript later so that it takes the image, takes the dimensions of the image, and then uses a small JPEG to compress it and returns a written array buffer containing the JPEG image and once you have written this bridge code we call EMCC m script and C compiler with our C++ file and library file link it all together and provide arlo I didn't make any mistakes we got this output as a JavaScript file that sets everything up for us and the weapon assembly file now here is something to keep in mind because M stripping is a drop-in replacement and does all these emulations and all that heavy lifting for You, it's always a good idea to keep an eye on your file sizes because these kinds of file system emulations and API tunneling, that's the code that needs to be shipped, so if you use C api these files can get quite large, especially the JavaScript file,we've been working with the M scripting team very hard to help them ep at the very least, but there's not much you can do if you want to be an immediate replacement, so keep an eye on your file sizes.
Another example of web assembly in Scrooged is image scaling because it happens to make an image smaller, there are many ways to achieve this with many different visual effects and visual results, so with the browser, if you just use the browser to scale a image you get what you get it will probably be fast it will probably look good but sometimes having control over the different variants of scaling an image can really have a big visual impact so in this video you can see me toggling between the lengths or three algorithms and whatever the browser has and you can see that with the length of three I actually have and Linear RGB Color Space Conversion I actually have a much truer perception of brightness in this image so in this case is actually a very valuable piece of code to run, so this image is an image scale alg.
The orthms we use at Skoosh are taken from the rust ecosystem. either. Mozilla has been investing heavily in the Rust ecosystem and his team writes web assembly tools for Rust, but the community also abstracts them into generic tools. One of these tools is resin. package that really takes it by the hand and generates turns your rust code into web assembly modules a really small modern JavaScript and I think it's a lot of fun to play with so on the same kind of rust principle we have a library and we want to write our little bridge code so in this case the resize function is what i want to call from javascript it takes the image and my input size and the output size and then returns the resized image after and then uses the rosin pack to turn all of that into a web assembly module that you can use now the size comparison isn't entirely fair because it's a different library and it's a smaller library so don't compare it byte for byte but on average Rus tends to generate much smaller glue code which kind of makes sense because Rus doesn't do any of the POSIX file system emulation, you can't use a file function and it rusts because it doesn't do file system emulation they do have some boxes you can check out if you want to have that but it's much more of an opt-in approach so the bottom line is that with squash we're using four different libraries at once less than two different languages ‚Äč‚Äčthat have nothing to do with the web, but we still proceeded to use them on the web and that's really what I What I want you to take home from all of this is if you find a gap in the web platform and it has been populated many times in another language but not on the web or not in JavaScript the web assembly could be a tool but now let's talk about the surgical replacement of the active path in your JavaScript and the loss of that assembly java web is faster than javascript now which is really important to me and that's why i came up with this really crazy visual metaphor, both javascript and web assembly have the same max performance either. they are equally fast, but it's much easier to stay on the fast path with webassembly than it is with JavaScript or the other way around, sometimes it's too easy to unknowingly and unintentionally end up on a slow path in your JavaScript than it is in the assembly engine web now with that being said the web assembly is looking into dispatch threads and Cindy thinks JavaScript will never get access so once these things are dispatched the web assembly will have a chance to outperform JavaScript quite a bit. but in the current state of things, the maximum performance is the same to understand how this crash of the fast path happens.
Let's talk a bit about the web assembly engine and javascript in Chrome v8. Javascript files and web assembly files have two different entry points to the engine. The javascript files are passed to a cognition which is a v8 interpreter, so it reads the javascript file as text, interprets it, and executes it while executing it. It collects analytical data on how the code behaves and then uses it for optimization purposes by Turbofan. the compiler to generate the machine code web assembly, on the other hand, is passed to take off the compiler from the streaming web assembly and once the compiler is done, the turbofan kicks in and generates optimization codes.
Now there is some difference this year. The first obvious difference is that the first stage has a different name and a different logo, but there is also a conceptual difference. On is an interpreter and off is a compiler that generates a machine. codes, so it would be an overgeneralization to say that machine code has always adjusted interpreted code, but on average that's probably true, so here's the first difference in terms of speed perception, but more importantly that this difference for JavaScript, the optimization compiler, only kicks in eventually this code has to be executed and observed before it can be optimized because certain assumptions are made from observations, machine code is generated, and then machine runs but once these assumptions are no longer true you have to fall back to the interpreter because we can no longer guarantee that the machine code does the right thing and that's called deopt advertising optimization with Rabbit Sembly the turbofan always kicks in just right after compiler lift and you always stay on take off on turbofan outlets you always stay on the way fast and you can never get d updates and i think that's where the misconception of that web assembly comes from. it's faster you always get you can be easier to get option D on java screen you can't and web assembly and Nick Fitzgerald from the rust web assembly team actually did a good benchmark that wrote a point of reference in both javascript and webassembly javascript reads webassembly is blue and run it in different browsers and what you can see here is yes ok which assembly is faster but the main takeaway here is that javascript has to propagate, it's kind of hit or miss as to how long it takes while webassembly is like a dot -always the same time even in all browsers and I think that's really the key line I'd like you to take home with your webassembly gives you more predictable performance that delivers ers more predictable performance than JavaScript and that's a story I can tell too at Skoosh we wanted to rotate an image so we thought it was ok let's use canvas but we couldn't because the canvas is on the main thread off screen canvas was barely in chrome at the time so we actually ended up writing a piece of javascript by hand to rotate it or just reorder the pixels to rotate the image and it worked great it was very fast but it turns out the more we tried in other browsers the more it got a little weird so in this test case we were rotating a 4k image by 4k and not it's about comparing browsers, it's about comparing javascript, fastest browser took 400 milliseconds, slowest browser took 8 seconds, even off the main thread, that's right.
Too long for a user to press a button to rotate an image, so what you can see here is that we're clearly on the fast path in one browser, but we went off the fast path in another and the browser was generally not a FAS t browser just some browsers optimized differently so we write our rotation code in web assembler or a couple of languages ‚Äč‚Äčthat compile to web assembler to compare how it works and what you can see here that almost all languages web assembler take us somewhere. the 500 millisecond march I would call it predictable I mean there's still a little bit of variance but nothing compared to JavaScript variants and that's a logarithmic scale and yes and also what you can see here I just noticed that I had than to improve web assembly performance, maximum web performance in javascript is pretty much the same, so if you look at the graph you might be wondering what is assembly script and if you haven't, then I'm very excited about this because the assembly script really brings it back to my talk title, which is web assembly for web developers.
The assembly script is a type script for the web assembly compiler. r existing type script in this compiler and get the web assembly because in the web assembly you don't have Dom API so you can't use the same code but what they are using is the typescript syntax with a different type library, so which means you don't have to learn a new language to write a web assembly which I think is kind of amazing so it looks like it's like typescript only with a couple of my new differences in that something like I 32 isn't a type which has JavaScript, but it's a type that has the web assembly and then there are these built-in functions like load and store that put values ‚Äč‚Äčinto memory or read them from memory and are converted to web assembly modules by the assembly script compiler, so now you can write a web assembly without learning a new language and benefit everyone and take advantage of all these benefits that web assembly could offer you and I think that's a powerful thing something to have er to note is that unlike typescript web assembly it doesn't say ah I have a garbage collector at least not yet and Deepti will talk about this a bit later so at least for now you have to manage the memory yourself , so the assembly script gives us a couple of memory management modules for you to go into and then you have to do these C-style allocations is something that takes a bit of getting used to, but it's very useful right now and once webassembly gets garbage collected it could get even better so it's one of the full disclosure assembly scripts it's a fairly young and small project has an extremely passionate group of people behind it has a couple of backers but nothing compared to Mozilla behind rust or M script and all this being said it's absolutely usable and very nice my colleague Erin Turner wrote a whole emulator on assembler scripts and so, if you're hurt by that you should look it up on github and take a look at the code now one thing i want to make sure to say out loud is the current state of things putting e everything in wasm is not a good idea javascript and web assembly they are not opponents, there is synergy between them, use them together, one does not replace the other, as debugging is going to be more difficult and chunko spit, it is much more difficult with webassembly currently than with javascript and you have to call back and forth like if it weren't going to be a great experience.
I've had a few people tell me they want to write their web components and it's up to us. I don't know why they would want to. do that, but apparently they want to do that, but I wouldn't recommend it. What I would like to say is that web assembly is the right thing to do. Do some performance audits. Take measurements, where your bottlenecks are, and see if web assembly can help you fight. You did it? find the space in the platform and you can fill it from a different language again webassembly is your tool but now to talk a bit about the future of webassembly and the next feature I would like to welcome Deepti to the farewell. e thanks Irma hi everyone I'm DP I'm a software engineer on the Chrome team working on standardizing web assembly features as well as implementing them in v8. has landed and shipped in all the major browsers which is the MVP or Minimum Viable Web Assembly Product and we've been hard at work adding capabilities to make sure we get closer and closer to native performance the MVP itself unlocks a whole set of new applications on the web but this is not the end goal and there are many exciting new features that the community group and implementers are working on to enable the first one is the web assembly thread proposal the thread proposal it introduces primitives for parallel computing specifically, that means it introduces the concept of a shared linear memory between threads and semantics for atomic instructions.
Now why is it necessary? the many existing libraries that are written. tten in C or C++ that use P threads and can be compiled to azzam and run in multi-threaded mode, allowing different threads to work on the same data in parallel, as well as enabling new capabilities for applications that take advantage of multi-threaded execution. You would see performance scale with the number of threads, so the threading proposal is based on primitives that already exist in the web platform. The web supports multi-threaded execution using web workers and that is exactly what is used to introduce web-to-web multi-threaded execution. join workers handicapweb is that they don't share mutable data with each other, but instead rely on message passing for communication via the post message, so if so, they would rely on message passing for communication, so each of these web assembly threads run in a web worker but their shared web assembly memory allows them to work with the same data and have them run close to native speeds, the shared linear memory here is built into the array buffer shared JI, so if you look at this diagram, each of these threads runs in a web worker and can have a web assembly that instantiates it with the same linear memory, which means that the instances operate on shared memory but have its own separate execution stacks so the api for creating a web assembly memory remains almost the same if you look at the first line there it creates a web assembly memory with a shared flag and a mandatory max this creates a shared path before below with the initial size we've specified there which is one page of memory so with all these threads operating on the same memory how do we make sure the threads data is consistent?
Atomic modifications allow us to do some level of synchronization, so that when one thread works and atomic operation, the other thread sees it as happening instantly, but full synchronization often requires actually blocking one thread until another thread finishes. run so the h proposal as an example implementation of mutex and lay out how you would use this on a JavaScript host if you look closely there are subtle differences between what you would do in a worker and what you would do on the main thread , so on the main thread the Trilok mutex method is called which attempts to lock a mutex at the given address, it returns 1 if the mutex is successfully locked or 0 otherwise and on the worker thread it will lock a mutex at the given address retrying until successful so basically the reason it's like this is that on the web you can't block the main thread and this is something that is useful to have into account when using thread primitives, so what is the current state of this proposal? the proposal itself is fairly stable, but there is work in progress to formalize the memory model that uses the shared array buffer.
What really excites me here is that this ships in Chrome 74 and it's on by default so Surma mentioned QT earlier in the presentation and QT uses full threat support so this is something you can use in your applications today, since the shared memory primitive here is JavaScript's shared array buffer and that's temporarily disabled in some browsers, web assembly threads are currently not available by default in all browsers, but you can still try this on Firefox every night behind the banner. One of the goals of web assembly is to be a low-level abstraction on top of modern hardware.
This is especially true in the case of webOS and the cindy assembly proposal is taken for single instruction, multiple data, it allows one instruction to operate at the same time on multiple data items, so most modern cpus support some subset of vector operations, so this proposal is trying to take advantage of capabilities that already exist in the hardware you use every day, the challenge here is to find a subset that is compatible with most architectures but also has a good performance. Currently, this subset is limited to 128-bit MD. There are a couple of different ways to use this MD proposal.
When using auto-vectorization, you can pass a flag to enable Cindy while compiling and the compiler will automatically vectorize your program for you on the other hand, many just use our niche, highly-tuned cases for performance and use hand-coded assembly. , so these would be using Clang builtins or intrinsics that generate machine code that is tuned for performance. Now suppose that D can be used for a wide variety of applications so that you can use it for image or audio and video codec applications like Google Earth and Photoshop or even machine learning applications on the web. this data is operated on here you see a simple example of an add statement on an array lets say this is an array of integer values ‚Äč‚Äčso this on the left hand side is what a scalar operation would look like where you add each number to the y stores the result, the vector version of this would simply be reduced to a hardware instruction, for example a Pad plugin or repiy on some Intel architectures, so simply operations work by allowing multiple pieces of data to be packed into one data word and allow the instruction to act on each piece of data, this is useful for cases where the same operation needs to be performed on large amounts of data, for example taking c1 image processing, compressing an image into Skoosh or reducing the amount of color in an image in Photoshop by half the assembly operations would actually make this much more performant, so we've talked about bre make use of the underlying capabilities of the hardware and the capabilities always to make your applications work now let's see what happens on the other side what what what are we doing to better interrupt with hosts?
One of the proposals being implemented by many browsers is the reference type proposal, but the reference type proposal web assembly code can pass arbitrary JavaScript values ‚Äč‚Äčusing any reference value type. These values ‚Äč‚Äčare opaque to the web. assembly, but by importing built-in JavaScript functions, web assembly modules can perform many fundamental JavaScript operations without needing to act. ally that requires JavaScript hook code, so the web assembly table object is a structure that stores function references at a high level, so this reference types proposal also adds some table statements for the Table manipulation within wasm. The nice thing about this is that the reference types proposal is actually setting the stage for really useful future proposals, so for efficient interrupts with the host for the web idea proposal or exception references for exception handling and also It allows for a more seamless part to have garbage collection and I'll be talking about all of this in the next few slides, so one proposal that our team will focus on in the near future is an IDL web binding proposal.
The web idea is an interface definition language and can be used to define the interfaces that are implemented in the web we mentioned. this a bit with reference types, the basic idea here is that this proposal describes adding a new mechanism to render the sheet or avoiding some unnecessary overhead when calling or being called via the IDL web interface, ideas links proposal web would allow compilers to optimize calls from the web assembly to existing browser environments and web APIs today, as well as other APIs, and which may use web IDL in the future, so let's take a closer look at this so when you have a wasm function you would call this call a javascript via jsapi, jsapi goes through the binding layer which facilitates the communication between jsapi and the web api is for Dom access this adds a lot of code glue and additional overhead the goal of the web airlinks proposal is to reduce this overhead and optimize calls from the web assembly to existing web APIs so effectively that this would not have to go through jsapi and bindings would also be optimized to reduce overhead thus it would have simplified the calls between web assembly and web apis so currently when we talk about CC + rust and putting these languages ‚Äč‚Äčin web assembler and it is very well supported and there is a lot of work to bring different kinds of other languages ‚Äč‚Äčto the web, one of those features is garbage collection, which is necessary for efficient support of high-level languages, which means faster execution of smaller modules and outside of CC In addition to class, this is really a requirement for me to be able to support a lot of my writing, a lot of modern languages. design constraint, so currently why do some designs explicitly forbid optimizing tail calls in the future?
We want to enable correct and efficient tail call implementations of languages ‚Äč‚Äčthat require tail collar emulations to be functional languages ‚Äč‚Äčlike Haskell. it actually progresses quite nicely so for full c++ support we need exception handling in a web and wyman exception handling can be emulated d using javascript exception handling which can provide the correct semantics, but it's not really fast so post-MVP web assembly will get zero cost exception handling support and this is something that is also being actively worked on, we're also working on a number of other proposals as well Please feel free to check out the documentation for future features on the web assembly github page.
The other thing I want to emphasize is that a lot of these are in the design phase and if you're interested in wanting to get involved all of the development is done in an open community group, so contributions are always welcome. We also talked about performance, so if you have performance bottlenecks and have used them to know how to raise some of the concerns, we'd love to hear from you, Irma and I'll be hanging out here and later on the web. Stan box so if you have any questions please come find us there or obviously find us online thank you.

If you have any copyright issue, please Contact