The Art of WebAssembly

The Art of WebAssembly

by Rick Battagline
Released June 2021
Publisher(s): No Starch Press
ISBN: 9781718501447

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

WebAssembly is the revolutionary new web standard that enables high-performance programs and computer-intensive web applications to run at peak performance inside a browser. Different from a programming language like JavaScript, it’s a fast, compact, portable compilation target for a variety of languages, in a binary code format. This book will give you a solid understanding of WebAssembly, how it works under the hood, when to use it, when not to use it, how to write it, and ways to develop and deploy your own WebAssembly apps.

Author and expert Rick Battagline eases you through all the technology’s complexities using clear explanations, illustrations, and plenty of examples. He’ll show you how to optimize and compile low-level code, as well as how to debug and evaluate WebAssembly, and represent WebAssembly in its human-readable format, WebAssembly Text (WAT) – skills that will set you apart from other programmers as WebAssembly expands into all modern architectures. Once you grasp the basics, you’ll build a collision-detection program to measure the performance of WebAssembly in Chrome and Firefox. You’ll also work with browser rendering technologies to create graphics and animations for your apps, and you’ll see how WebAssembly interacts with other web languages.

You’ll learn how to:

•Use Node.js and web browsers as the JavaScript embedding environment for WebAssembly apps
•Write web applications that use WebAssembly for optimal performance
•Debug WebAssembly code using a variety of tools, including browser debuggers
•Format variables, loops, functions, strings, data structures, and conditional logic in WAT
•Manipulate memory through WebAssembly, and build a program that spawns graphical objects randomly and detects when the objects collide
•Evaluate the output of a WebAssembly compiler (AssemblyScript)

This book doesn’t focus on any particular language toolchains, so the skills learned are applicable to whatever you’re working with.

Table of contents

  1. Title Page
  2. Copyright
  3. Dedication
  4. About the Author
  5. Foreword
  6. Acknowledgments
  7. Introduction
    1. Who Should Read This Book
    2. Why Users Are Interested in WebAssembly
    3. Why the World Needs WebAssembly
    4. What’s in This Book
  8. Chapter 1: An Introduction to WebAssembly
    1. What Is WebAssembly?
    2. Reasons to Use WebAssembly
      1. Better Performance
      2. Integrating Legacy Libraries
      3. Portability and Security
      4. JavaScript Skeptics
    3. WebAssembly’s Relationship with JavaScript
    4. Why Learn WAT?
      1. WAT Coding Styles
    5. The Embedding Environment
      1. The Browser
      2. WASI
      3. Visual Studio Code
      4. Node.js
      5. Our First Node.js WebAssembly App
      6. Calling the WebAssembly Module from Node.js
      7. The .then Syntax
    6. The Time Is Now
  9. Chapter 2: WebAssembly Text Basics
    1. Writing the Simplest Module
    2. Hello World in WebAssembly
      1. Creating Our WAT Module
      2. Creating the JavaScript File
    3. WAT Variables
      1. Global Variables and Type Conversion
      2. Local Variables
      3. Unpacking S-Expressions
      4. Indexed Variables
      5. Converting Between Types
    4. if/else Conditional Logic
    5. Loops and Blocks
      1. The block Statement
    6. The loop Expression
      1. Using block and loop Together
      2. Branching with br_table
    7. Summary
  10. Chapter 3: Functions and Tables
    1. When to Call Functions from WAT
    2. Writing an is_prime Function
      1. Passing Parameters
      2. Creating Internal Functions
      3. Adding the is_prime Function
      4. The JavaScript
    3. Declaring an Imported Function
      1. JavaScript Numbers
      2. Passing Data Types
      3. Objects in WAT
    4. Performance Implications of External Function Calls
    5. Function Tables
      1. Creating a Function Table in WAT
    6. Summary
  11. Chapter 4: Low-Level Bit Manipulation
    1. Binary, Decimal, and Hexadecimal
    2. Integers and Floating-Point Arithmetic
      1. Integers
      2. Floating-Point Numbers
    3. High- and Low-Order Bits
    4. Bit Operations
      1. Shifting and Rotating Bits
      2. Masking Bits with AND and OR
      3. XOR Bit Flip
      4. Big-Endian vs. Little-Endian
    5. Summary
  12. Chapter 5: Strings in WebAssembly
    1. ASCII and Unicode
    2. Strings in Linear Memory
      1. Passing the String Length to JavaScript
      2. Null-Terminated Strings
      3. Length-Prefixed Strings
      4. Copying Strings
      5. Creating Number Strings
      6. Setting a Hexadecimal String
      7. Setting a Binary String
    3. Summary
  13. Chapter 6: Linear Memory
    1. Linear Memory in WebAssembly
      1. Pages
      2. Pointers
    2. JavaScript Memory Object
      1. Creating the WebAssembly Memory Object
      2. Logging to the Console with Colors
      3. Creating the JavaScript in store_data.js
    3. Collision Detection
      1. Base Address, Stride, and Offset
      2. Loading Data Structures from JavaScript
      3. Displaying the Results
      4. Collision Detection Function
    4. Summary
  14. Chapter 7: Web Applications
    1. The DOM
    2. Setting Up a Simple Node Server
    3. Our First WebAssembly Web Application
      1. Defining the HTML Header
      2. The JavaScript
      3. The HTML Body
      4. Our Completed Web App
    4. Hex and Binary Strings
      1. The HTML
      2. The WAT
      3. Compile and Run
    5. Summary
  15. Chapter 8: Working with the Canvas
    1. Rendering to the Canvas
      1. Defining the Canvas in HTML
      2. Defining JavaScript Constants in HTML
      3. Creating Random Objects
      4. Bitmap Image Data
      5. The requestAnimationFrame Function
    2. The WAT Module
      1. Imported Values
      2. Clearing the Canvas
      3. Absolute Value Function
      4. Setting a Pixel Color
      5. Drawing the Object
      6. Setting and Getting Object Attributes
      7. The $main Function
      8. Compiling and Running the App
    3. Summary
  16. Chapter 9: Optimizing Performance
    1. Using a Profiler
      1. Chrome Profiler
      2. Firefox Profiler
    2. wasm-opt
      1. Installing Binaryen
      2. Running wasm-opt
      3. Looking at Optimized WAT Code
    3. Strategies for Improving Performance
      1. Inlining Functions
      2. Multiply and Divide vs. Shift
      3. DCE
    4. Comparing the Collision Detection App with JavaScript
    5. Hand Optimizing WAT
    6. Logging Performance
    7. More Sophisticated Testing with benchmark.js
    8. Comparing WebAssembly and JavaScript with --print-bytecode
    9. Summary
  17. Chapter 10: Debugging WebAssembly
    1. Debugging from the Console
      1. Logging Messages to the Console
    2. Using Alerts
    3. Stack Trace
    4. The Firefox Debugger
    5. The Chrome Debugger
    6. Summary
  18. Chapter 11: AssemblyScript
    1. AssemblyScript CLI
    2. Hello World AssemblyScript
      1. JavaScript for Our Hello World App
      2. Hello World with the AssemblyScript Loader
      3. AssemblyScript String Concatenation
    3. Object Oriented Programming in AssemblyScript
      1. Using Private Attributes
      2. JavaScript Embedding Environment
      3. AssemblyScript Loader
      4. Extending Classes in AssemblyScript
      5. Performance of Loader vs. Direct WebAssembly Calls
    4. Summary
  19. Final Thoughts
  20. Index

Product information

  • Title: The Art of WebAssembly
  • Author(s): Rick Battagline
  • Release date: June 2021
  • Publisher(s): No Starch Press
  • ISBN: 9781718501447