The Art of WebAssembly: Build Secure, Portable, High-Performance Applications

The Art of WebAssembly

Build Secure, Portable, High-Performance Applications

THE ART OF WEBASSEMBLY. Copyright © 2021 by Rick Battagline.

All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher.

ISBN-13: 978-1-7185-0144-7 (print)

ISBN-13: 978-1-7185-0145-4 (ebook)

Publisher: William Pollock

Executive Editor: Barbara Yien

Production Editor: Katrina Taylor

Developmental Editor: Liz Chadwick

Cover Design: Josh Ellingson

Interior Design: Octopod Studios

Technical Reviewer: Conrad Watt

Copyeditor: Anne Marie Walker

Compositor: Maureen Forys, Happenstance Type-O-Rama

Proofreader: James Fraleigh

For information on book distributors or translations, please contact No Starch Press, Inc. directly:

No Starch Press, Inc.

245 8th Street, San Francisco, CA 94103

phone: 1-415-863-9900; [email protected]

www.nostarch.com

Library of Congress Control Number: 2021930212

No Starch Press and the No Starch Press logo are registered trademarks of No Starch Press, Inc. Other product and company names mentioned herein may be the trademarks of their respective owners. Rather than use a trademark symbol with every occurrence of a trademarked name, we are using the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark.

The information in this book is distributed on an As Is basis, without warranty. While every precaution has been taken in the preparation of this work, neither the author nor No Starch Press, Inc. shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in it.

In loving memory of my grandmother, Sue Battagline. I miss you dearly.

About the Author

Rick Battagline is a game developer and author of Hands-On Game Development with WebAssembly (Packt Publishing, 2019). He has been working with browser-based technologies since 1994, and in 2006 founded BattleLine Games LLC., an independent game studio focused on web games. His game Epoch Star was nominated for an award at the Slamdance Guerilla Games Competition. Since then, he has written hundreds of games developed in various web technologies including WebAssembly, HTML5, WebGL, JavaScript, TypeScript, ActionScript, and PHP.

About the Tech Reviewer

Conrad Watt is a Research Fellow at Peterhouse, University of Cambridge. Prior to his PhD in computer science at the University of Cambridge, he completed an undergraduate degree at Imperial College London. His research is primarily focused on the formal semantics and security characteristics of WebAssembly. He developed and maintains WasmCert-Isabelle, the first mechanization, in Isabelle/HOL, of the WebAssembly language’s semantics.

Conrad is an active participant in the WebAssembly Community Group and continues to contribute to the specification of new language features, with a particular focus on threads and concurrency. His research into the relaxed memory characteristics of JavaScript and WebAssembly is a key component of WebAssembly’s threads specification. Outside of his professional life, his two greatest interests would ordinarily be choral singing and foreign travel, both of which are inadvisable at the time of this writing.

Foreword

With every other language compiling to JavaScript nowadays, WebAssembly is the next step in an evolution to break free from these pre-existing boundaries. WebAssembly enables everyone’s favorite language to run on the web performantly, while bringing with it the potential to redefine how you can bundle up reusable software components that run not only on the web but on any platform, from blockchain to edge computing to IoT.

While the technology is still young and requires some time to mature, its sheer potential has inspired many people from all backgrounds to explore where we can take this journey. One example is AssemblyScript, a project Rick and I are working on, that looks at WebAssembly less from a systems language perspective, and more exploring the potential of fusing the best of JavaScript and the web platform with WebAssembly. AssemblyScript makes it possible to compile a variant of JavaScript that resembles TypeScript to WebAssembly, yielding super small and efficient modules, while enabling everyone with a JavaScript background to take advantage of what WebAssembly has to offer today.

There are many exciting facets to WebAssembly and its feature set, especially to those who like to explore and help shape the future of the technology. The Art of WebAssembly lays out a solid foundation to dive deeper into what may well become the future of computing, and in particular on the web.

—Daniel Wirtz Creator of AssemblyScript

Acknowledgments

Thank you, Liz Chadwick. She spent a tremendous amount of time working on the first several drafts of this book. Her tireless efforts transformed my vague ideas and stream-of-consciousness writing into a coherent, well-polished draft. If you enjoy reading this book, you can attribute that to Liz’s effort throughout its development.

I want to thank Conrad Watts (Invited Expert in the W3C WebAssembly Working Group), who generously provided the book’s technical review. His brilliance humbles me. I cannot overstate his technical expertise in this field. Any technical errors in this book were almost certainly introduced after his thorough and deeply technical review.

