Practical WebAssembly

Book description

WebAssembly is a powerful new technology for developing and running applications on the web, in browsers, and elsewhere. Learning how to harness this technology is essential to understanding the future of web development. By using WebAssembly to run code from a variety of languages in the browser without plugins or external technologies, the web is moving beyond the HTML, CSS, and JavaScript paradigm.

With this practical, hands-on book, web developers will learn how to interact with and create WebAssembly modules. Author Kassian Wren shows you which languages and toolchains are available for WebAssembly, how to write WebAssembly modules in Rust and AssemblyScript, and how to optimize WebAssembly modules for more performant websites. You'll quickly understand how this technology will impact not just the web, but also the way we think about developing applications across a variety of platforms.

With this book, you'll learn:

  • How WebAssembly works and when it should be used
  • Some languages and toolchains that are available for WebAssembly
  • How to write and use a WebAssembly module, in Rust and AssemblyScript
  • How to write WebAssembly modules in Rust and use WebAssembly with web workers
  • How to optimize WebAssembly modules for better site performance

Publisher resources

View/Submit Errata

Table of contents

  1. Brief Table of Contents (Not Yet Final)
  2. 1. Introduction to WebAssembly
    1. What is WebAssembly?
    2. A set of standards
    3. A technology stack
      1. Instruction set
      2. Compile target
      3. Virtual machine specification
    4. An evolution of the web
    5. What WebAssembly isn’t
      1. An immediate performance boost
      2. A finished set of standards
      3. An “assault on” or “replacement of” Javascript
    6. Benefits of WebAssembly
      1. Efficient and Fast
      2. Safe
      3. Open and Debuggable
      4. Part of the Open Web platform
    7. History of WebAssembly
    8. WebAssembly Use Cases
      1. In the browser
      2. Outside the browser
  3. 2. Getting Started with WebAssembly
    1. Step 0: Setup
      1. Basics: Code Editor
      2. Basics: Terminal
      3. Basics: Browser
      4. Software, Language tools: Rust and cargo
      5. Software, Language Tools: Node.js and npm
      6. Software, WebAssembly tools: wasm-pack
    2. Step 1: Code
      1. Why Rust?
      2. Writing code in Rust
      3. Writing our WebAssembly function in Rust
      4. Other ways to use Rust with WebAssembly
    3. Step 2: Compile to wasm
      1. wasm-pack
      2. Using the compiler directly
    4. Step 3: Load into runtime
      1. Using wasm-pack output
      2. Using compiler output
    5. Summary
  4. 3. How WebAssembly Works
    1. The WebAssembly Text format (.wat)
      1. Writing Wat: a Primer
    2. Writing Your First WebAssembly Module in wat
      1. Prerequisites
      2. Writing wat Code
    3. Compiling Wat into bytecode
    4. Calling WebAssembly functions in JavaScript
      1. The WebAssembly API
      2. Calling WebAssembly Functions with JavaScript
    5. Loading WebAssembly into the browser
    6. Loading WebAssembly into a Node.JS function
  5. 4. Writing WebAssembly Medules with AssemblyScript
    1. About AssemblyScript
    2. Setting up the Project
      1. Prerequisites
      2. Getting Started
      3. Scaffolding the Project
      4. Writing some HTML
      5. JavaScript code
      6. Writing AssemblyScript
      7. Compiling the wasm
      8. Adding the wasm into the JavaScript
      9. Running the AssemblyScript module in Node.JS
    3. Conclusion
  6. 5. Writing WebAssembly Modules in Rust
    1. What is Rust?
      1. What makes Rust Good for WebAssembly?
    2. Getting Started with Rust
      1. Semicolons
      2. Creating Variables and Functions
      3. Strings and References
      4. Macros
      5. Learning More About Rust
    3. The Project: The Attack Log Generator
      1. Prerequisites
      2. Setting up the Rust Project
      3. Writing the Rust code
      4. Building the wasm/JS from the Rust code
      5. Adding the form to the HTML
      6. Adding form events to the javascript
      7. Importing wasm code to the browser
      8. Writing a deno-wasm.js
      9. Running the Deno Code
    4. Further Reading
  7. 6. Running WebAssembly Outside the Browser and WASI
    1. Running WebAssembly Outside the Browser
    2. WebAssembly Runtimes
      1. When can I choose my WebAssembly runtime?
      2. Demo: wasmtime
    3. WASI: the WebAssembly System Interface
      1. What is WASI?
      2. How does WASI work?
      3. What can WASI do?
      4. Real-world WASI examples
      5. Demo: Rust, wasmtime, and WASI
    4. The future of WebAssembly in runtimes and WASI
      1. Use cases for WebAssembly outside the browser
    5. The future of the WASI standard
  8. 7. Using wasm-bindgen to expand capabilities
    1. What is wasm-bindgen
      1. How does wasm-bindgen work?
    2. Adding wasm-bindgen support to a Rust codebase
      1. Adding wasm-bindgen to Rust code
    3. Building high-level interfaces with wasm-bindgen
      1. The web-sys crate
      2. Rendering results to the DOM
    4. Passing Object Types from Rust to Javascript
  9. 8. Optimizing WebAssembly Modules
    1. The Life of a WebAssembly module
    2. Code Optimizations
      1. Standard Libraries
      2. Garbage Collection
      3. Interpreted vs Compiled Code
      4. Language idiosyncracies
    3. Bytecode Optimizations
      1. wasm-opt
      2. Ahead-Of-Time Compilation
    4. Initialization Optimizations
      1. Using Web Workers
      2. Selecting a WebAssembly Runtime
      3. Using a Just-In-Time enabled runtime
    5. Profiling your WebAssembly Code
      1. Profiling in the Browser
      2. Profiling in other runtimes
    6. General Principles for Optimizing WebAssembly
  10. 9. Debugging WebAssembly
    1. What it means to debug WebAssembly
    2. Tools and Software
    3. General tactics and strategies
    4. Using console.log
      1. Example: Using console.log to debug WebAssembly
    5. Step through WAT code in Developer Tools
      1. Example: stepping through WAT in the Developer Tools
    6. Using Debugger Symbols and Source Maps
      1. Example: Using LLDB to debug WebAssmembly
    7. Profiling WebAssembly
  11. About the Author

Product information

  • Title: Practical WebAssembly
  • Author(s): Kassian Wren
  • Release date: October 2024
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781098142520