 Hi, everyone. Welcome to this talk. My name is John. I'm an open source engineer at Hackages and During the next 25 minutes. We are going to talk about the web In my opinion, the web is an amazing platform and I think that we can all agree on One fact is that it the web has evolved a lot since its beginning We went from sending simple Text over the wire to providing a full experience to the end user and I think one key component within the web that has brought this experience is JavaScript, right But so JavaScript built in 1985 Shipped within the Netscape browser was aiming to provide some dynamism to the static content of the web but What we were trying to achieve with JavaScript that time it's a much more It's a much smaller part of what we are doing with it now So the way that that it was executed at that time is quite different from the way it is executed nowadays So at that time JavaScript was interpreted, okay, and take a closer look at what interpretation is is for example Here we have in the middle our interpreter JavaScript interpreter Okay, and on the right side we have kind of like the very middle machine the CPU on the left We have a bunch of JavaScript code lines calling add functions passing numbers and when the execution hits the first line The line is sent to the interpreter the interpreter does his job Okay, evaluates both parameters their type what we are trying to achieve and then output some machine code that gets directly executed by the CPU next line same process again Evaluate in both parameters same what kind of types they are and then output in some machine code and the thing here that this mechanism worked until kind of 2005 when big JavaScript apps started to come onto the scene and one example is Google Maps which which browser started to hit kind of like a performance issue with those JavaScript app and why because at the end Doing a simple addition in JavaScript is not trivial you have to check both operands types and regarding their There regarding the evaluation you will output some different code So you cannot really count on the language it by itself you have to wait until runtime So one of the mechanism that Browsers applied to solve this issue. It's a very well known mechanism Which is called just in time compilation and if we take back the same example. We still have both Items there, but you have a third one a third component within the system, which is the just in time compiler. Okay We take again the same lines first line is sent to the interpreter It does the same evaluates interpret it output some machine code and that's it second line Same process Evaluate it both parameters and then output some machine code, but this time The interpreter has monitor the code and the execution and it has some feedback about the execution So it can see that okay. We try to Execute twice the same function passing twice numbers. Why don't so It marks that function as hot and then pass it to the just in time compiler to compile it and Output some the same machine code that it was previously put it store it somewhere else somewhere in memory and Lock that memory region so we cannot override Third line comes to execute it and then there the interpreter say okay. I know this ad function It's not the first time. I just asked the just in time compiler to comp to compile it and put it somewhere in memory so All steel are still both parameters numbers. Yes, okay You can then take the one that I just compiled it and directly execute it and if you see this here what we have done what the the engine have done is just that he made a shortcut for the execution of a function and we call that a fast path, okay and That's when JavaScript gave us his top speed and just to show you the difference between non-jitted code So non-jitted JavaScript and jitter JavaScript. I just launched an instance of Chrome Disabling the optimization of JavaScript and you can see for eight robot dancer It's kind of laggy on the left side, but on the right side. It's kind of going very well You can even I think I increase until 15 and it's still okay, but then Well, we had the performance issue with JavaScript With interpretation we compile it and it works pretty well. Why don't we why do we want to go further? Well, the thing is that I Didn't tell you the whole story If we go back to example and they this time I'm sending instead of two numbers one string and one number The interpreter will try again to say okay. I know this function. I just told it somewhere but Although are still those two parameters numbers nope So what he's done is doing is that he is going to fall back to interpretation and Erase the compile version that he had Yeah, super animation So then what's the problem with JavaScript? Well, I mean not the problem. I don't want to fend it. I'm sorry I'm sorry I didn't what's the thing what JavaScript is lacking to be optimized before execution well JavaScript is just lacking predictability if you take the same version the same I mean two versions of a same code one written in C and another in JavaScript. You can clearly see that in C The language provides some hints to the compiler so he can optimize code before runtime When if you look at the JavaScript side, there's not much going on there Even the number of parameters are not really fixed so you can pass more than two if you want So if we quickly recap what we learn here. Oh, no, maybe what we have to so we Opt we can optimize JavaScript and it's cool and you can have really good performance with it's not problem But the thing is that JavaScript is not predictable. So The industry browsers have tried to solve this problem I mean to solve that to fix this and they try to run some more predictable code within the browser and one of the initiatives is for example portable native clients from Google which was to to run some Some c++ modules within the browsers sandboxes. So it's secured But it isn't really took off After that Mozilla came with an idea of just taking a subset of JavaScript, which was more predictable With and they call it they called they call it as enter JS, but it wasn't enough Because it was still JavaScript at the end and in 2015 browsers reunited and Tried to come up with something that they could agree on to Go a step further to push the limit of the web and that's where WebAssembly came onto the scene And what is WebAssembly if we take quickly just the the text from the official page, which is quite dense I'm gonna read it. So WebAssembly abbreviated wasm is a binary instruction format for a stack-based virtual machine Wasm is designed as a portable target for compilation of high-level languages like C C++ Rust Enabling deployment on the web for client and server application a lot of things that we are going to try to Read it again, but step by step. So what assembly abbreviated wasn't is a binary instruction format So it just means that it is set of instruction and code it in a binary way. So it's quite efficient to load it Design as a portable target for compilation. So two things here Portable it means that WebAssembly is not just designed for the web but it's also designed to run outside the web on all the platforms and Target for compilation means that you don't have necessary to write WebAssembly. It's quite low-level You are more kind to you're more likely to write in a higher level languages like C C++ Rust Go C sharp Java whatever and You compile to WebAssembly So how the process goes simply you take a bunch of file C C++ here I just okay. I mentioned just C and C++ you compile it to intermediate intermediates a representation It's almost always LLVM. I will skip the details about LLVM Okay, but normally this part is quite hidden from the developer perspective Okay, and then you compile as a backend compilation to a Simple.wasm in this case is the name but a wasm module Okay, and with which tool for example one of the main tool to compile to WebAssembly is in scripting Which first mission mainly mission is to provide to bring other languages on the platform on the web So then how do you consume this simple that wasm? Well You fetch the resource I think you all know this you fetch the resource and then you just call the JavaScript API WebAssembly APIs that are nowadays available in all all the browsers the major browsers and then you receive You receive wasm module which you can call function on it Here exported from and those functions were originally written in another language So what all the goal of WebAssembly? WebAssembly wants to be performant run at nearly native speed After that what assembly wants to be portable. Okay, so not only running on the web, but also running in all the platforms and Secure secure by default. It's one of the main concern of WebAssembly being more secure than JavaScript performance well I might disappoint you, but JavaScript is not I mean sorry web assembly is not So much faster some are more faster than super optimized Compiled JavaScript at the end they quite run early at native space a speed. Sorry, but the thing is that JavaScript I Mean web assembly will more likely to stay on the fast path when you have an optimized version of it While JavaScript will kind of de-optimize easily and falls back to interpretation and for to illustrate my point here you have A multiple just diagram showing multiple execution of the same code in JavaScript and then the same code in WebAssembly in blue WebAssembly is faster. Okay, but the point here is to show that for Multiple execution of the same code in JavaScript You don't have you cannot predict the performance while in WebAssembly is quite the almost the same Also was can be decoded validated and compile in a fast single pass Equally with either just in time or ahead of time compilation if you check how JavaScript is handled within a browser You first fetch the whole resource and then you parse it compile it and execute it All that in the main thread. There are some exceptions. Okay, not everything happens sometimes in the main thread But that's kind of the regular way of doing it But browsers handle WebAssembly in another way So while fetching the packets while fetching the resource the wasn't modules The browser will directly compile the bytes dark on the fly and when it and when it when it's done It will execute on the main thread and the compilation doesn't happen on the main thread say does not block users Just to show you the difference of performance. You have 30 rubber dancers Here and you can see that in JavaScript is quite laggy when you switch the execution to WebAssembly It goes back to normal and you can even increase the number and I'm going I go there until I think 120 But you will not see the difference because the screen is too short. Yeah Okay, so portable at the beginning was Was meant the first version of was made was meant to to at least Works work on the browser. So the way of execute was was to Provide some GS glue code that when a wasn't module was trying to do something that the browser couldn't handle at least the JavaScript will handle the call and Simulate something emulate something for example calling a file system. You cannot qualify system within the browser So when folks tried to run wasm outside of the of the browser What they tried to do is just to run the existing wasn't module outside the browser and So there were kind of emulating GS glue GS glue code that was emulating a system interface So it's not really the most optimized way to do it. So a need of As much as wasm is a language for a conceptual virtual machine. It needed System interface a standard and standardized system interface for conceptual operating system That's when WebAssembly system interface claim onto the scene. It's just a specification that runs that that WebAssembly modules can call to Make some system API school kind of it's just an operating system. It's not it's in let's say It's kind of like a posix way of doing it So then the diagram becomes like that you have the non-browser or browser runtime that implement wasi and Provide exposed some system interface API that wasm modules can interact with I Wanted to show you one tweet of Solomon Hikes, which is the from the founder of Docker That's that is saying that if wasm plus wasi existed in 2008. We wouldn't have it to create a docker That's how important it is it is web assembly on the server is the future of computing a standardized System interface was the missing link. Let's hope wasi is up to the task Also folks from clever cloud a French company that is I think here. Maybe you have met them Are running function as a service in web assembly? Directly on the hyper that is a so no operating system between the code and The the hardware Okay, what the same it wants to be secured by default Nowadays when you code It's the the the result set of binaries is just 20 percent your that your code and 80 percent Dependencies that you haven't written Then what happened is that the way that we execute programs nowadays is just they execute within the ambient authority So me as an admin of my machine I'm going to Ask my problem to run and then I'm going to provide him my whole set of keys the Permissions that he can so he can run. Maybe he doesn't need it, but it's okay I just wrote the code so I know it doesn't will not do some malicious things the problem is that It also passed the whole set of keys to their it's dependencies Okay, and sometimes you have a malicious dependency Okay, so that malicious dependency can then use all the rights that you provide to execute some malicious code web assembly wants to execute itself as a Capability based systems so it means that I still have this whole set of keys But when I'm going to run the whole program, I'm not going to pass All the permissions I'm just going to pass the permission that I think my program needs to perform his task. Okay, so I'm just passing here kind of one key and then this key is passed to all the other Dependencies, but this time the malicious code is quite blocked and cannot really perform the malicious task Also one abstraction that the web assembly wants to provide is called nano processes. So The the idea here is to execute competing modules wasn't modules in this in the same In the same process. So kind of the result is kind of like that so you have the whole process which is like the big box blue box and then inside you will have like the first one is like your main module the one that you have written and It has dependencies to other models But they all run within kind of in a sandboxed way and they think that they are alone within the memory space the process It's it's just a software fault implement isolation so Why was wants to be secure because first it provides capability based systems Also, it's sandboxed by default. Okay, so you can run low-level code in a secured way and also a Nano processes provide a way to to communicate between different modules a lot lot lot much faster than Interprocess communication, okay, and The end result is kind of like that So you write your first You write your main module in for example rust and then you consume some dependencies that were originally written in all the languages Like C++ go and so on. I mean there are a lot. They're not only these languages There are a lot of more but well so Projects I Just took two examples. There are a lot. Okay, but you can check as you are all JavaScript developers. I Wanted to show you assembly script, which is just it's a subset of type script that does not compile to JavaScript or transpile to JavaScript but compiles directly to was modules and web assemblies, okay, and Because I'm a dotnet guy. I Wanted to show you I'm also that that guy I Wanted to show you That you can run now The CLR so the dotnet with on the browser through web assembly and they provide now kind of a framework Which is quite similar of like Angular to write front-end applications in C sharp Go check this link. It's really interesting. There are a lot of things and that guy and basso I Think he's Italian and he's doing a C++ front-end library to write Front-end application that compares to web assembly and it has also provided kind of like gs6 syntax for c++ Super interesting the bytecode aliens So big companies reunited and Try to push web assembly and a secured by default web and They call themselves bytecode aliens. They are these all the four founders of the aliens and You see pretty big names and just to tell you fastly is running 10% of the Internet and I will end up my talk with One quote that I think it's kind kind of resume What I feel about the web assembly is that web assembly is the first fast multi language retargetable and safe Intermediate representation that we have a that we have ever agreed upon as a community CTO of FASD Voila, thank you Okay, any questions Yes Yes, of course It's a question that a lot of folks are asking To be honest, I think that For now, it's c++ that will continue to be like the major solution to To provide native performance within note models But at the end it will switch to web assembly models because I don't know in my humble opinion I think it's kind of like the future of the industry or indeed in this perspective But they all they've both fixed some of your issues, which is giving you performance and so Assembly is a fairly young language Do you have another view of the tools and debugging tools around it because as it's a binary format I guess it's a bit harder to debug them Let's say vanilla JavaScript Yes, okay, so there are already I think some browsers that provide debugging tools To work with web assembly modules You have I think within module a firefox so you can already kind of work with it and and the ball The thing is that I didn't mention and you're right Web assembly has two representation. It has the one that browsers use to To execute it which is the binary format because it load efficient and so on but for human readable It's it's not the most human readable format. So they also have a text Representation which is web assembly Text I think what or something it's called what? And then you can really clearly see that it's low-level it kind of like an assembly code I have a question about the micro front-end and how assembly will do in this in this architecture Assembly yeah web assembly web assembly will do in which architecture in the micro front-end The micro front-end architecture, okay Web assembly are quite I mean it's composed of several modules. So if your concern is to say Do I have to download the whole module big big big module to execute it? No, you can kind of speed it and and in the in the future you will able to you will be able to lazy load it so Yeah, I think you can already do that now to be because at the end as you see as you saw I mean you're just fetching a resource on the internet and then you can fetch whenever you want if it's Sorry Yes, I will say yes. Yes, there is no really they're not competing I mean if they're loaded into your browser you can run it On both sides, but maybe you will struggle a bit to make them Work together, but I think it's competitive feasible of course Okay, is web assembly able to access to the GPU? okay, so This talk that I've done. It's normally a much much larger and I'm covered all the topics One thing that so your question is Is it possible to call some GPU? APIs from the web assembly right now? No, because the only thing that provides that That is standardized is was he which is kind of like a symptom system interface to call some the OS API's the thing is that was he wants to extend itself and so you in the future You would be able to call some specific domain specific Low-level API's and for example GPUs, okay, or you will be able to call I don't know something related to blockchain or whatever so Go check was he got check on the internet was it's really that we want to extend themselves and and they're open to Feedback from the community Thank you so much. Thank you He might be available just outside for questions