Thanks to Katrina Taylor and Anne Marie Walker (copyeditor). I truly appreciate the work you did to make the book ready for printing. Thank you to my friends Vineet Kapur, Steve Tack, and Terri Cohen, who took the time to read my first draft of the book and give me feedback. All of you helped me make this a better book.

Finally, thanks to Bill Pollock. Your input at critical moments helped me move forward and complete this book.

Introduction

Welcome to The Art of WebAssembly. This book teaches you how to read, write, and understand WebAssembly at the virtual machine level. It will help you learn how WebAssembly interacts with JavaScript, the web browser, and the embedding environment. By the end, you’ll comprehend what WebAssembly is, its ideal use cases, and how to write WebAssembly that performs at near-native speeds.

Who Should Read This Book

This book is for web developers interested in understanding when and why to use WebAssembly. If you truly want to grasp WebAssembly, you need to learn it in detail. Several books have been written on various WebAssembly toolchains. This book is not specific to writing C/C++ or Rust, or any other language for WebAssembly; instead, it explores WebAssembly’s mechanisms and capabilities.

This book is for users who want to understand what WebAssembly is, what it can do, and how to use it best. WebAssembly can perform better and create smaller downloads and memory footprints than JavaScript. But developing high-performing WebAssembly applications requires more than simply writing an app in a language like C++/Rust or AssemblyScript and compiling it in WebAssembly. To build an application that executes two or three times as fast as its JavaScript equivalent, you’ll need to know how WebAssembly works at a deeper level.

Readers should have a basic familiarity with web technologies, such as JavaScript, HTML, and CSS, but don’t need to be experts in any of them. In its current incarnation, it isn’t easy to use WebAssembly without understanding the web and how it works. I don’t explain the basics of a web page, but I also don’t assume readers have much knowledge of how the web works either.

Why Users Are Interested in WebAssembly

At the first WebAssembly summit, Ashley Williams (@ag_dubs) presented the result of her Twitter polls asking WebAssembly users why they were interested in the technology. Here are the results:

Multi-language, 40.1 percent

Smaller faster code, 36.8 percent

Sandboxed (security), 17.3 percent

She then asked users who were interested in WebAssembly for its support of multiple languages why that was so:

JavaScript doesn’t meet my needs, 43.5 percent

Reuse of existing libraries, 40.8 percent

Preexisting app distro (distribution), 8.1 percent

Of those users who thought JavaScript didn’t meet their needs, she asked why:

Performance is bad or inconsistent, 42 percent

The ecosystem doesn’t meet my needs, 17.4 percent

I don’t like or understand it, 31.3 percent

You can watch her talk, Why the #wasmsummit Website Isn’t Written in Wasm, on YouTube at https://www.youtube.com/watch?v=J5Rs9oG3FdI.

Although these polls weren’t scientific, they’re still rather illuminating. For one, if you combine the first and third poll users interested in using WebAssembly to improve an app’s performance, the total is more than 55 percent. Improving your code’s performance with WebAssembly is unquestionably possible. But to really utilize WebAssembly isn’t magic; you just need to know what you’re doing. By the end of this book, you’ll know enough about WebAssembly to drastically improve the performance of your web apps.

Why the World Needs WebAssembly

I’ve been developing web applications since the mid-1990s. Initially, web pages were no more than documents with images. That changed with the emergence of Java and JavaScript. At the time, JavaScript was a toy language that could add rollover effects to buttons on your web pages. Java was the real deal, and the Java virtual machine (JVM) was an exciting technology. But Java never reached its full potential on the web platform. Java requires a plug-in, and the plug-in technology eventually fell out of fashion when it became a security and malware nightmare.

Unfortunately, Java is a proprietary technology, which prevented its direct integration into the web browser. However, WebAssembly is different in that it wasn’t created unilaterally by a single technology company. WebAssembly began its life as a collaboration between many hardware and software vendors, such as Google, Mozilla, Microsoft, and Apple. It’s available without a plug-in in every modern web browser. You can use it to write hardware-independent software using Node.js. Because it’s not proprietary, any hardware or software platform can use it without royalty or permission. It fulfills the 1990s-era dream of one binary to rule them all.

What’s in This Book

