WebAssembly in Action

With examples using C++ and Emscripten

Gerard Gallant

• Verlag: Manning
• Jahr: 2019
• ISBN:
  9781638355304
• Thema: Informatica
• Thema: Linguaggi di programmazione

Summary WebAssembly in Action introduces the WebAssembly stack and walks you through the process of writing and running browser-based applications. Expert developer Gerard Gallant gives you a firm foundation of the structure of a module, HTML basics, JavaScript Promises, and the WebAssembly JavaScript API. About the technologyWrite high-performance browser-based applications without relying only on JavaScript! By compiling to the WebAssembly binary format, your C, C++, or Rust code runs at near-native speed in the browser. WebAssembly delivers greater speed, opportunities to reuse existing code, and access to newer and faster libraries. Plus, you can easily interact with JavaScript when you need to. About the book WebAssembly in Action teaches you how to write and run high-performance browser-based applications using C++ and other languages supported by WebAssembly. In it, you'll learn to create native WebAssembly modules, interact with JavaScript components, and maximize performance with web workers and pthreads. And you'll love how the clearly organized sections make it a breeze to find the important details about every function, feature, and technique. What's inside Dynamic linking of multiple modules at runtime
Communicating between modules and JavaScript
Debugging with WebAssembly Text Format
Threading with web workers and pthreadsAbout the readerWritten for developers with a basic understanding of C/C++, JavaScript, and HTML. About the author Gerard Gallant is a Microsoft Certified Professional and a Senior Software Developer at Dovico Software. He blogs regularly on Blogger.com and DZone.com.

Part 1. First steps

This part of the book will introduce you to WebAssembly and the process of creating a WebAssembly module.

In chapter 1, you’ll learn what WebAssembly is, the problems it solves, what makes it secure, and which programming languages you can use with it.

In chapter 2, I’ll introduce the internal structure of a WebAssembly module, so you can see what each section’s purpose is.

Then, in chapter 3, you’ll learn about the different output options available with the Emscripten toolkit by creating your first WebAssembly modules. I’ll also introduce you to the WebAssembly JavaScript API.

Chapter 1. Meet WebAssembly

This chapter covers

• What WebAssembly is
• The problems that WebAssembly solves
• How WebAssembly works
• What makes WebAssembly secure
• The languages you can use to create a WebAssembly module

When it comes to web development, one thing that’s top of mind for most web developers is performance, from how fast the web page loads to how responsive it is overall. A number of studies have shown that if your web page doesn’t load within three seconds, 40% of your visitors will leave. That percentage increases for every additional second it takes your page to load.

How long it takes your web page to load isn’t the only issue. According to one Google article, if a web page has poor performance, 79% of visitors say they’re less likely to purchase from that website again (Daniel An and Pat Meenan, “Why marketers should care about mobile page speed” [July 2016], http://mng.bz/MOlD).

As web technologies have advanced, there’s been a push to move more and more applications to the web. This has presented developers with another challenge, because web browsers support only one programming language: JavaScript.

Having a single programming language across all browsers is good in one sense—you only have to write your code once, and you know that it will run in every browser. You still have to test in each browser you intend to support, because vendors sometimes implement things slightly differently. Also, sometimes one browser vendor won’t add a new feature at the same time other vendors do. Overall, though, having one language to support is easier than having four or five. The downside of browsers supporting only JavaScript, however, is that the applications we want to move to the web aren’t written in JavaScript—rather, they’re written in languages like C++.

JavaScript is a great programming language, but we’re now asking it to do more than it was originally designed to do—heavy computations for games, for example—and we’re asking it to run really fast.

1.1. What is WebAssembly?

As browser makers looked for ways to improve JavaScript’s performance, Mozilla (which makes the Firefox browser) defined a subset of JavaScript called asm.js.

1.1.1. Asm.js, the forerunner to WebAssembly

Asm.js brought the following advantages:

• You don’t write asm.js directly. Instead, you write your logic using C or C++ and convert it into JavaScript. Converting code from one language to another is known as transpiling.
• Faster code execution for high computations. When a browser’s JavaScript engine sees a special string called the asm pragma statement ("use asm";), it acts as a flag, telling the browser that it can use the low-level system operations rather than the more expensive JavaScript operations.
• Faster code execution from the very first call. Type-hints are included to tell JavaScript what type of data a variable will hold. For example, a | 0 would be used to hint that the variable a will hold a 32-bit integer value. This works because a bitwise OR operation of zero doesn’t change the original value, so there are no side effects to doing this. These type-hints serve as a promise to the JavaScript engine indicating that, if the code declares a variable as an integer, it will never change to a string, for example. Consequently, the JavaScript engine doesn’t have to monitor the code to find out what the types are. It can simply compile the code as it’s declared.

The following code snippet shows an example of asm.js code:

function AsmModule() { "use asm"; 1 return { add: function(a, b) { a = a | 0; 2 b = b | 0; return (a + b) | 0; 3 } } }

• 1 Flag telling JavaScript that the code that follows is asm.js
• 2 Type-hint indicating that the parameter is a 32-bit integer
• 3 Type-hint indicating that the return value is a 32-bit integer

Despite asm.js’s advantages, it still has some shortcomings:

• All the type-hints can make the files really large.
• The asm.js file is a JavaScript file, so it still has to be read in and parsed by the JavaScript engine. This becomes an issue on devices like phones because all that processing slows load time and uses battery power.
• To add additional features, browser makers would have to modify the JavaScript language itself, which isn’t desirable.
• JavaScript is a programming language and wasn’t intended to be a compiler target.

1.1.2. From asm.js to MVP

As browser makers looked at how they could improve on asm.js, they came up with a WebAssembly minimum viable product (MVP) that aimed to take asm.js’s positive aspects while addressing its shortcomings. In 2017, all four major browser vendors (Google, Microsoft, Apple, and Mozilla) updated their browsers with support for the MVP, which is sometimes referred to as Wasm:

• WebAssembly is a low-level assembly-like language that can run at near-native speeds in all modern desktop browsers as well as many mobile browsers.
• WebAssembly files are designed to be compact and, as a result, can be transmitted and downloaded fast. The files are also designed in such a way that they can be parsed and initialized quickly.
• WebAssembly is designed as a compile target so that code written in languages such as C++, Rust, and others can now run on the web.

Backend developers can leverage WebAssembly to improve code reuse or bring their code to the web without having to rewrite it. Web developers also benefit from the creation of new libraries, improvements to existing libraries, and the opportunity to improve performance in computationally heavy sections of their own code. Although WebAssembly’s primary use is in web browsers, it’s also designed with portability in mind, so you can use it outside the browser as well.

1.2. What problems does it solve?

The WebAssembly MVP addresses the following asm.js issues.

1.2.1. Performance improvements

One of the biggest issues that WebAssembly aims to solve is performance—from how long it takes to download your code to how quickly the code executes. With programming languages, rather than writing code in the machine language that the computer’s processor understands (1s and 0s, or native code), you usually write something that’s closer to a human language. While it’s easier to work with code that’s abstracted from your computer’s fine details, computer processors don’t understand your code, so when it comes time to run it, you have to conv...