WASM! WASI! WAGI! WAT?

WASM! WASI! WAGI! WAT?!
fettblog.eu - oida.dev - rust-training.eu
WASM outside the browser

JF Bastien - Andreas Rossberg
“Web Assembly.
Neither web, nor assembly”

A tour on WebAssembly outside the
browser

WASI
Web Assembly Systems Interface

There are two important principles baked
into Web Assembly

Portability
• WebAssembly is an assembly language for a conceptual machine, not a
physical one. It needs a runtime on top of a real machine to execute.
This is why it can run across a variety of different machine architectures

Security
• WebAssembly is sandboxed. This means that code can’t talk directly to
the OS. The host needs to provide functions to access OS capabilities.
The host can limit what the sandbox is able to do.
• In the best case, exceptions are made explicit!

Just as WebAssembly is a language for a
conceptual machine, it needs a system
interface for a conceptual operating system

.rs
.exe bin bin
aarch64-apple-darwin
x86_64-pc-windows-gnu x86_64-unknown-linux-musl
https://hacks.mozilla.org/2019/03/standardizing-wasi-a-webassembly-system-interface/
Win Linux OSX

.rs
.wasm
WA
Runtime
WA
Runtime
WA
Runtime
Win Linux OSX

use std::{env::args, fs::File, io::Read};
fn main() {
println!("Here are the contents of your file");
let mut file =
File::open(args().nth(1).expect("No file provided")).expect("Couldn't open file");
let mut buf = String::new();
file.read_to_string(&mut buf)
.expect("Not able to read file");
println!("{}", buf);
}
main.rs
Compile to WASM-WASI
$ rustup target add wasm32-wasi
$ cargo build --release --target wasm32-wasi
Execute in a WASM Runtime
$ wasmtime files.wasm stairway.md
$ wasmtime --dir=./lyrics/ files.wasm stairway.md

use std::{env::args, fs::File, io::Read};
fn main() {
println!("Here are the contents of your file");
let mut file =
File::open(args().nth(1).expect("No file provided")).expect("Couldn't open file");
let mut buf = String::new();
file.read_to_string(&mut buf)
.expect("Not able to read file");
println!("{}", buf);
}
main.rs
Compile to WASM-WASI
$ rustup target add wasm32-wasi
$ cargo build --release --target wasm32-wasi
Execute in a WASM Runtime
$ wasmtime files.wasm stairway.md
$ wasmtime --dir=./lyrics/ files.wasm stairway.md
ERROR

.rs
.wasm
WA
Runtime
WA
Runtime
WA
Runtime
Win Linux OSX
THE BROWSER

https://blog.stackblitz.com/posts/introducing-webcontainers/

WAIT
Web Assembly Interface Types

WebAssembly in Host environments
• WebAssembly makes native code extensions less complicated.
• Think Node, Ruby, Python not compiling C/C++ Code to their native
host, but rather use a WASM file
• Rust, Go, C++ can use WASM to safely run extensions that don’t interfere
with its own memory.

The problem: WASM only allows for
numbers…

WAIT
WebAssembly Interface Types (acronym made up)

use pulldown_cmark::{html, Parser};
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn render(input: &str) -> String {
let parser = Parser::new(input);
let mut html_output = String::new();
html::push_html(&mut html_output, parser);
return html_output;
}
main.rs
A Markdown module we
want to use cross env
Find all demos at
https://github.com/bytecodealliance/wasmtime-demos

import process from 'process';
import wasm_interface_types from 'wasm-interface-types';
import { promisify } from 'util';
import { readFile } from 'fs';
const baseURL = new URL(`${process.cwd()}/`, 'file://');
export async function resolve(specifier, parentModuleURL = baseURL, defaultResolver) {
if (specifier.endsWith(".wasm")) {
return {
url: new URL(specifier, parentModuleURL).href,
format: 'dynamic',
};
} else {
return await defaultResolver(specifier, parentModuleURL.toString());
}
}
const readFileAsync = promisify(readFile);
loader.mjs - part 1

// Dynamically instantiates a wasm module with interface types included after
// processing it with `wasm-interface-types`. Note that this executes
// `wasm-interface-types` in Node itself (which is itself WebAssembly).
export async function dynamicInstantiate(url) {
const wasmBytes = await readFileAsync(new URL(url).pathname);
const wasm = await wasm_interface_types.process(wasmBytes);
return {
exports: Object.keys(wasm),
execute: exports => {
for (const key in wasm) {
exports[key].set(wasm[key]);
}
},
}
}
loader.mjs - part 12

import { render } from './markdown.wasm';
console.log(render("# Hello, node!"));
main.mjs
Load it like a JS file!
You might know that
pattern from Webpack
$ $ node --experimental-wasm-mv --experimental-modules --loader ./loader.mjs ./main.mjs

# Import our Python extension `wasmtime_py` which loads the ability to load wasm
# modules natively within Python.
import wasmtime
# Next up, loader our `markdown.wasm` file. This is loaded by the `wasmtime_py`
# extension above and hooked up into the Python module system.
import markdown
# And now we can use the markdown file!
print(markdown.render('# Hello, Python!'))

