 Hi everyone, welcome to this talk. My name is John. I'm an open source engineer at Hackage's 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 who have kind of like the very metal 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? Evaluate 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 Their 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 outputs 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 ask 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 compile 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 the 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 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 Then 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 We can optimize JavaScript and it's cool and you can have really good performance with it's not a problem But the thing is that JavaScript is not predictable. So 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 sandbox it 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 web assembly came onto the scene And what is web assembly if we take quickly just the the text from the official page Which is quite dense. I'm gonna read it So web assembly 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 coded 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 web assembly 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 web assembly. It's quite low level You are more kind to you're more likely to write in higher-level languages like C C++ Rust Go C sharp Java whatever and you compile to web assembly 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 intermediate 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 web assembly is in scripting Which first mission mainly mission is to provide to bring other languages on the platform the web So then how do you consume this simple that wasn't well You fetch the resource I think you all know this you fetch the resource and then you just call the JavaScript API Web assembly 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 function were originally written in another language So what all the goal of web assembly? Well, I simply 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 web assembly 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 nearly at native space space 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 Well, JavaScript will kind of deoptimize 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 web assembly in blue What was in this 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 what assembly is quite the almost the same Also was can be decoded validated and compile in the 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 web assembly 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 robot dancer Here and you can see that in JavaScript is quite laggy when you switch the execution to web assembly 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 call a file system within the browser so when folks try to run wasm outside of the of the browser what they tried to do is just to run the existing was a 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 well 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 a System interface a standard and standardized system interface for a conceptual operating system That's when web assembly system interface claim on to the scene It's just a specification that runs that that what assembly modules can call To make some system API school kind of it's just an operating system. It's not it's it Let's say it's kind of like a posix way of doing So then the diagram becomes like that you have the non browser or browser runtime that Implement wasi and provide expose some system interface API that wasn't 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 was existing 2008 we wouldn't have 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 flat is a so no operating system between the code and The the hardware Okay, web assembly wants to be secured by default Nowadays when you code It's the the the result set of binaries is just 20% your that your code and 80% dependencies that you haven't written Then what happened is that the way that we execute programs nowadays It's 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 does it will not do some malicious things The problem is that it also past 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 obstruction 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 modules But they all run within kind 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 implemented isolation. So Why our 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 it 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 skipped, which is just it's a subset of TypeScript 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 WebAssembly And they provide now kind of a framework, which is quite similar of like Angular to write front-end applications in C-Shar 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 WebAssembly and it has also provided kind of like gs6 syntax for C++ It's super interesting the bytecode aliens so big companies reunited and Try to push WebAssembly 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 it's 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 WebAssembly is that WebAssembly is the first fast multi-language retargetable and safe Intermediate representation that we have that we have ever agreed upon as a community CTO or fast Voila, thank you Any questions? 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 to be like the major solution to To provide native performance within node models But at the end it will switch to WebAssembly models because I don't know in my humble opinion I think it's kind of like the future of the industry or in this perspective But they all they've both fixed some of your issues which is giving you performance and so WebAssembly 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 than Let's say vanilla JavaScript Yes, okay, so there are already I think some browsers that provide debugging tools To work with WebAssembly modules You have I think within modular Firefox, you can already kind of work with it and and the ball The thing is that I didn't mention and you're right WebAssembly has two representation. It has the one that browsers use to To execute it which is the binary format because it's low-deficient 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 WebAssembly 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, WebAssembly WebAssembly will do in which architecture in the micro front-end The micro front-end architecture, okay WebAssembly 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 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 it 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 completely feasible of course Okay, is WebAssembly 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 WebAssembly Right now no because the only thing that provides that That is standardized is wazzy, which is kind of like a system interface to call some The OS APIs the thing is that wazzy wants to extend itself and so you in the future You would be able to call some specific domain specific Low-level APIs 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 wazzy. Go 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