A a thorough, practice-based introduction to WebAssembly. Learn how to create high-performing, lightning-fast websites and applications.
WebAssembly is the fast, compact, portable technology that optimizes the performance of resource-intensive web applications and programs. The Art of WebAssembly is designed to give web developers a solid understanding of how it works, when to use it (and when not to), and how to develop and deploy WebAssembly apps.
First you’ll learn how to optimize and compile low-level code, debug and evaluate WebAssembly, and represent WebAssembly in the human-readable WebAssembly Text (WAT) format. Once you have the basics down, you’ll build a browser-based collision detection program, work with browser rendering technologies to create graphics and animations, and see how WebAssembly interacts with other web languages.
You’ll also learn how to:
• Embed WebAssembly applications in web browsers and Node.js
• Use browser debuggers to evaluate your WebAssembly code
• Format variables, loops, functions, strings, data structures, and conditional logic in WAT
• Manipulate memory
• Build a program that generates graphical objects and detects when they collide
• Evaluate the output of a WebAssembly compiler
The Art of WebAssembly will help you make sense of this powerful technology to boost the performance of your web applications.
Author(s): Rick Battagline
Edition: 1
Publisher: No Starch Press
Year: 2021
Language: English
Pages: 304
Tags: programming, webassembly
About the Author
Brief Contents
Contents in Detail
Foreword
Acknowledgments
Introduction
Who Should Read This Book
Why Users Are Interested in WebAssembly
Why the World Needs WebAssembly
What’s in This Book
Chapter 1: An Introduction to WebAssembly
What Is WebAssembly?
Reasons to Use WebAssembly
Better Performance
Integrating Legacy Libraries
Portability and Security
JavaScript Skeptics
WebAssembly’s Relationship with JavaScript
Why Learn WAT?
WAT Coding Styles
The Embedding Environment
The Browser
WASI
Visual Studio Code
Node.js
Our First Node.js WebAssembly App
Calling the WebAssembly Module from Node.js
The .then Syntax
The Time Is Now
Chapter 2: WebAssembly Text Basics
Chapter 3: Functions and Tables
When to Call Functions from WAT
Writing an is_prime Function
Passing Parameters
Creating Internal Functions
Adding the is_prime Function
The JavaScript
Declaring an Imported Function
JavaScript Numbers
Passing Data Types
Objects in WAT
Performance Implications of External Function Calls
Function Tables
Creating a Function Table in WAT
Summary
Writing the Simplest Module
Hello World in WebAssembly
Creating Our WAT Module
Creating the JavaScript File
WAT Variables
Global Variables and Type Conversion
Local Variables
Unpacking S-Expressions
Indexed Variables
Converting Between Types
if/else Conditional Logic
Loops and Blocks
The block Statement
The loop Expression
Using block and loop Together
Branching with br_table
Summary
Chapter 4: Low-Level Bit Manipulation
Binary, Decimal, and Hexadecimal
Integers and Floating-Point Arithmetic
Integers
Floating-Point Numbers
High- and Low-Order Bits
Bit Operations
Shifting and Rotating Bits
Masking Bits with AND and OR
XOR Bit Flip
Big-Endian vs. Little-Endian
Summary
Chapter 5: Strings in WebAssembly
ASCII and Unicode
Strings in Linear Memory
Passing the String Length to JavaScript
Null-Terminated Strings
Length-Prefixed Strings
Copying Strings
Creating Number Strings
Setting a Hexadecimal String
Setting a Binary String
Summary
Chapter 6: Linear Memory
Linear Memory in WebAssembly
Pages
Pointers
JavaScript Memory Object
Creating the WebAssembly Memory Object
Logging to the Console with Colors
Creating the JavaScript in store_data.js
Collision Detection
Base Address, Stride, and Offset
Loading Data Structures from JavaScript
Displaying the Results
Collision Detection Function
Summary
Chapter 7: Web Applications
The DOM
Setting Up a Simple Node Server
Our First WebAssembly Web Application
Defining the HTML Header
The JavaScript
The HTML Body
Our Completed Web App
Hex and Binary Strings
The HTML
The WAT
Compile and Run
Summary
Chapter 8: Working with the Canvas
Rendering to the Canvas
Defining the Canvas in HTML
Defining JavaScript Constants in HTML
Creating Random Objects
Bitmap Image Data
The requestAnimationFrame Function
The WAT Module
Imported Values
Clearing the Canvas
Absolute Value Function
Setting a Pixel Color
Drawing the Object
Setting and Getting Object Attributes
The $main Function
Compiling and Running the App
Summary
Chapter 9: Optimizing Performance
Using a Profiler
Chrome Profiler
Firefox Profiler
wasm-opt
Installing Binaryen
Running wasm-opt
Looking at Optimized WAT Code
Strategies for Improving Performance
Inlining Functions
Multiply and Divide vs. Shift
DCE
Comparing the Collision Detection App with JavaScript
Hand Optimizing WAT
Logging Performance
More Sophisticated Testing with benchmark.js
Comparing WebAssembly and JavaScript with --print-bytecode
Summary
Chapter 10: Debugging WebAssembly
Debugging from the Console
Logging Messages to the Console
Using Alerts
Stack Trace
The Firefox Debugger
The Chrome Debugger
Summary
Chapter 11: AssemblyScript
AssemblyScript CLI
Hello World AssemblyScript
JavaScript for Our Hello World App
Hello World with the AssemblyScript Loader
AssemblyScript String Concatenation
Object Oriented Programming in AssemblyScript
Using Private Attributes
JavaScript Embedding Environment
AssemblyScript Loader
Extending Classes in AssemblyScript
Performance of Loader vs. Direct WebAssembly Calls
Summary
Final Thoughts
Index