In this book, we will walk you through how WebAssembly works at a low level by introducing you to WebAssembly Text format. We will cover many low-level topics and take some time to show you how WebAssembly works with JavaScript in Node.js and web-based applications. The book is intended to be read in order, with concepts building on each other. There are also references throughout the book to code examples that can be found at https://wasmbook.com.

Chapter 1: An Introduction to WebAssembly

We go into detail about what WebAssembly is, what it isn’t, and when best to use it. You’re introduced to WebAssembly Text (WAT), which allows you to understand how WebAssembly works at the lowest level. We also set up the environment you’ll use to follow along with the examples in the book.

Chapter 2: WebAssembly Text Basics

We cover the basics of WAT and how it relates to high-level languages that deploy to WebAssembly. You’ll write your first WAT program, and we’ll discuss fundamentals like variable use and control flow.

Chapter 3: Functions and Tables

We discuss creating functions in WebAssembly modules and calling them from JavaScript. You’ll build a program to check for prime numbers to illustrate these concepts. We investigate calling functions from tables and performance implications.

Chapter 4: Low-Level Bit Manipulation

You learn about the low-level concepts you can use to improve your WebAssembly modules’ performance, such as number systems, bit masking, and 2s complement.

Chapter 5: Strings in WebAssembly

WebAssembly doesn’t have a built-in string data type, so in this chapter you will learn how strings are represented in WebAssembly, and how to manipulate them.

Chapter 6: Linear Memory

You’re introduced to linear memory and how WebAssembly modules use it to share large data sets with JavaScript or an alternative embedding environment. We start creating an object collision program that sets objects moving randomly and checks for object collisions, which we then use throughout the book.

Chapter 7: Web Applications

You learn how to create a simple web application using HTML, CSS, JavaScript, and WebAssembly.

Chapter 8: Working with the Canvas

We discuss how to use the HTML canvas with WebAssembly to create lightning-fast web animations. We use the canvas to improve our object collision application.

Chapter 9: Optimizing Performance

You learn how WebAssembly works well for computationally intensive tasks, such as collision detection. You spend some time using Chrome and Firefox profilers and other optimization tools to improve our applications’ performance.

Chapter 10: Debugging WebAssembly

We will cover debugging basics such as logging to the console using alerts and stack traces. You will also learn how to use the debuggers in Chrome and Firefox to step through our WebAssembly code.

Chapter 11: AssemblyScript

We discuss using WAT to understand high-level languages by using it to evaluate AssemblyScript, a high-level language designed to deploy to WebAssembly in an efficient way.

1

An Introduction to WebAssembly

In this chapter, you’ll acquire background knowledge of WebAssembly and explore the tools you’ll need to start working with WebAssembly and its textual representation, WebAssembly Text (WAT). We’ll discuss the benefits of WebAssembly, including improved performance, legacy library integration, portability, security, and its use as an alternative to JavaScript. We’ll consider JavaScript’s relationship with WebAssembly and what WebAssembly is and isn’t. You’ll learn the WAT inline and S-expression syntax. We’ll introduce the concepts of the embedding environment and discuss embedding WebAssembly in web browsers, Node.js, and the WebAssembly System Interface (WASI).

Then we’ll discuss the benefits of using Visual Studio Code as a development environment for WAT. You’ll learn the basics of Node.js and how to use it as an embedding environment for WebAssembly. We’ll show you how to use npm to install the wat-wasm tool, which provides you with everything you need to build WebAssembly applications from WAT. In addition, we’ll write our first WebAssembly app and execute it with Node.js as the embedding environment.

What Is WebAssembly?

WebAssembly is a technology that will massively improve the performance of web applications over the next several years. Because WebAssembly is new and requires some explanation, many people misunderstand it and how to use it. This book teaches you what WebAssembly is and how to use it to make high-performing web applications.

WebAssembly is a virtual Instruction Set Architecture (ISA) for a stack machine. Generally, an ISA is a binary format designed to execute on a specific machine. However, WebAssembly is designed to run on a virtual machine, meaning it’s not designed for physical hardware. The virtual machine allows WebAssembly to run on a variety of computer hardware and digital devices. The WebAssembly ISA was designed to be compact, portable, and secure, with small binary files to reduce download times when deployed as part of a web application. It’s easy to port the bytecode to a variety of computer hardware, and it has a secure platform for deploying code over the web.

