Wasmer Things: An Upside Down Guide To WebAssembly

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

A History of WebAssembly

Slide 4

Slide 4 text

A History of Running Arbitrary Code in the Browser

Slide 5

Slide 5 text

@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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

@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/

Slide 9

Slide 9 text

@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

Slide 10

Slide 10 text

@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

Slide 11

Slide 11 text

@evacchi

Slide 12

Slide 12 text

@evacchi What is WebAssembly

Slide 13

Slide 13 text

@evacchi What is WebAssembly

Slide 14

Slide 14 text

@evacchi What is WebAssembly

Slide 15

Slide 15 text

@evacchi What is WebAssembly

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

History Repeating ?

Slide 18

Slide 18 text

@evacchi The Infamous Quote

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

@evacchi More Quotes

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

@evacchi JVM

Slide 25

Slide 25 text

@evacchi JVM

Slide 26

Slide 26 text

@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

Slide 27

Slide 27 text

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

@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 }

Slide 31

Slide 31 text

Slide 32

Slide 32 text

@evacchi More Quotes

Slide 33

Slide 33 text

@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

Slide 34

Slide 34 text

@evacchi What is WebAssembly

Slide 35

Slide 35 text

@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

Slide 36

Slide 36 text

@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 ✅ ✅ ✅

Slide 37

Slide 37 text

@evacchi Runtimes Wasmer Wasmtime v8 etc…

Slide 38

Slide 38 text

@evacchi What is WebAssembly

Slide 39

Slide 39 text

Architecture

Slide 40

Slide 40 text

@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

Slide 41

Slide 41 text

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)

Slide 42

Slide 42 text

@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

Slide 43

Slide 43 text

@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))

Slide 44

Slide 44 text

@evacchi What is WebAssembly

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

WASI

Slide 49

Slide 49 text

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