What Is WebAssembly?

1. Where Did WebAssembly Come From? - Let's learn about WebAssembly. We'll start by exploring where it came from. And before we do that, let's look at the definition just to get a feeling of what we are talking about. Here it is. WebAssembly is a new type of code that can be run in modern web browsers and provides new features and major gains in performance. This is a definition from developer.mozilla.org, which has a lot of WebAssembly documentation. So it says that WebAssembly is a type of code. It is actually a binary code format that you can run in a web browser and in other places. This new type of code is useful because it is very performant, and you can compile languages, like C++ and C#, into WebAssembly. We'll dive into what it is and why it is useful later on. Now let's take a look at where WebAssembly came from. The history of WebAssembly is relatively short so far as this is a new technology that is just beginning to gain traction in the industry. It all starts in 2015. In April of 2015, a group called the WebAssembly Community Group is started. This is a community group of the World Wide Web Consortium, or W3C. This community group initially consisted out of people from some major browser vendors that wanted to create a new code format for the web that was faster and more portable than JavaScript. This effort started after other efforts, like _____, which performed a similar role, but had very specific implementations. In June of 2015, the group announced publically that they were working on this new standard called WebAssembly. And in March of 2016, the community group created their first definition of the core features that would be in the WebAssembly standard. And from that date, some of the major browsers implemented some of these core features as experiments. In October of 2016, a minimal viable product was announced as a preview for the community to try out and build applications for. This MVP was also supported by all the major browsers. This was pretty big news because now all of the major browsers had actually implemented this first preview version of WebAssembly. In January of 2017, the community chose a logo, which is this logo. I should note that so far all of the work that is being done, including the creation and choosing of the logo, is done by the community, all of it in the open on GitHub. And later in 2017 in March, the major browser vendors, which included Chrome, Edge, Firefox, and WebKit reached consensus about the minimum viable product, which meant that it was complete to the extent that no further design work is possible without implementation experience and significant usage. This also ended the browser preview period. In August of 2017, a new group was created to officially start work on the standard of WebAssembly. This was the W3C WebAssembly working group. They were tasked to create official standards for WebAssembly that could be used by all the browsers to implement WebAssembly, just like the standards for HTML, CSS, and JavaScript. And although WebKit was in the community group, it wasn't until Safari 11 that Safari supported WebAssembly. Safari 11 was released in September of 2017. And the final point in the WebAssembly history so far is in February of 2018 when the first draft specifications were delivered by the new WebAssembly Working Group. These specifications contained standards for WebAssembly and various components of it. When you are watching this course in the future, the standard will have been furthered to an official 1.0 version, and evolutions of that version might have already happened. Now let's take a brief look at who is developing WebAssembly. We've seen two groups in the history of WebAssembly so far. The first was the WebAssembly Community Group. This group contains people from all the major browsers, and they started WebAssembly. They really pushed the evolution of it by already implementing early versions of it in the major browsers, even before there was an official standard. This group now consists out of more than 900 people, and it is open for anyone to join. And in 2017, the W3C WebAssembly Working Group started. This group contains people from lots of major companies, like Facebook, Apple, Google, Tencent, W3C itself, Mozilla, and LG Electronics. This shows that the industry is investing in this new technology. The mission of this group is to create standards for WebAssembly that can be used by browsers and other platforms to implement WebAssembly and interpret it. This already resulted in draft standards for WebAssembly in February of 2018. Before we move on and look at what WebAssembly actually is, let's look at which browsers support it. Currently in June of 2018, WebAssembly is supported by a lot of web browsers. You can use the website caniuse.com to see what the current status of support is.