All major browser vendors have adopted WebAssembly. According to the Mozilla Foundation, WebAssembly code runs between 10 percent and 800 percent faster than the equivalent JavaScript code. One eBay WebAssembly project executed 50 times faster than the original JavaScript version. Later in the book we’ll build a collision detection program that we can use to measure performance. When we ran it, our performance benchmarking found that our WebAssembly collision detection code ran more than four times faster than JavaScript in Chrome and more than two times faster than JavaScript in Firefox.

WebAssembly offers the most significant performance improvement the web has seen since the introduction of the just-in-time (JIT) JavaScript compilers. Modern browser JavaScript engines can parse and download the WebAssembly binary format an order of magnitude faster than JavaScript. The fact that WebAssembly is a binary target, not a programming language like JavaScript, allows the developer to choose the programming language that best suits their application’s needs. The saying JavaScript is the assembly language of the web might have become fashionable recently, but the JavaScript format is a terrible compilation target. Not only is JavaScript less efficient than a binary format like WebAssembly, but any JavaScript target code also has to handle the specifics of the JavaScript language.

WebAssembly offers tremendous web application performance improvements in two areas. One is startup speed. Currently, the most compact JavaScript format is minified JavaScript, which improves application download sizes but must parse, interpret, JIT compile, and optimize the JavaScript code. These steps are unnecessary with a WebAssembly binary, which is also more compact. WebAssembly still needs to be parsed, but it’s faster because it’s a bytecode format rather than text. Web engines still do optimization passes on WebAssembly, but it’s much faster because the language is more cleanly designed.

The other significant performance improvement WebAssembly offers is in throughput. WebAssembly makes it easier for the browser engine to optimize. JavaScript is a highly dynamic and flexible programming language, which is helpful to a JavaScript developer, but creates a code optimization nightmare. WebAssembly doesn’t make any web-specific assumptions (despite its name) and can be used beyond the browser.

Eventually, WebAssembly might be able to do everything JavaScript can. Unfortunately, the current version, its MVP (Minimum Viable Product) release version 1.0, cannot. In the MVP release, WebAssembly can do certain tasks very well. It’s not intended to be a drop-in replacement for JavaScript or a framework, such as Angular, React, or Vue. If you want to work with WebAssembly right now, you should have a specific computationally intensive project that requires very high performance. Online games, WebVR, 3D math, and crypto are effective ways people currently use WebAssembly.

Reasons to Use WebAssembly

Before we take a closer look at WebAssembly, let’s consider a few reasons you might be interested in using it. These explanations should also give you an idea of what WebAssembly is and why and how to use it.

Better Performance

JavaScript requires software engineers to make choices that will affect how they design the JavaScript engine. For example, you can optimize a JavaScript engine for peak performance using a JIT optimizing compiler, which can execute code faster but requires more startup time. Alternatively, you can use an interpreter, which starts running code right away but won’t reach the peak performance of a JIT optimizing compiler. The solution most JavaScript engine designers use in their web browsers is to implement both, but that requires a much larger memory footprint. Every decision you make is a trade-off.

WebAssembly allows for a faster startup time and higher peak performance without all of the memory bloat. Unfortunately, you can’t just rewrite your JavaScript in AssemblyScript, Rust, or C++ and expect this to happen without a little extra work. WebAssembly isn’t magic, and merely porting JavaScript to another language and compiling it without understanding what WebAssembly is doing at a lower level can lead to some disappointing results. Writing C++ code and compiling it to WebAssembly using optimization flags will usually be a bit faster than JavaScript. Occasionally, programmers will complain that they’ve spent all day rewriting their app in C++ and it only runs 10 percent faster. If that’s the case, it’s likely that these apps wouldn’t benefit from converting to WebAssembly, and their C++ gets compiled into mostly JavaScript. Take the time to learn WebAssembly, not C++, and make your web applications run lightning fast.

Integrating Legacy Libraries

Two popular libraries for porting existing libraries to WebAssembly are wasm-pack for Rust and Emscripten for C/C++. Using WebAssembly is ideal for when you have existing code written in C/C++ or Rust that you want to make available to web applications, or want to port entire existing desktop applications to make them available on the web. The Emscripten toolchain is particularly efficient at porting existing C++ desktop applications to the web using WebAssembly. If this is your path, you’ll likely want your app to perform as closely as possible to the native speed of your existing application, which should be feasible as long as the application isn’t a resource hog. However, you might also have an app that needs performance tuning to make it run as it does on the desktop. By the end of this book, you’ll be able to evaluate the WebAssembly module your toolchain generates from your existing code.

Portability and Security

