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

2. @ddprrt

3. typescript-book.com

4. rust-linz.at

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

7. WAT

8. A tour on WebAssembly outside the
browser

9. The Bleeding Edge

10. WASI
Web Assembly Systems Interface

11. There are two important principles baked
into Web Assembly

12. 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

13. 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!

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

15. WASI

16. .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

17. .rs
.wasm
https://hacks.mozilla.org/2019/03/standardizing-wasi-a-webassembly-system-interface/
WA
Runtime
WA
Runtime
WA
Runtime
Win Linux OSX

18. 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

19. 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

20. .rs
.wasm
https://hacks.mozilla.org/2019/03/standardizing-wasi-a-webassembly-system-interface/
WA
Runtime
WA
Runtime
WA
Runtime
Win Linux OSX

21. .rs
.wasm
https://hacks.mozilla.org/2019/03/standardizing-wasi-a-webassembly-system-interface/
WA
Runtime
WA
Runtime
WA
Runtime
Win Linux OSX
THE BROWSER

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

24. Security
Portability
✅
✅

25. WAIT
Web Assembly Interface Types

26. 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.

27. The problem: WASM only allows for
numbers…

28. WAIT
WebAssembly Interface Types (acronym made up)

29. 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

30. 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

31. // 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

32. 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

33. # 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!'))

34. #[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(())
}

36. Interoperability
Variety of hosts
✅
✅

37. … Serverless
How does WASM influence Serverless?

38. 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

39. 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
"

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

41. 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

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

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

44. Trigger Cold Start Execution
/next /response Execution
/next /response Hibernation
Trigger Cold Start Execution
/next /response Hibernation
Trigger Cold Start Execution
/next PANIC! Bootstrap Execution
AWS Lambda Invocations

45. Trigger Cold Start Execution
/next /response Execution
/next /response Hibernation
Trigger Cold Start Execution
/next /response Hibernation
Trigger Cold Start Execution
/next PANIC! Bootstrap Execution
Dispose
Dispose
AWS Lambda Invocations

46. {}
Isolates Process
overhead
User Code
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}

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

48. WASM In JS Runtime

49. WASM
In
JS Runtime

50. WASM
In
JS Runtime

51. WAT

52. 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!

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

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

55. Effectively instantaneous
cold starts!

56. https://github.com/bytecodealliance/wizer

57. https://krustlet.dev

59. Isolation
On demand processes
✅
✅

60. WAGI
Web Assembly Gateway Interface

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

62. 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!

63. AWS
Lambda
(Node, Python, …)
HTML/JSON
Response
Dynamo DB
Modern Apps with AWS/Azure
HTTP
API Gateway Query
Response
Per Request Execution!

64. Server
WASM File
HTML/JSON
Response
Maybe a DB
WAGI
HTTP
WAGI Gateway Query
STDOUT
Per Request Execution!

65. 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

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

68. WAT
Web Assembly Text File

69. The Bleeding Edge

71. 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

72. 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/

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

74. Thank you!
@ddprrt