2. What Is WebAssembly? Now that we know where WebAssembly came from, let's take a look at what it actually is. To understand what WebAssembly is, you need to understand what JavaScript is. Let me explain it briefly. And if you already know what JavaScript is, bear with me. I'll be quick about it. JavaScript is a high-level interpreted programming language. It is often used to create applications for the web, and it can also be used for server-side applications, like in Node.js applications. It is a high-level language, which means that it abstracts things like memory management and tries to make programming easy. Here is how it works in the case of the web. The web consists out of documents, mainly HTML documents, which can be styled by CSS. JavaScript files are used to give websites and applications functionality by letting users interact with them. These files are hosted on a web server, which is just a computer like any other, but this one runs special software that can expose the documents to the web using unique URLs like these. People that use the web use computers that have web browsers on them. When they open a website, their browser locates the files of the website using the hypertext transfer protocol, or HTTP. This gets the files and downloads them to the client computers where the web browser renders the HTML and executes the JavaScript. If you want to find out more about how this works and what the relationship between HTML, CSS, and JavaScript is, I recommend that you follow my Pluralsight course, HTML, CSS, and JavaScript: The Big Picture. So the web browser now has to process these files, HTML and CSS to display things and JavaScript to make the application interactive. Each web browser has a display or render engine to process HTML and CSS. And each web browser has a JavaScript runtime, which is sometimes called the JavaScript VM to execute JavaScript. This runtime is a sandbox, which means that the browser executes the JavaScript, but the JavaScript can't access everything in the browser, which is good because that makes the web more secure. The web browser does offer a web API that JavaScript can use to access things like WebSockets, WebGL, files, audio, and the DOM, which represents the elements on the web page. So far, so good. Now where does WebAssembly fit in? Well, WebAssembly is also code just like JavaScript, and it can run in web browsers just like JavaScript. In fact, it runs in the same runtime as JavaScript. And because of that, it has the same type of security as it runs in sandbox. And WebAssembly code can also access the web API, which can access things like the DOM, audio, and WebSockets. So why WebAssembly? Why not just have JavaScript? Let's look at the difference a bit more closely. Here is some JavaScript code. It is high level, which makes it easy to understand and write. And here is some WebAssembly code. The file format for WebAssembly is WASM. WebAssembly itself is sometimes called WASM. These are two very different languages, and that is because WebAssembly is meant for speed. JavaScript needs to be understood by the runtime, where WebAssembly is already written in a format that the runtime doesn't have to interpret and figure out. It just executes it. This doesn't mean that WebAssembly is the new JavaScript and replaces JavaScript, not at all. It has different use cases that JavaScript and complements it. They exist side by side and work together. Alright, so the JavaScript runtime is part of web browsers. So it runs on the client on people's computers and devices. Hence, the JavaScript runtime can also run server-side. There are implementations of that, like Node.js, that run JavaScript on the server and can also run WebAssembly on the server. But the plans for WebAssembly are not restricted to it running in the JavaScript runtime. It can also run on devices outside the browser, like on an Android device. There it will run in WebAssembly runtime that is not the JavaScript runtime, and it will have access to different APIs, like the APIs that Android provides to native apps. Here's another definition of WebAssembly, which is more complete than the one we saw earlier. This one is from the official WebAssembly site, webassembly.org. WebAssembly, or Wasm, is a binary instruction format, so binary code for a stack-based, which is a type of memory management, virtual machine, like the JavaScript runtime. Wasm is designed as a portable target for compilation of high-level languages, like C, C++, and Rust, which enables deployment on the web for client and server applications. This definition is pretty broad, but shows the intent for WebAssembly pretty good I think. It is intended as a binary instruction format. So although you could code it by hand, maybe you shouldn't. And it is a target that other languages can compile to, which is not restricted to the client. Now you might have already figured out some of the benefits of WebAssembly. The first one, which is very important, is that it enables code to run at near-native speed. Compared to JavaScript, some tests indicate that it is 20 times as fast. Another benefit is that other languages, like C++ and C#, can be compiled to WebAssembly. This is very important because it enables developers that are not JavaScript developers to create applications for the web. This opens up web development more than ever before. And WebAssembly is natively supported by web browsers. It runs just like JavaScript without the need for a plugin, like Flash or Silverlight. WebAssembly applications run in a secure sandbox, just like JavaScript, which helps with security. And JavaScript code can run WebAssembly modules, like something you've created to perform a computationally intensive task in WebAssembly, like rendering video. You can use that WebAssembly module in JavaScript, even when you create the rest of your application in JavaScript. All these benefits are great, but what can you use WebAssembly for? Here are a couple of examples. You can use it to create video and audio editing applications that run completely in the browser. This would be very difficult without WebAssembly because such applications require high performance. The same goes for audio and video streaming applications and for games. You can also use WebAssembly to create video and audio conferencing applications and even to create virtual reality and augmented reality applications that run on the client in your browser or on another device. The performance of WebAssembly makes that possible. And the final example is to run artificial intelligence applications that use machine learning on the client. WebAssembly's performance allows it to run such compute-intensive algorithms on the client and to do things like image recognition. And here's an example of a game that uses WebAssembly. This game is called Funky Karts, and you can play it at this URL. Here goes. Here in the Microsoft Edge web browser, I've loaded up the Funky Karts game. This is a great example of something that you can create with WebAssembly. What it does is actually pretty complex as it simulates gravity, which is computationally relatively heavy. In this case, all of this happens on the client, and I use my keyboard to interact with the game. So WebAssembly takes input from the browser and all of this without any plugins just by using HTML, JavaScript, and WebAssembly.