We combined the portability and security features into one section because they frequently go together. WebAssembly started as a technology to run in the browser but is quickly expanding to become a sandboxed environment to run anywhere. From server-side WASI code to WebAssembly for embedded systems and the internet of things (IoT), the WebAssembly working group is creating a highly secure runtime that prevents bad actors from compromising your code. I recommend listening to Lin Clark’s excellent talk about WebAssembly security and package reuse at the first WebAssembly Summit (https://www.youtube.com/watch?v=IBZFJzGnBoU/).

Even though the WebAssembly working group focuses on security, no system is entirely secure. Learning to understand WebAssembly at a low level will prepare you for any future security risks.

JavaScript Skeptics

Some people simply dislike JavaScript and would rather that JavaScript not be the dominant web programming language. Unfortunately, WebAssembly isn’t in a position to dethrone JavaScript. Today, JavaScript and WebAssembly must coexist and play well together, as shown in Figure 1-1.

But there is good news for the JavaScript skeptics in the world: WebAssembly toolchains offer many options for writing web applications without having to write JavaScript. For example, Emscripten allows you to write web applications in C/C++ with very little, if any, JavaScript. You can also write entire web applications using Rust and wasm-pack. Not only do these toolchains generate WebAssembly, but they also create copious JavaScript glue code for your application. The reason is that currently, there are limits to WebAssembly’s capabilities, and the toolchains fill these gaps with JavaScript code. The beauty of mature toolchains like Emscripten is that they do this for you. If you’re developing with one of these toolchains, it’s helpful to understand when your code will turn into WebAssembly and when it will be JavaScript. This book helps you know when this will happen.

Figure 1-1: JavaScript and WebAssembly can coexist in harmony.

WebAssembly’s Relationship with JavaScript

It’s important to clarify how WebAssembly is used with and compares to JavaScript. WebAssembly isn’t a direct replacement for JavaScript; rather, WebAssembly:

Is faster to download, compile, and execute

Allows you to write applications for the web in languages other than JavaScript

Can provide near-native speed for your application when used properly

Works with JavaScript to improve the performance of your web applications when appropriately used

Isn’t an assembly language, although there is a pseudo assembly language associated with it (WAT)

Isn’t only for the web but can execute from non-browser JavasScript engines, such as Node.js, or can execute using runtimes that implement the WASI

Isn’t yet a one-size-fits-all solution for creating web applications

WebAssembly is the result of all major browser vendors collaborating to create a new platform for distributing applications over the internet. The JavaScript language evolved from the needs of web browsers in the late 1990s to the mature scripting language it is today. Although JavaScript has become a reasonably fast language, web developers have noticed that it sometimes performs inconsistently. WebAssembly is a solution to many of the performance problems associated with JavaScript.

Even though WebAssembly can’t do everything JavaScript can, it can execute certain operations much faster than JavaScript while consuming less memory. Throughout this book, we compare JavaScript code with the corresponding WebAssembly. We’ll repeatedly benchmark and profile the code for comparison. By the end of this book, you’ll be able to judge when you should use WebAssembly and when it makes sense to continue using JavaScript.

Why Learn WAT?

Many WebAssembly books and tutorials focus on specific toolchains, such as the aforementioned wasm-pack for Rust or Emscripten for C/C++. Toolchains for other languages like AssemblyScript (a subset of TypeScript) and Go are currently in development. These toolchains are a major reason programmers turn to WebAssembly, and more WebAssembly language toolchains are continually becoming available. In the future, web developers will be able to choose the language they use to develop based on project needs rather than language availability.

One factor that is useful across any of these languages is understanding what WebAssembly does at its lowest level. A deep understanding of WAT tells you why the code might not run as fast as you thought it would. It can help you comprehend how WebAssembly interacts with its embedding environment. Writing a module in WAT is the best way to work as close to the metal (low-level) as possible in a web browser. Knowledge of WAT can help you make the highest-performing web applications possible and allows you to disassemble and evaluate any web application written for the WebAssembly platform. It helps you assess any potential future security risks. In addition, it enables you to write code that is as close to native speed as possible without writing native code.

So what is WAT? WAT is like an assembly language for the WebAssembly virtual machine. Let’s look at what this means in a practical sense. Writing WebAssembly programs in a language like Rust or C++ uses a toolchain, which, as mentioned earlier, compiles a WebAssembly binary file as well as JavaScript glue code and HTML that embeds the WebAssembly module. A WebAssembly file is very similar to machine code because it includes sections, opcodes, and