Don't forget to check out our links below! https://ndcoslo.com/ https://ndcconferences.com/
During the last decades a growing trend has been to put more and more functionality into the client by using the latest and greatest JavaScript framework. But what if we could be using native code in the browser in order to run computations faster and potentially reuse code from the backend in the frontend.
Enter Web Assembly. Web assembly is a new web standard which enables you to run native code as part of your current JavaScript framework. This talk will give you a thorough understanding of what web assembly is and how you can use it in your project.
We will cover a practical example writing our web assembly using Rust. We will go through everything from writing your web assembly code to publish it as a npm package and finally use it in an existing web application.
So hello, everyone. Now, today I'm going to be talking about why you should consider whether somebody in your next project product, my name is considered when I work with machine learning in a my. And before we dive into Web assembly, I'm just going to give you some more background information about me. So my background is in the human machine interfaces for process automation and robotics. I have a master's degree in electrical engineering and also master's degree in behavioral science and was interested in artificial intelligence and the Internet of Things. So I've taken some classes at MIT and I am a Microsoft MVP in A.I. and I'm also part of of the steering group for two Meetup, Syrian, Oslo, Oslo II and the Norwegian Botnet Youth Group. So what is Web assembly? So Web assembly has its origin in 2015, so all the major Web browser windows, they gathered together and they did a draft of Web assembly in the end of 2017, and then they published it in February of 2018. And so the goal goal here for Web assembly is to have like a binary format so that you can run native code inside of your browser. So in this presentation, we will both have a look at maybe someday how you can write that. And we will also have a small demo of how you can write your own Web assembly and then how you can packages package it with NPM and then how you can then download the package and use it in your own application. First, if we contrast JavaScript and Web assembly, we can see that JavaScript is more of a high level language. It's flexible, expressive, dynamically typed, and you don't need to compile. And I'll say it has a huge ecosystem where its web assembly is much more low level. And it's we will see in a couple of slides. We'll see what it looks like. But it looks like an assembly like language that also has a compact binary format. And one of the advantages with using maybe somebody is that you can have in their native performance. So either you can write the verb assembly manually, which I don't recommend, or you can use a high level language like C or C++ or rusts and go, and then you can use a tool or a compiler to compile down your high level language to Web assembly. So this is an illustration, this is taken from a blog, Syria, by Lynn Clarke. So she will get all of the references at the end of the presentation. But basically what this illustrates is that what usually happens is that you have a high level, high level language like C or C++, and then you compile this high level language down to something you can call an intermediate representation. And then you have a second part of the compiler will actually compile it down to the target architecture, which is then in this illustration, can either be an 86 architecture or an arm. OK. Dr.. Now, with the Senate, it's a little bit different because now here we have coal that we executed over the Web, so that means that we don't really know which targets will it run on finally. So whether somebody can be described as a machine language for a conceptual machine and these assembly instructions are also called virtual instructions. So what will happen is that the Brown browser will download Web assembly and then it can compile down to the target that it's running on. As I said before, Sohaib Assembly, which is abbreviated what is a new Browsr standard? It is based on the previous protocol HSM that Geass, which you can read up on more and it's an intermediate language in the same way as Java combines stands by the Cooldowns and Ballister, Amisi and. It's a strongly typed language, but we only have four different types of integers, 32, the 64 and flow 32 and float 64. We take a look here at the hell the World Program or Helverson program, since I just mentioned, that we only have four different types of types in this language and and they were integers and floats. It's quite it's a little bit complicated, actually. Right. Hello, World Program. So instead, what is the equivalent of a HelloWallet program in WASM that is either an addition or a subtraction or some more simple mathematical operation? So we will make our own add this HelloWallet program in in Wasem. So Somalia has a format which is called W8, which stands for Web assembly text format, so this is how we can write our code. So what we have here is we define a function called add to and defined to input parameters, which is integral 32. And then we also declared that the result from this operation should also be an integer 32. And it's also Steck based language. So here we get local on the first the memory position and get local, the second member position and then we call a function there. I started to add so there are some some 60 different types of functions that you can use in web someday. And then we also have to declare what will this function actually be called for, you know, for the calling function. So we export it. That's a function that should be added to and there's added to is an alias for the function that is called ATHU here in the W8 example. We can use a tool which is called What to US or whether the text format to us. So we just run this command line based tool. So we ran what was with our Web assembly text format. And then we define what kind of what kind of format we want to have as an output. And in this case, it's an object format or a binary format. So it will be to the ad wasn't. And we can also have a look at what this looks like in the Otterbein aftermath, well, actually looks like and then you can see here on the on the slide that this looks very much like an assembly language. How do we do now if we want to use our was somebody that we are built? So the first thing is that we need to match the WASM file and then we can read it into an array buffer and then after that, we can use web assemblies. Web assembly is a standard, so it's is supported in all major browsers. We can call Web assembly instantiate with this Bitts Baret that we just read in. And then from the results of this, we can take the results dot instant dot exports and then here we declare the function name that we declared in them in our Web assembly called ATHU. So we signed this to a JavaScript object at and then we can run it as a regular JavaScript object. So we have to see what it looks like, just make a lot and then add two of two integers. And we will have that we have made our first hello world program in the in WASM. So another tool, which can be interesting to have a look at is something called the what some called explorer. So it's what some called the explorer you can load a binary Wasem file into. There was some called Explorer, and then you can have a look at the text format of that file. So here we have actually taken the binary file that we downloaded and then we have uploaded into the Wasem some explorer. And then you can see here on the right hand side in this tool that we get the same textual representation as what we actually added in the first first place. But this is quite cumbersome to write Web assembly by hand, so that's not really recommended. So instead, what I said was that what we would like to do is we would like to use a high level language like C or C++ or rest or go. And then we would like to compile this down to the assembly. I'm going to show you how we can do this using rust. And before that, before we do that, we have to have you have the quick introduction to what is. So, Rusty, this system programming language from Bill, so it's as a syntax similar to see your C++, it's a strongly typed and it's compiled down to native code. And one of the design goals with Rust as a language is that it should be memorized, safe and guarantee. And that's a that's a very huge benefit with using rust. Now, when we use trust, we need to be aware of the toolchain here, the toolchain basically consist of three different tools. So first off, base rust up. That's an installer for the for us, and then we have something called cargo with which is the Rust package manager. So there is there's a compilation of different crates. So you can see you can have a look at the crates that are you that this sort of the package registry for the rest of the community. And then we have rust see your rust compiler. So that's the compiler for Rust. If we make a into one program here, we can find a function and it should print out and the world and then we can just run compile with the main thrust and then the windows, it will generate an easy file and then it will just execute a trust called. You can also use cargo if we also in my line of right cargo knew and then the name of our project will create the binary application and the project. So you will get a source, the folder containing Rustaveli, I mean, Rothfeld. And it will also have a package declaration, which is called the Tommo. So in their main rest, we have a definition for a main function and then it will just print out the whole world and then in the in the tumble side, we have the package definition where we need to find the name or package a Russian name and also the authors. And if we have some dependencies on some other traits, we can define that also here in the package definition. We can use cargo to run, run, this will just run cargo run, then it will come by, compile our product and then also run the EXI fine that will be generated and then we can see the result of it in our command line. We know. So with Rust, we also have some types there, so we have primitive, primitive types, we have Bolian in the ground float and we also have some primitive constructs like it happens in the race function pointers and so on. Now, when we know a little bit more about trust now, we'll look at how can we use trust to generate the assembly file and then publish it up to AMPM. So the first thing that we need to find out is how can we compile rust down to Web assembly? So the first step in order to do that is to install a thrust toolchain. I was just talking about and then we need to add a new campaign target, which is called was 32, a known unknown. So with that target, then the compiler knows how to compile it down to Web assembly. And we also need to install something called Binyon wasn't binding. So what's Bindon? What it provides for us is that its bindings from from the application JavaScript code to Rostand to Watson so that you actually can call your your file from your. You always get called. This is an example here, so here we have the package definition, we call it the handle was the silver is the name of our package and we define some version and the description and then we define what kind of library is this photo? So then we have something called the C Dynamic Library, which we put on creates type. And then we also need to find some dependencies. So one of the dependencies is this tool that I was talking about. There was Binyan. And what it actually does is generate some glue file that we will have look at. They say it's our main failure, so we need to define that we have a dependency on an external crate, in this case it's the most done. And then that we want to use also the what's being done. And after that, we can find an external function and external JavaScript function that we want to use to be able to use the Yozgat function a lot in order to print out something here. And then we can define our function, which is a public function that we're calling an application will be able to use to record when name or function great that it has the string input parameters and then we just use the standard a lot function in order to print this out on the screen. So we then want to be able to package this so that we can load this up onto AMPM and we can run the Commander Kolovos Pack Imit. So what that will generate, that will generate a package folder with its content and. Then we can just publish it. Yes, that's we would publish and the other regular and package requests to publish package that you see here, then the result is that on the panel we have the package that that someone else can use to in order to add it to their own application. So we will have a quick look at what has been generated into our package folder. You can see here that there are four different files. The first file is a typescript file. So in this title file, it's declared, what is the different types of functions that we will be able to call from your script? So here we can see that there is agreat function that they will be able to call. And we can also see what is the format of our input parameter, what what will the output be? And then it also generates something that they can call glue file. So if this fellow was still with us today. Yes. So this is a JavaScript file that you can call for me with your own JavaScript application code. And this this code, this glue code will then call into the Web assembly. You can see, for example, for the function they tried to pass a string down to Wasem and it will take the input parameter that we that we defined and then it will try to this return Wasem somewhat, which is the function that we defined in the words of code. And then after that, we have to free up our memory. And then we also had the Jason file, and now that's just a regular package for Jason Farber, we define what kind of files we have. We have as a public profile. And we also have this glorified I was just talking about. And this is then how we can use this in our education so we can define a config and we can define a package for Jassam, for our education in this package, we define that to have a dependency on our of a silver package and then we can just ethem regular index. Fine. And the point this, we are using an index letitia's file where we can bootstrap our some Sahlberg package. We call this asynchronously with. Yes. And then you and then whatever you want to have are put on the. On the website. And this is the result from that. This has been sort of an introduction or a simple example of how you can use a can you trust in order to compile down to a Web assembly, and then we can use them to package this Web assembly and upload it to them and then how we find out how we can use them and package in our own Web application. I'm going to show you a little bit more complicated application here where we have some more input. So this is an operation which is an implementation of game of life. Four, four. So for those of those of you who do not know game life, it's this assimilation. So you have some rules for your assimilation that if you have lifestyle with fewer than two live neighbors, it will die because it's underpopulated. Or if you have a lifestyle with two or three live neighbors, it will live on to the next generation of our assimilation. Or if you have a lifestyle with more than three live neighbors, it will die because then it will be overpopulated. And in that cell, with exactly three live neighbors, will become a new lifestyle because of reproduction. And you can have a look at this example. More on the link below or below here. This is what it looks like. And we can see that the simulation has started and then we can use the button. Like this, and then we can go in the edit manually inside our simulations and we added some new cells in the simulation and then we can continue running our simulation. This is written in the and we're going to have a look at how this is done. Again, here is our package for a cargo package definition with the final name, the WASM Game of Life and the author and the Russian army needs to define what type of that number is this? So that is this the dynamic library. And then we also need to define our dependencies. So we need to ask before we need our dependence on this most Bindon in order to generate this blue code that was talking about. This is an extract of the actual rust code that we're using, so here we define a sort of this the game, the game plan or the universe. We find the width and the height and was to define some accessor functions for the within the height. And we also define a function in order to be able to toggle or so. So what. And this is our type of file where we define what kind of functions exist and what can be what can be called from the outside world. So you can see here that we can corner with the height and we can call the number of cells and we can also use call or toggle cell function. This is this you have escaped the blue file that I was talking about, so again, again, here we have a sample for the way it tries to call the of the universe, but with in order to retrieve what is the width of this simulation plan. And we also have the toggle cell function, which takes some arguments in the X and Y coordinates for the cell that should be toggled and it tries to hold on to the Vostok universe. Toggled cell function. And here in the Islamic world, we can just define the most delicate file where we can load our Web assembly. And then we can just import this universe that we defined in our package, for example, over here, we have just highlighted that you can also call your universe stogel cell here from your JavaScript file. So now some questions about performance because because what I said in my introduction was that one of the benefits of using Web assembly is that you will be able to run their native performance. We're going to have a quick comparison here between if you run the website or if you run JavaScript in becoming browsers in Chrome and in Firefox and then Safari or they have ever run the same type of simulation using both JavaScript and the assembly. And as you can see, that assembly is quite, quite a lot faster than the opposite. Well, what maybe even more important is that it has a constant spread so that if you run the assembly, you can be more certain of what type of performance you will be able to achieve. Whereas, for example, you can see the middle one, the on Firefox has quite large spread of the different trials. So then you don't actually really know what type of performance you will actually get in the den. I should also take into account that Web assembly is still quite a new new language, whereas now the script has been with us for a lot of times where we have had much more time in order to optimize the compiler and the concept runtime. So we can we can expect that this difference will be even more and will be even higher in the future. I also have some examples here from how somebody has been used in real world applications. My first example here is for the digital signal processing library. So one big benefit of the Web assembly is, is that you can use if you have already a library which is written in any of these languages that I mentioned, like C or C++ will go arrest and you want to verify it so that you can use it over the web and web assembly is a great tool in order to do that. There's an example of some people, they already had the seed library with some some transformation's for image transformations and video video transforms, it's called the Aspy. And then they used have been simply in order to be able to run this on the. What? This is an example of what this looks like. So this is in real time where we can change. Or transform, we do transform and then it just runs through through Web assembly and then down to the C-code, and you can have this real time transformation of the your. Well, your images and of your videos, so so the so the benefit of this is that you already have some application called that you are already using and that you you know, you can you can trust. And then it's a it's a small step. So just use Web assembly in order to be able to call this through the browser. Another example of this is and is AutoCAD. So what? For those of you who do not know, AutoCAD is a company that deals with drawings of constructions and buildings and so on. So back in so they have a huge amount of drawings going back to both the 70s and the 80s that they still need to somehow be able to provide to their customers. So in 2010, they tried the latest technology at that time, which was a flash app, so to do of you were for AutoCAD, you were using Flash. And if we fast forward to 2014, then it was the eighth time in five JavaScript that was and was trending at that time, then they made another viewer application using that. And in 2016, they used a compiler called M Scripting to be able to compile C++ down to 90 over scripts. And then in 2017, they used something called Real W.G., which is their own format for that for these drawings they're made of, you were for that which is Web based. And then in 2018, they made an AutoCAD Web app saying using maybe somebody. And the interesting thing with this is how this how this application has been structured. So basically, you have on top, you have some as a normal web technologies like Reactant TypeScript, and then you have you like you can have your component libraries and then you have this web assembly binary. And this will call down to the AutoCAD Core Library, which is the C++ code. That means with that of having to rewrite their their whole portfolio of of code, they could instead just use Web assembly and reuse, reuse their existing native C++ libraries and expose this asset allocation. I'm going to be talking about some future plans here for assembly. Well, one thing that I've mentioned in my talk here is that we have some you always get new file, which acts like a sort of intermediary between your application code and the Web assembly. So but that's not very performance. So what I want would like to try to do is would like this to be able to call directly through the door, more directly to a by and not having to. They're not having to be restricted to this glue file. I was talking about and in the same thing, we would also like to be able to do an import or wassmann JavaScript. So I says, maybe you saw her in my previous examples, I had load my JavaScript as I'm currently in order to be able to run it. But they just want to be able to import a justice and other type of library. And then in addition, they would like to support more languages so and so. As of now, it's one of the criteria for language table to compile compile down to your Web assembly is that you can't have a garbage collector. So. So, for example, Java is not supported as of as not. Another new thing is called Cervalis Web Assembly, so a Web site is not only for the browser, they have some different providers like Clarifier and Fazli that can support somebody so they can actually write serverless or service function in Web assembly. So why would you want to do that? Now, one of the things is that you will have a much faster launch time and you don't need to rewrite. Maybe you already have some sort of code and you can just use on the assembly instead of rewriting it to your script. This is an illustration of the different types of options that we have, either you can have somebody running on the back and the recall of somebody from the front and we can have client side JavaScript or we can have Clydeside Assembly or we can have this Cervalis BabyCenter that I was just talking about. Also, something called Vasil, the system interface, so one of the ideas with this initiative is that they want to be able to run Web somebody outside of the browser. So what will make it less restrictive so that you can actually run it in different environments? But then we need to have an interface for this conceptual operating system that could interoperate with this WASSE standard. And the the goal for this is that you should be able to be able to run the assembly on all types of operating systems. So as of now, when you run Web assembly in the browser, it needs to adhere to the same type of safety restrictions as you always get. So there are lots of things that you can't do with that assembly. If you if this was a standard comes into place, then you can have some sort of intermediary that can negotiate with the operating system and see if it's this file. OK, OK to be run. And if it is, it will just transfer the file over to over to the operating system. Oh, fine, and I'm going to talk a little bit about some. Some other frameworks here for that is using that assembly. So one of this framework is called a similar script. So, as I say, it compiles a subset of typescript down to the basement using a compiler called Binary and. And you can see her an example of how that looks like. And one of the things that you need to be aware of if you run the script, is that you need to have the memory allocation. So you both need to allocate some memory before you start to use your name, before you start to use the rest of the script. And then you also need to free your for your memory when you're done using it. And we also have Leyser I know there are several talks at this conference that talks about are, so I'll just mention this very, very briefly. Basically, they're based basically laisser is a framework that where you can write revocations, estimates and regular C sharp. So with us there are two types of flavors of Basser. Either you can run it on the server and then you have clients events that is Anspach using SIGNALER or you can run it on the assembly and then you will actually have a version of that of that framework running on an assembly. One important question here is, isn't this just the new old new old new heaven for me? You know, and we just seen all this before. Take some examples from the past, we had the ActiveX I mean, I was at the Flash and we had silver light and then none of these were as survived. So why would I would the would assembly have a higher chance of success than these previous frameworks? And so, for once, all of these were proprietary to the company that was making these these toolkits, whereas Web assembly is it's a standard that has been agreed upon between the different browser vendors. So there is a much higher probability that this will be something that we can make use of our long time in the in the future. What is the conclusion of all of this, because when I first started to hear about them assembly, one of them when I was sort of the headlines was that you always get this is and long live Web assembly. So the question is, how should we do it wasn't all the things I don't necessarily think that. I think that maybe somebody is just one other tool in your toolbox. And I saw one of one of the use cases where it really shines is if you already have a set library of either C or C++ code and you won't be able to expose this out in the browser and you don't want to rewrite your whole library, then the assembly is a really great candidate for that. And another thing that we also need to be aware of is that we're still sort of in the early phase. So there's a there's a lot of tooling that can be improved because, quite frankly, some of these tools are a little bit clunky to use right now. And it's not super user friendly, but I think that this will also change with time. So to finish my presentation, I will also give you some. References with some articles where you can read up more on the Web assembly and you can also read a little bit more about Leyser, if you're interested into that. With that, I hope that you find is inspiring and that you would like to find out more about that assembly and. You want to reach me, you can reach me either on Twitter or you can send me an e-mail and I will be here throughout these remaining three days and the conference we saw on the U.S.A. So if you have some I still have some time left here for questions so you can write to questions either in the Q and A panel here on WebEx or you can write some questions on the black. That I would like to thank you all for your time.