3. Working with WebAssembly Now that we've seen where WebAssembly came from and what it is, let's look at how you can work with WebAssembly. There are several ways to use WebAssembly to create applications. The first one is to write WebAssembly code yourself from scratch. The second one is to compile code from other programming languages, like C++ or C#, into WebAssembly. And the last one is to use already existing WebAssembly modules in JavaScript. Let's take a look at these three ways of using WebAssembly. You can write WebAssembly code yourself from scratch. This code then runs in the runtime that executes WebAssembly, which is a JavaScript runtime in web browsers and can be different runtimes in different environments. The WebAssembly code that you run is in the format of a WASM file and looks like this. This is very optimized code that the runtime understands. It isn't meant to be understood by humans. So how can you write it yourself? You can use the WAT format, which is a human-readable equivalent of the WebAssembly code, and it looks like this. There are several variants of this format. Some are very straightforward. Others are hierarchical in nature, like in this sample code that you see here. Once you've written this code, you can convert it to the WASM format that the runtime understands with tools like the WebAssembly Binary Toolkit. There are other tools out there that do this conversion, and more and more are being developed. One example of tooling that you can use to write WebAssembly from scratch is the WebAssembly Studio that you see here. This is an online environment that you can use to write and compile WebAssembly code with. You can reach it at this URL, and I invite you to try it out. It offers several prebuilt projects for us to try out. Let's try out the Empty Wat Project. The studio shows which files are in the project, like the main.wat file. Let's take a look. This is WebAssembly in a readable format that you can create yourself. And this code does an add operation on two integers that it gets. In the JavaScript file here, we instantiate the WebAssembly module that comes out of the WAT file and call it here. This calls the module with two integers, 1 and 1. Let's build and run it to see what happens. Here we go. The result is 2, and the build resulted in a WASM file. Let's look at it in its binary form, which is what the runtime understands. This is what it looks like, not readable to humans. Well, at least, not readable to me. So the WAT file contains the exact same code, but in readable form. Let's go back to the JavaScript file and change the parameters. I'll add in 2 and 1. This should add up to 3, right? Let's see. And yes, it works. So this tool, the WebAssembly Studio, can build files, like the WAT file, into a WASM file and do the conversion for us. Another way of using WebAssembly is by compiling code from other programming languages into WebAssembly. This is very cool because this means that developers that don't use JavaScript can also create applications for the web. And it means that you can use existing code and use that in web applications. So suppose if we have a C++ file that contains code like this. This code simply writes out Hello, World. We can use a toolchain to compile this code into WebAssembly code. The toolchain is different for every language that can be converted into WebAssembly. For C++, you can use the Emscripten toolchain, although there are others too. The Emscripten toolchain helps you to relatively easily compile your C++ code into a WASM file with WebAssembly code, which can run in the WebAssembly runtime. There are tutorials on how to use the Emscripten toolchain for WebAssembly on the webassembly.org website. You can also use other languages and run them as WebAssembly code. In the Microsoft world, you can use C# code. There are several ways to run C# code as WebAssembly code in web applications. One way is to compile the C# code into DLL files, just like you normally would when you use .NET to run your application. Only now the DLL runs on the Mono runtime, which is converted into WebAssembly and runs in the WebAssembly runtime in the browser. So essentially, you are running your C# code on Mono, and Mono runs on top of the WebAssembly runtime. This is an experimental toolchain that is called Blazor, although the name might change. Let's take a peek at what Blazor looks like. Here I am in Visual Studio, which is a Microsoft development environment. From here, I can start a new Blazor project, which is an ASP.NET Core project. Let's call it BlazorTest. And now I can choose to create a Blazor project and OK. The Blazor project is a regular ASP.NET Core project, which you might recognize if you are familiar with it. Don't worry if you aren't. Essentially, this is just a website with HTML, CSS, and JavaScript and some programmatic bits to make development easier. Here, we can find the index.html file, which is the main file of the website. It doesn't really do much except for reference this script. This is the magic code that this framework understands to initiate the Blazor toolchain and run on top of Mono in WebAssembly. And here in these pages are components that you'll see in a minute. One of them is the Counter component. This injects some HTML on the page, which is a button in this case. And when you click the button, this C# code will be executed. This just adds a number. Let's run this to see what it looks like. Here we go. So here is the Counter page that we just saw with the button. And when I click it, the number changes. And there is this code. The big deal here is that instead of doing this with JavaScript, the framework allows you to use C# in your HTML. This is huge because it opens up the web to more possibilities than JavaScript can offer and to more developers that use other languages than JavaScript. The previous two ways to use WebAssembly resulted in WebAssembly code that you can run. But how do you actually run this code? Suppose that you have WebAssembly code, which we can also call modules. These are pieces of WebAssembly code that do a specific thing. You can have many of these WebAssembly modules that together make up your application. You can use these by instantiating them from JavaScript. This is what happened in the previous examples as well. You didn't see it with Blazor, but under the covers, the framework ultimately loaded WASM files in JavaScript. This looks like this. In this example, we instantiate a WebAssembly module that adds two integers. This looks kind of complicated, but in the future this will be more streamlined and supported by different tools. For now, when you have a WebAssembly module, you load it using JavaScript. This means that you can instantiate your own WebAssembly modules, but also modules that other people created, just like you now use open-source modules from package managers, like NPM and NuGet. So WebAssembly has a great relationship with JavaScript, and it is not meant to replace it, but to complement it. So in the JavaScript runtime, you can run JavaScript files and WebAssembly files. As we just saw, you load WebAssembly files, so WASM files, from JavaScript to run them, and you can pass parameters through the WASM modules. But the WebAssembly code can also interact with JavaScript. It can actually call JavaScript code, which makes the JavaScript WebAssembly relationship very tight. The thing to remember here is that WebAssembly does not replace JavaScript. It works together with JavaScript and complements it.


