syvsto / booster2024_wasm_components

WASM Components: Bringing down the tower of Babel

Welcome to the code repository for the Booster workshop on WebAssembly Components. This repository contains the tasks to solve as well as setup instructions, links, and scripts.

---

Getting started

To complete the tasks, you need various tooling. The easiest way to get started is using a Docker image we have prepared:

• If you don't already have it installed, install Docker Desktop
• Use docker pull syvsto/booster2024wasm to pull the image with all the required tooling for the workshop.
• Run the image using docker run -it syvsto/booster2024wasm:latest.

Now that you have the image up and running, you have some options for how to develop in it:

• If you use Visual Studio Code, the Dev Containers extension is great for working with the Docker image. Visit the Remote Explorer pane in the sidebar, and your running image should show up in the list.
• Otherwise, feel free to install Vim or any other terminal editor you're comfortable with inside the image. The image is based on Ubuntu, so apt install vim inside the image should get you going.

The image contains the task repository, which is found in /booster2024_wasm_components.

Other install options

If you want to run everything locally, we have prepared some installation scripts for the tooling so you don't have to download everything manually.

• MacOS: Run ./scripts/install-tooling-macos.sh. Requires Homebrew.
• Linux: Run ./scripts/install-tooling-linux.sh. Assumes that Node 18 (or later) and Python 3 is already installed and is the default Python implementation.
• Windows: Run .\scripts\install-tooling-win.bat Assumes the linux dependencies in addition to Rustup.

Rust

• The Rust compiler: The Rust compiler is needed to compile Rust. Duh!
• The WebAssembly toolchain: To compile Rust to WebAssembly, you need to install compile targets for WebAssembly. The following targets need to be installed: wasm32-unknown-unknown and wasm32-wasi.
• cargo component: This tool allows you to compile Rust to WebAssembly components.
• wasm-pack: This tool allows you to compile Rust to WebAssembly modules that can be used in the browser, and generates bindings to Javascript.

Typescript / Javascript

• Node/Npm: The most common toolchain, package manager and runtime for running Javascript outside the browser
• ComponentizeJS: Tooling to convert Javascript into WebAssembly components.

Python

• Python 3: If you want to build WebAssembly components using Python, you'll need the Python interpreter and pip, the Python package manager.
• componentize-py: This tool converts Python code into WebAssembly components by embedding the Python runtime within a WebAssembly module.

Runtime

• Wasmtime: This is the most established WebAssembly runtime for use outside the browser.

Tooling

• WASI Virt: This tool lets you virtualize the system interface for a WebAssembly component.

Deployment

• Fermyon Spin: Fermyon is one of multiple vendors that handle hosting and running WebAssembly components. The spin tool allows building and deploying your components as serverless functions in the Fermyon platform.

The tasks

• Task 1: Hello, WebAssembly Components!: Build your first WebAssembly component using Python, and your second using Javascript!
• Task 2: Component composition: Build another component using Rust, and compose the Javascript, Python and Rust components.
• Task 3: Building something useful: In this task you will make a server application that performs clustering on a dataset built as a WebAssembly component using both Rust and Python.
• Task 4: Deployment: Use the Fermyon Spin environment to host your clustering application, and build the clustering library for use in the browser.
• Task 5: Going further: Make the clustering application support middleware components, and build a logging middleware.

To get started, head over to task 1!

Reference material for WIT syntax

This is the example WIT syntax shown in the presentation:

package my:greeter@0.1.0;

interface person {
  name: string;
  age: string;
  variant pronoun {
    he,
    she,
    they
  }
}

world my-world {
   import person;
   import greeter-configuration;
   export greet: func() -> string;
}

We strive to present the required WIT syntax where applicable within the tasks, but you can use this as a quick overview of the main techniques used. If you need a more comprehensive reference, take a look at the WIT specification.

booster2024_wasm_components's Issues

Improvements

Global

• [ ] List opp dependencies i starten av hver oppgave
• Se på VENV og docker

Task 1:

• Kombinere branch /rewritesuggestions med master
• Oppdatér byggescript for JS-biten så det tar med alle dependencies og støtter stdout.

Task 2:

• Definer command component
• Ha ferdig løst intermediate components
• Få oppgaveløser til å fylle ut .wit
• Forklare hva starter er for noe og hvor det skal brukes

Task 3:

• Leveres med ferdig rust-kode (utenom wasm_bindgen-biten)
• Oppgave blir å fylle ut tilhørende .wit basert på innholdet i lib.rs
• Når de skal virtualisere rust-komponenten nevne wasi-virt: "..ved hjelp av wasi-virt virtualiser komponenten.."
• Python-biten: oppgaveløser modifiserer clustering.wit
• Beskriv poller.py - trengs for proxy-world, ingenting for bruker å gjøre her
• reorgranisere wit foldere for python

Task 4:

• Sette opp wasm_bindgen-kode
• Float64-array i script.js
• 2 nivåer lenger opp når referere til pkg i vite.config.js ("file:../../../../03/clustering-rs/pkg/")
• Ferdigskrevet vite.config.js
• Linking

Task5:

• Logging -> Legg til timestamp i response f.eks
• Bonus: Persistence (sjekk ut spin kv/database)