#[wasmtime_rust::wasmtime]
trait WasmMarkdown {
fn render(&mut self, input: &str) -> String;
}
fn main() -> Result<(), anyhow::Error> {
let mut markdown = WasmMarkdown::load_file("markdown.wasm")?;
println!("{}", markdown.render("# Hello, Rust!"));
Ok(())
}

Interoperability
Variety of hosts
✅
✅

… Serverless
How does WASM influence Serverless?

Care about servers, less
Scale-out happens automatically
No infrastructure management
Consumption based billing
Examples
Google Cloud Run
AWS Fargate
Write less servers
Focus on business logic
Stateless development mindset
Glue logic between services
Examples
AWS Lambda
Azure Functions
AUTOSCALING FUNCTIONS AS A SERVICE

Care about servers, less
Scale-out happens automatically
No infrastructure management
Consumption based billing
Examples
Google Cloud Run
AWS Fargate
Write less servers
Focus on business logic
Stateless development mindset
Glue logic between services
Examples
AWS Lambda
Azure Functions
AUTOSCALING FUNCTIONS AS A SERVICE
"

{} {} {} {} {} {}
{} {} {} {} {} {}
{} {} {} {} {} {}
Virtual Machines Process
overhead
User Code

Front-End
Authenticate
Fetch function
metadata
Counting Service
Check concurrency
limits
Worker Manager
Request Worker
Worker
Create Sandbox
Download Code
Bootstrap
Sandbox
Run Code
Always Coldstart
AWS Lambda Coldstart

Trigger Cold Start Execution
/next /response Execution
/next /response Hibernation
AWS Lambda Invocations

/next PANIC! Bootstrap Execution

/next PANIC! Bootstrap Execution
Dispose
Dispose

{}
Isolates Process
overhead
User Code
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}

{}
WASM Runtimes Process
overhead
User Code
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {}
{} {} {}
{} {} {} {}
{} {} {} {}
{}

Fastly’s Compute@Edge
• Fastly allows to execute WASM workloads on their edge infrastructure
• As of recent you also can run JavaScript workloads
• They run in Spidermonkey and are compiled ahead of time
• How? Run JS in Spidermonkey at build time, initialise and save memory
snapshot!

0
1,25
2,5
3,75
5
JS Isolate WASM Snapshot
https://bytecodealliance.org/articles/making-javascript-run-fast-on-webassembly

0
1,25
2,5
3,75
5
JS Isolate WASM Snapshot
https://bytecodealliance.org/articles/making-javascript-run-fast-on-webassembly
36 microseconds!!

Effectively instantaneous
cold starts!

https://github.com/bytecodealliance/wizer

Isolation
On demand processes
✅
✅

WAGI
Web Assembly Gateway Interface

“A common gateway interface enables web
servers to execute an external program, to
process user requests”

Server
CGI Script
(Perl, PHP, C)
HTML/JSON
Response
Maybe a DB
Common Gateway Interface (est. 1996)
HTTP
CGI Gateway Query
STDOUT
Per Request Execution!

AWS
Lambda
(Node, Python, …)
HTML/JSON
Response
Dynamo DB
Modern Apps with AWS/Azure
HTTP
API Gateway Query
Response

Server
WASM File
HTML/JSON
Response
Maybe a DB
WAGI
HTTP
WAGI Gateway Query
STDOUT

fn main() {
println!("Content-Type: text/plain");
println!();
println!("Hello world");
}
HTTP!! Compile to WASM-WASI
[[module]]
route = "/"
module = "examples/hello.wat"
[[module]]
route = "/hello/..."
module = "examples/hello.wasm"
[[module]]
route = "/bar"
module = “examples/bar.wasm"
volumes = {"/path/inside/wasm" = "/path/on/host"}
hello.rs
modules.toml
Map routes to WASM files
Give access to directories on the file system

https://deislabs.io/posts/introducing-wagi-easiest-way-to-build-webassembly-microservices/

Resources
• https://www.fastly.com/blog/announcing-lucet-fastly-native-webassembly-
compiler-runtime
• https://bytecodealliance.org/articles/making-javascript-run-fast-on-
webassembly
• https://www.fastly.com/blog/join-the-beta-new-serverless-compute-
environment-at-the-edge
• https://hacks.mozilla.org/2019/03/standardizing-wasi-a-webassembly-
system-interface/
• https://github.com/fitzgen/wasm-summit-2021

Resources
• https://hacks.mozilla.org/2019/08/webassembly-interface-types/
• https://krustlet.dev/
• https://deislabs.io/posts/introducing-wagi-easiest-way-to-build-
webassembly-microservices/
• https://medium.com/@zackbloom/isolates-are-the-future-of-cloud-
computing-cf7ab91c6142
• https://github.com/bytecodealliance/wasmtime-demos
• https://wasmcloud.dev/

WAFFLE
Well, all finished, friends! Let’s enjoythebreak.

WASM! WASI! WAGI! WAT?

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to WASM! WASI! WAGI! WAT?

Similar to WASM! WASI! WAGI! WAT? (20)

More from Stefan Baumgartner

More from Stefan Baumgartner (13)

Recently uploaded

Recently uploaded (20)

WASM! WASI! WAGI! WAT?