4. Things to Remember We've learned a lot about WebAssembly in this module. Let's go over the things that you need to remember. WebAssembly is a code format that was created by the WebAssembly Community Group and is being developed into an official standard by the World Wide Web Consortium WebAssembly Group. This means that WebAssembly is a standard just like HTML, which browsers implement. Why would you use WebAssembly? Well because you can compile other languages, like C#, into WebAssembly, which opens up web development to new groups of developers. And WebAssembly is also very performant, way more performant than JavaScript. And WebAssembly is already supported by all the major browsers. They all use the JavaScript runtime to run WebAssembly code, which means that WebAssembly runs natively in the browsers without any plugins. You could use WebAssembly for lots of applications, for instance for games as it is so performant. The same goes for virtual and augmented reality and for audio and video streaming. You can use WebAssembly by writing it yourself from scratch using the WebAssembly text format. Or you can compile code from other programming languages, like C++ or C# into WebAssembly code. Or you can use WebAssembly modules that you or other people created, just like you use modules from package managers, like NPM or NuGet. Now that you know what WebAssembly is, you'll learn why it is such a big deal in the next module.


5. Why Is WebAssembly Such a Big Deal? Introduction There is a lot of buzz around WebAssembly. In this module, we'll take a look at why that is and why it could become a revolutionary technology for the web. We'll first dive into why WebAssembly is such a big deal, and then we'll look at the things to remember for this module.


