 Hi everyone. First of all, I'd like to thank FossAsia for allowing me to share my passion for WebAssembly to you. It's something that I've been keeping tabs with every now and then as it progressed in the recent years. Mainly, I find WebAssembly's potential and support for multiple languages quite attractive. I'm Paul and I'm a bit of a polyglot. I mainly use C-Shop at work and recently using Java also for new projects. Outside work, I help co-organize the following tech communities here in Singapore. Big Data X and DataKind. We organize workshops related to data and data engineering in Big Data X. We aim to raise data engineering literacy in Singapore and around the region. As most communities these days, in light of the virus situation, we're also considering online events. In DataKind, we use DataScience to help non-profits get insight from their data so that they can serve their communities better. We tend to use Python and R in a number of associated projects. Usually, we hold monthly data chunks in line with this goal. We cap this on hold for now until further notice as we're in challenging times. If you're interested to know about these groups, feel free to contact me online or when we see each other in future local meetups. Like WebAssembly's approach to languages, we do our best to be open and inclusive. Perhaps some of us already know this but before we proceed further, I'd like to revisit some of the concepts on WebAssembly so that it's easier for us to refer to them later. So what do you think of WebAssembly? What is WebAssembly in the first place? Well, in the web, there are quite a number of definitions. From what we have here, it says that it's a new type of code and it looks like an assembly. And it's a compilation target that provides languages such as C, C++, and Rust so that they can run on the web. This is from Mozilla or from the MDN documentations. And if you want a more thorough definition, we can get it from the WebAssembly specification itself, which is maintained by W3C. From there, it says that WebAssembly is a safe, portable, low-level code format. And its main goal is to enable high-performance applications on the web. It's quite a detailed definition but on my side, I'd like to think of it as a new compilation target, mainly to enable high-performance on the web. But since I won't be discussing much on performance in this talk, I'll be focusing on WebAssembly on how it provides languages such as C, C++, and Rust with a new compilation target. So now that we've established that, hey, I can write in C, C++, and Rust, and I'm able to pile this into WebAssembly. How does it work? How can you use this on your web project? So let's look at that scenario. As you can see here, we have WebAssembly that serves as a compilation target, here the WebAssembly binary which is has a wasm extension. One can write the logic in C, C++, or Rust or any supported language and compile it into wasm. This gets loaded in JavaScript, which is embedded in the web page. In the current phase, WebAssembly still has a number of limitations, one of which is that it doesn't have direct access to the dome. So you would still need JavaScript as a glue to make use of WebAssembly in the web page. But technology is constantly evolving with new features being worked on post its MVP status. And it has come a long way, and perhaps some of you are asking, how did this WebAssembly came about in the first place? In that light, I'd like to share a brief picture of the WebAssembly timeline. It's relatively short since that technology is quite recent. It started in April 2015 when the WebAssembly community group was formed. It was initially composed of representatives from some major browser vendors that wanted a new code format for the web that's faster than JavaScript. In June, they announced that they're working on the standard. In March 2016, the community group defined the core features that will be in the standard. Few months later, some of the browsers implemented those features as a preview for the community to try out. Early 2017, the community has chosen an official logo. I think this is done in GitHub. I managed to browse the development of this. And I saw some funny submission as well. So you might want to check that out when you get some time. In March, the WebAssembly MVP was declared complete and the preview phase ended. In September that year, Safari announced its support, which makes WebAssembly supported on all four major browsers, namely Chrome, Firefox, Edge, and WebKit. In February 2018, the new WebAssembly working group, which was formed the previous year, published three public working graphs for core specification, JavaScript interface, and Web API. Last year was also eventful in March. While it was announced, it's a system interface to run WebAssembly outside the web. Last December, the World Wide Web Consortium, or W3C, announced that the WebAssembly core specification is now an official web standard, launching a powerful new language for the web. While all of these are happening, various languages are also trying to leverage on WebAssembly. In this talk, let's take a look at two of them. Let's have a look at Rust. As you can see here, the Rust approach is on par with what we've discussed on how WebAssembly works a while ago. First, we have the Rust source code. Then we'll compile that to Wasm. Then we use a JavaScript blue to make use of the Rust library in our web page. As you can see here, the first part is the function that we're importing from JavaScript so that we can call it inside the Rust source code. And then the grid function will call that later inside the JavaScript. So this is how we import the Wasm file. And then this is how we call the function from Rust. So let's look into this and how it looks like in code. So here I have a small Rust project. Let's take a look at the librs. This is the same code that we've shown in the slide a while ago. I'm going to build it next to produce the Wasm binary file. So I'm using Wasm pack here. And once it's complete, you should be able to see the package folder getting created. And you can see the Wasm file there, including the JavaScript blue. And on top, you can see how it is being imported and then how it is being called. And from here, I have a sample web page to make use of it. I have a version of index.js, which does the glue. And I'm also trying to import or have the dependency dependent on the package folder that was created a while ago. So I'm just going to run it. Once it's done, I'm just going to open it in a web page. Hello, false Asia. So there you go. The Rust implementation on WebAssembly. The Rust approach is similar to what you do if you're going to implement using C++ via mxscripten. However, our next language has a slightly different implementation. Let's take a look at C sharp. So in C sharp, we don't actually compile directly to WebAssembly. So instead, as you can see here, we normally compile it to our normal .NET DLL and that gets run by the .NET WebAssembly, which is the one that is directly interacting with the WebAssembly runtime. So we have an intermediate .NET runtime that enables our code to run. So here, this is our code and later we're going to use this to implement our application. So let's do a small demo on how it is being done in C sharp .NET via Blazor. So here we have a small project, Blazor project. And if we open this counter that razor file, we have the code that I've shown you in the slide as well. Let's just modify this a little bit and apply some free and open source software text. We'll modify the current count a bit, make it maybe count two at a time. And let's do a build. Sometimes this takes a while to build, but we should be able to see the compile .NET code, which is the DLL, and that DLL should be consumed or executed by the .NET runtime, which is in WebAssembly. That's our project DLL and what we're going to do next is to run the application. Let's open the browser and see the application from there. As you notice a while ago, we don't have to write any JavaScript. We can use C sharp all the way together with our HTML. So that's the implementation. Now, perhaps some of you will be asking, what about the other languages? So across the spectrum initially when I was preparing for this talk, I was initially thinking maybe I can use Python also to compile into Wasm, but I didn't find any approaches yet to do that. I think there are some Python implementation, but it's more of a Python runtime running in WebAssembly, not really compiling into WebAssembly file. So some of the languages are still in progress. Some are unstable, although you can use it already. And some are stable for production usage. So some versions of Blazor is already in a stable form, but some are added functionality which are still in preview mode, which includes the one that I showed you a while ago. So if you're interested to check the status of other languages, you can go to this link. It will show you corresponding status of various languages and on how far they've gone in terms of WebAssembly implementation. The last part that I'll be sharing about are these two things, Wasm time and Wasmr. These are standalone run times for WebAssembly, which enables one to run WebAssembly beyond the browser. Both supports Wasi, a system interface to run WebAssembly outside the web. You can execute your compiled Wasm in these run times. As an additional feature, you could even embed Wasm and use it in another programming language to compile Wasm from, let's say, Rust and then the compiled Wasm you read that in Python, for example. Let's take a look at each of them. In this is Wasm time. So let's say you have a simple Rust program. Here we have the HelloFossAsia, so we just compile it and then set the target to Wasm32, Wasi, and then use that runtime to run the Wasm binary and then it will execute accordingly. The same thing will happen for Wasm. Wasm has some sort of, it looks like npm, so you can download Wasm libraries using WAPAM, but that's part of its toolset as well. When you run it, it's also kind of the same. So when you run, let's say, a Wasm file, you can even pass parameters on it and it will execute accordingly also. On top of that, you could also compile Wasm from another language like Rust. Here you can have some function compiled into WebAssembly and then on the right side, you can see we have a Python script that is loading the corresponding Wasm binary that was compiled a while ago from Rust and use it accordingly in Python. So you can have sort of language interrupt using WebAssembly as well. WebAssembly is very, very interesting technology. Although at the current state, it may not be that attractive to some, especially some languages that requires garbage collection. I had the chance to talk to I think the founder of Growl VM. I think they're also waiting for this feature so that they can enable Java to be compiled into WebAssembly as well. And at the current state, there's no direct DOM access. You still need some JavaScript glue so that you can make use of your compiled Wasm into your web page. And of course, there's no support for older browsers. Although some things have read that even though there's no support for older browser, I think there's a polyfill solution for it. So if you need to support older browser, maybe that is something that you need to explore. So this is the end slide. And some of the resources that I've checked when preparing for this talk, the first link is where I got the WebAssembly specification from. It's very detailed. And the second one is, I think, friendlier documentation which is from MDN. The third one is how you use Rust for WebAssembly. You can walk through the whole set on getting the Game of Life set up as one of its demo. And the fourth is about Placer. It's like that net implementation of WebAssembly, especially for C-Sharp. The last three are more into WebAssembly beyond the browser. If you have any further questions from this talk, feel free to reach me out on Twitter. That's my Twitter handle on the lower right. And that's also my GitHub ID so you can ping me whichever is convenient for you. Again, thank you very much for your time. And yeah, this is very interesting technology. I hope most of us will be able to use it soon. Thank you.