Wasmer Things: An Upside Down Guide To WebAssembly

@evacchi About Me Edoardo Vacchi @evacchi • DSL/PL Research @
UniMi • R&D @ UniCredit • Drools, Kogito codegen @ Red Hat

A History of WebAssembly

A History of Running Arbitrary Code in the Browser

@evacchi ActiveX/NPAPI/PPAPI Multimedia Plug-ins e.g. • Real Player • Windows
Media Player • Quicktime But also arbitrary code • Flash, Shockwave… • Java, Silverlight… …and some other crap to let you browse your intranet

@evacchi Transpilers • CoffeeScript (2009) • Dart (2011) • TypeScript
(2012) • AtScript (2014) • BabelJS (2014)

@evacchi Transpilers • CoffeeScript (2009) • Dart (2011) • TypeScript
(2012) • AtScript (2014) • BabelJS (2014) Elm Scala.js Haxe ClojureScript React/JSX Svelte

@evacchi (Portable) Native Client: (P)NaCl • 16 September 2011 •
NaCl: A subset of CPU instructions for a number of architectures for in-browser, sandboxed execution • PNaCl: A portable subset (arch-independent) https://developer.chrome.com/docs/native-client/overview/

@evacchi ASM.JS • 21 March 2013: the world is ready
for a proper Compilation Target • asmjs.org • strict “lower-level” subset of JS, targeted by compilers

@evacchi ASM.JS int f(int i) { return i + 1;
} function f(i) { i = i|0; return (i + 1)|0; } C Code ASM.JS equivalent

@evacchi

@evacchi What is WebAssembly

@evacchi JVM • Source Code compiled into Bytecode • Stack-based
VM • Client / Server • Bytecode “interpreted” by the JVM (Interpreter + JIT)

History Repeating ?

@evacchi The Infamous Quote

@evacchi The Infamous Quote WTH are you talking about Solomon??
? ? ?

@evacchi Docker Linux “Containers” • Sandboxing • Packaging • Distribution

@evacchi More Quotes

@evacchi JVM • Source Code compiled into Bytecode • Stack-based
VM • Client / Server • Bytecode “interpreted” by the JVM (Interpreter + JIT)

@evacchi JVM However bytecode was never really meant to be
a general purpose compilation target

@evacchi JVM

@evacchi What About LLVM ? “The LLVM Project is a
collection of modular and reusable compiler and toolchain technologies. “Despite its name, LLVM has little to do with traditional virtual machines. “The name "LLVM" itself is not an acronym; it is the full name of the project. llvm.org

@evacchi What About LLVM ? “The LLVM Project is a
collection of modular and reusable compiler and toolchain technologies. “Despite its name, LLVM has little to do with traditional virtual machines. “The name "LLVM" itself is not an acronym; it is the full name of the project. llvm.org This is

https://llvm.org/pubs/2004-01-30-CGO-LLVM.html

@evacchi LLVM IR @.str = internal constant [14 x i8]
c"hello, world\0A\00" declare i32 @printf(i8*, ...) define i32 @main(i32 %argc, i8** %argv) nounwind { entry: %tmp1 = getelementptr [14 x i8], [14 x i8]* @.str, i32 0, i32 0 %tmp2 = call i32 (i8*, ...) @printf( i8* %tmp1 ) nounwind ret i32 0 }

@evacchi LLVM IR @.str = internal constant [14 x i8]
c"hello, world\0A\00" declare i32 @printf(i8*, ...) define i32 @main(i32 %argc, i8** %argv) nounwind { entry: %tmp1 = getelementptr [14 x i8], [14 x i8]* @.str, i32 0, i32 0 %tmp2 = call i32 (i8*, ...) @printf( i8* %tmp1 ) nounwind ret i32 0 } However, never really meant for efficient execution

@evacchi More Quotes

@evacchi JS Runtimes? • Nowadays, most dynamic languages are not
really interpreted • “Script” “interpreted” by the VM • What happens under the hood: - Source code gets compiled into a byte code representation - byte code gets JIT-compiled into native

@evacchi Running any* language in your own browser! * provided
there is a compiler/runtime for it Language Browser Other WASI Notes Rust ✅ ✅ ✅ C++ ✅ ✅ ✅ C ✅ ✅ ✅ C Swift ✅ ✅ ✅ Swift Zig ✅ ✅ ✅ AssemblyScript ✅ ✅ ✅ https://www.fermyon.com/wasm-languages/webassembly-language-support

@evacchi Running any* language in your own browser! Language Browser
CLI WASI Notes Go ✅ ✅ ✅ Via Go and TinyGo Erlang (BEAM) ⏳ ⏳ ⏳ Haskell ✅ ✅ ✅ Lisp ⏳ ⏳ ⏳ Lua ✅ ❌ ❌ Perl ✅ ❌ ❌ Python ⏳ ✅ ✅ Ruby ✅ ✅ ✅

@evacchi Runtimes Wasmer Wasmtime v8 etc…

Architecture

@evacchi A “Structured” Stack Machine • WebAssembly code can be
considered a structured stack machine; • a machine where most computations use a stack of values, • but control ﬂow is expressed in structured constructs such as blocks, ifs, and loops. • virtual instruction set architecture (virtual ISA) https:/ /github.com/WebAssembly/design/blob/main/Rationale.md

Details on the bytecode format (local.get $x) (i32.const 2) i32.add
(i32.const 3) i32.mul (i32.mul (i32.add (local.get $x) (i32.const 2)) (i32.const 3)) ( x + 2 ) * 3 Wasm Text Format (WAT)

@evacchi Blocks (module ;; import the browser console object, you'll
need to pass this in from JavaScript (import "console" "log" (func $console.log (param i32))) (func i32.const 0 ;; change to positive number (true) if you want to run the if block (if (then i32.const 1 call $console.log ;; should log '1') (else i32.const 0 call $console.log ;; should log '0'))) (start 1) ;; run the first function automatically ) https://developer.mozilla.org/en-US/docs/WebAssembly/Reference/Control_flow/if...else

@evacchi Blocks (module (type $t0 (func (param i32))) (type $t1
(func)) (import "console" "log" (func $console.log (type $t0))) (func $f1 (type $t1) i32.const 0 if $I0 i32.const 1 call $console.log else i32.const 0 call $console.log end) (start 1))

@evacchi The Infamous Quote WTH are you talking about Solomon??

@evacchi Docker Linux “Containers” • Sandboxing • Packaging • Distribution

@evacchi WASI https:/ /hacks.mozilla.org/2019/03/standardizing-wasi-a-webassembly-system-interface/

@evacchi WASI

Runtimes

https://github.com/containers/crun/blob/main/docs/wasm-wasi-example.md

Limitations

@evacchi Proposals Also in-progress: Garbage Collection

Edoardo Vacchi – @evacchi

Wasmer Things: An Upside Down Guide To WebAssembly

Wasmer Things: An Upside Down Guide To WebAssembly

More Decks by Edoardo Vacchi

Other Decks in Programming

Featured

Transcript