6. What Is The Big Deal with WebAssembly Let's take a look at why WebAssembly is such a big deal. We've already seen what the benefits of WebAssembly are. I think that three of these benefits are what make WebAssembly so special. The first one is that WebAssembly is fast. It can run code at near-native speed, so almost as fast as code that runs natively on your operating system. The second big thing about WebAssembly is that other languages can use it as a compilation target. This opens up the web in new ways that we haven't seen before. And finally, WebAssembly is part of web browsers, which means that you don't have to install a plugin to run WebAssembly code. Let's explore each of these areas. WebAssembly is fast. It can run code much faster than JavaScript in most cases, and it produces faster applications in general. That is in part because WebAssembly code is optimized. It is byte code that is very compact, which results in small files. This is great for web applications where every byte that has to be downloaded counts. So WebAssembly files are small, much smaller than JavaScript files, even minified JavaScript files that are optimized to be small. And the main reason that WebAssembly is fast is that it is interpreted and executed very fast. In comparison to JavaScript, most code runs much faster than JavaScript, although it depends heavily on the particular piece of code and scenario. The reason for the performance increase is that WebAssembly is a much lower-level language than JavaScript, which means that the runtime doesn't have to do as much work to understand and run it. There are many benchmarks that you can find online, and it is hard to say definitively how much faster WebAssembly is than JavaScript as it depends on the piece of code and even the browser in which it runs. But the performance increase generally ranges between 6 and 20 times. So WebAssembly is 6 to 20 times faster than JavaScript. This doesn't mean that you should replace all of your JavaScript with WebAssembly. JavaScript can still be very, very fast and has other benefits, like readability. So you should choose which pieces of your application are most computationally heavy to benefit from being run as WebAssembly code. The next reason why WebAssembly is such a big deal is because other languages can be compiled into WebAssembly. Let me explain why I think that this is a big deal. Web browsers are the core of the web. We use them to display web applications, and they work very well. The beautiful thing about web browsers is that they are a great mechanism for cross-platform and cross-device applications. Once you've created a web application, you can make it look good and make it work in all browsers of all sizes. This means that your application can run in a browser that runs on a computer or a laptop or on a tablet, on a phone, or even on a browser in a virtual reality headset. Browsers are everywhere. And on top of that, all of these devices come with browsers already installed on them. You don't have to install a runtime. It is already there. Now the drawback has been that when you create a web application, you could only use JavaScript as a programming language that would run on the client device. This is not a bad thing. It just means that the web was bound to the capabilities of JavaScript, and only people that know JavaScript can create applications for it. Now with WebAssembly, things are more open. Code written in languages like C# can run on WebAssembly, which means that you can now create an application with C# that will run in the web browser just like JavaScript does. Note that WebAssembly will also run in other places than in web browsers. But for the web, this is a big deal. There are a lot of programming languages that can run on WebAssembly. Some compile their code directly into WebAssembly code. Others use runtimes that run on top of WebAssembly. There are already many languages that can compile to or run on WebAssembly, and the list keeps on growing as WebAssembly is maturing. This is very exciting. These languages bring their own unique capabilities to the web that JavaScript might not have. And now you can reuse existing code to run on the web. Being able to write web applications in other languages than JavaScript opens up web development to developers that previously shied away from it. So on top of the many developers that create JavaScript today, WebAssembly enables many more developers that use other languages to create web applications. This is truly a revolution for the web. And the final reason why WebAssembly is such a big deal is because it is part of the web browser. Yes, it can also run in runtimes that aren't part of web browsers. But for the web, running WebAssembly in a web browser is very beneficial. With JavaScript, we could already do amazing things. But doing really computational intensive tasks, like video and audio editing and rendering and gaming, were difficult because of JavaScript's limitations. To enable scenarios like these, we previously used plugins, like Flash or Silverlight. These are runtimes that you install on top of your web browser. However, having users install a particular version of a plugin is something that we don't want. And a lot of devices don't allow users to install plugins anymore because of the security risks involved. That is why WebAssembly is such a big deal. It runs natively in the browser. It is part of the web browser, and almost all of the major web browsers already support it. So now you can create applications, like video and audio editors and games, that all run on WebAssembly without the need to install anything. You just need a web browser that supports it. And web browsers are already available on almost any device that you can imagine. So WebAssembly will also be available on all of those devices. This is a big step forward for the web.


