Practical WebAssembly

Table of contents

1. 1. Introduction to WebAssembly
   1. What is WebAssembly?
   2. A set of standards
   3. A technology stack
      1. Instruction set
      2. Compile target
   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
2. 2. Getting Started with WebAssembly
   1. Step 0: Setup
      1. Basics
      2. Language tools
      3. Software, Language Tools: Node.js and npm
      4. WebAssembly tools
   2. Step 1: Code
      1. Why Rust?
      2. Writing code in Rust
      3. Writing our WebAssembly function in Rust
      4. Adding the dependencies to your +Cargo.toml file
   3. Step 2: Compile to wasm
      1. wasm-pack
   4. Step 3: Load into runtime
      1. Creating an index.html
      2. Using wasm-pack output
   5. Step 4: Use WebAssembly functions
      1. Step 4B: Running your code with Node.js
   6. Summary
3. 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
4. 4. Writing WebAssembly Medules with AssemblyScript
   1. About AssemblyScript
      1. History
      2. Support for WASI and the Component Model
      3. Who uses AssemblyScript?
   2. Writing AssemblyScript
      1. Similarities to TypeScript
      2. Typing
      3. Variables
      4. Functions
      5. Standard Libraries
   3. The Project
      1. What’s a dice roll string?
   4. Setting up the Project
      1. Prerequisites
   5. Getting Started
      1. What you want to build
      2. Scaffolding the Project
   6. Writing some HTML
   7. Javascript code
   8. Writing AssemblyScript
   9. Compiling to wasm with asc
      1. Adding the wasm into the JavaScript
      2. Running the AssemblyScript module in Node.JS
   10. Running your code in the browser
   11. Running your code in Node.js
   12. Conclusion
5. 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
   4. Running the project in the browser
   5. Running the project in Deno
      1. Writing a deno-wasm.js
      2. Running the Deno Code
   6. Further Reading
6. 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
7. 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
8. 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
9. 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
      1. Profiling using Chrome DevTools
      2. Profiling using Wasmtime and perf
      3. Profiling in Wasmtime
10. 10. Using WebAssembly with Web Workers
    1. What are Web Workers?
    2. How Web Workers work with WebAssembly
    3. How to incorporate Web Workers into your project
       1. Creating the Worker file
       2. Creating the main.js file
       3. Creating events to pass between threads
       4. Load, Instantiate, Run your WebAssembly with Web Workers
    4. Using Web Workers with WebAssembly in the Browser
       1. Preparing the WebAssembly module
       2. Defining our message types
       3. Creating the Web Worker file
       4. Creating the main file
       5. Create event listeners in main and worker file
       6. Handle wasm code in worker file
       7. return code results to main thread
       8. Prepare web server to see results in browser
       9. Run code in browser
    5. Using Web Workers with WebAssembly in Deno
       1. Running our code in Deno
    6. Use cases for Web Workers and WebAssembly
    7. Things to keep in mind when using Web Workers with WebAssembly
11. 11. Writing Web Applications with WebAssembly
    1. What does writing Web Applications with WebAssembly look like?
       1. Taking a look at WebAssembly web app frameworks
       2. Yew
       3. Blazor
    2. Using a WebAssembly web application framework
       1. Why would you write web applications with WebAssembly?
    3. Project: writing our dice roller frontend as a WebAssembly app
       1. Intro to Yew
       2. Building apps with Yew
       3. Writing your component code
       4. Compiling/running your code
12. 12. Serverless With WebAssembly
    1. What is Serverless?
       1. History of Serverless
       2. Advantages of Serverless
       3. Constraints of Serverless
       4. Use cases for Serverless
    2. How Serverless functions are (generally) written and deployed
       1. Choosing a Serverless host provider
       2. Writing a Serverless function
       3. Deploying a Serverless function
       4. Running a Serverless function
    3. How Serverless (tends to) run functions without WebAssembly
    4. Why WebAssembly?
    5. Benefits of WebAssembly with Serverless
    6. How Serverless WebAssembly (typically) works
       1. Some drawbacks
    7. Use Cases for Serverless WebAssembly
    8. Developing for Serverless WebAssembly
       1. Fermyon and Spin
       2. Setting up the Development Environment
       3. Writing the code
       4. Building and running your function
       5. Deployment
    9. Deploying your own WebAssembly Workers server
       1. Wasm Workers Server
       2. Setting up
       3. Writing the Serverless function
       4. Building, deploying and running the function
    10. Summary
13. 13. The Future of WebAssembly
    1. Some context and vocabulary about the standardization process
       1. Groups
       2. Terms
       3. Stage 0: Pre-proposal
       4. Stage 1: Feature proposal
       5. Stage 2: Spec text available
       6. Stage 3: Implementation
       7. Stage 4: Standardize the feature
       8. Stage 5: Feature is standardized
    2. What’s coming down the pipe?
    3. Things people are interested in
    4. Major Upcoming Features
       1. Garbage Collection
       2. Multiple Memories
       3. Threads
       4. Exception handling
       5. Component Model
    5. What’s next for related standards?
       1. WASI
    6. Where to go from here
       1. Players to watch
       2. Resources
    7. Summary
14. About the Author