7. Things to Remember Let's recap what we've learned in this module. We've learned that WebAssembly is a big deal because it is very fast. It can be much faster than JavaScript. And you should use it to do computationally intensive tasks with. What also makes WebAssembly a big deal is that you can compile other languages, like C# and C++ to WebAssembly. This enables developers that use other languages to create web applications, which opens up the web to more creators and more possibilities. And this means that you can reuse existing code in web applications. And the final reason why WebAssembly is such a big deal is that it is part of all the major web browsers. It runs natively in browsers so users don't have to install a plugin to use your applications. That's it. In the next module, we'll summarize this course, and I will point you to some resources that you can use to start learning more about WebAssembly.


8. Where to Go from Here? Introduction Now that you know what WebAssembly is and why it matters, you might want to learn more about it. In this module, we'll sum up what we've learned so far, and we'll take a look at some of the resources that are out there to learn more about WebAssembly.


9. Things to Remember Let's recap the most important parts of this course. Web browsers have an engine that allows them to render and display HTML and Styleneat with CSS. Browsers also have a runtime that allows them to run JavaScript. This is sometimes also called the JavaScript VM. This runtime can run JavaScript code, and it can also execute WebAssembly code. WebAssembly code is different from JavaScript code as it is code in a binary format, so very low level, where JavaScript is high-level code. JavaScript and WebAssembly code can access things in their environment that the browser provides. These are things like Web Sockets, the Canvas, audio, and the DOM, which represents all of the elements on a web page. These things allow the JavaScript and WebAssembly code to interact with the browser and the device it runs on. So WebAssembly runs in the JavaScript runtime alongside JavaScript. It is not a replacement for JavaScript. It works together with it. The JavaScript runtime can be found in all web browsers, but it can also be found on the server side. Node.js is an example of a server- side JavaScript implementation. And in the future, WebAssembly will not depend on JavaScript anymore, but will be able to run in its own runtime, which can, for instance, run natively on a mobile device and have access to its capabilities, like the camera and microphone. So why should you use WebAssembly? Well, because it is fast. It can be much faster than JavaScript, which opens up new scenarios for application development and because you can compile other languages, like C++ or C#, to WebAssembly. This means that you are no longer bound to JavaScript to create web applications. And WebAssembly is part of the web browser. It doesn't require a plugin to be installed. All of this enables you to create applications that were previously very hard to create for the web. You can, for instance, create video and audio conferencing applications that use WebAssembly to handle the computationally heavy work. You could also create virtual reality and augmented reality applications that run in the browser and, of course, games that run in the browser on WebAssembly, of which there are many examples already.


10. Resources to Learn More Let's complete the course by taking a look at some resources that you can use to learn more about WebAssembly and to get started. Don't worry about pausing the video to copy over the URLs that I'm about to show. All of the slides in this course can be downloaded from the Pluralsight website. Just click the Exercise Files tab in the course to get them. Let's start with some general resources to learn more about WebAssembly. The first one is webassembly.org. This is the official website of WebAssembly, so here you'll see any relevant news and all of the basic documentation and the intention of the creators. Another resource is the Mozilla WebAssembly documentation. This is WebAssembly documentation for developers and shows you how to get started. And finally, there is a wasmrocks.com, which I find a nice website with lots of useful WebAssembly tutorials and articles. And here are some tools that you can use to create WebAssembly. This one is the GitHub repository for Blazor, which is the experimental Microsoft technology to run C# in the browser using WebAssembly. The next one is the WebAssembly Studio, which we've seen earlier in this course. This is an online development environment that allows you to create WebAssembly applications. It is great to get started with and to see how WebAssembly works. The same goes for the Wasm Explorer. This is an online converter for C and C++ code to WebAssembly. This is also a nice tool that can show you how code is converted to WebAssembly and what the end result looks like. Please remember that these tools are experimental in nature and open source, which means that they might be renamed or might no longer be available when you try to use them. And that's it. Thank you for watching, and I hope you've learned enough about WebAssembly to know what it is and why it is important.