Wasmer Things: An Upside Down Guide To WebAssembly (Wasm I/O)

Slide 1

Slide 1 text

Edoardo Vacchi – @evacchi

Slide 2

Slide 2 text

Hi, I am Edoardo Vacchi @evacchi

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

https:/ /www.webdesignmuseum.org/old-software/web-browsers

Slide 13

Slide 13 text

http:/ /www.yaldex.com/javascript_tutorial_2/LiB0116.html

Slide 14

Slide 14 text

http:/ /www.yaldex.com/javascript_tutorial_2/LiB0116.html

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

@evacchi @mastodon.social ActiveX/NPAPI/PPAPI

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

@evacchi @mastodon.social

Slide 23

Slide 23 text

https://www.hanselman.com/blog/javascript-is-assembly-language-for-the-web-sematic-markup-is-dead-clean-vs-machinecoded-html

Slide 24

Slide 24 text

@evacchi @mastodon.social (Portable) Native Client: (P)NaCl https://developer.chrome.com/docs/native-client/overview/

Slide 25

Slide 25 text

@evacchi @mastodon.social JS Runtimes?

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

History Repeating?

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

@evacchi @mastodon.social CLR (.NET) • Source Code compiled into Bytecode (CIL) • Stack-based VM • Client / Server • Bytecode “interpreted” by the CLR (Interpreter + JIT)

Slide 34

Slide 34 text

@evacchi @mastodon.social JVM Java bytecode was never really meant to be a general-purpose compilation target

Slide 35

Slide 35 text

@evacchi @mastodon.social JVM

Slide 36

Slide 36 text

@evacchi @mastodon.social JVM

Slide 37

Slide 37 text

@evacchi @mastodon.social Bringing the Web up to Speed with WebAssembly (PLDI’17) • JVM bytecode veriﬁcation takes more than 150 pages to describe (WebAssembly fits on one page) • It took a decade of research to hash out the details of correct JVM veriﬁcation • JVM, CIL, Android Dalvik, allow bytecode to create irreducible loops and unbalanced locking structures, features which usually cause optimizing JITs to give up “

Slide 38

Slide 38 text

@evacchi @mastodon.social 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 39

Slide 39 text

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

Slide 40

Slide 40 text

@evacchi @mastodon.social Bringing the Web up to Speed with WebAssembly (PLDI’17) We investigated reusing another compiler IR which has a binary format. In fact, LLVM bitcode is the binary format used by PNaCl. “

Slide 41

Slide 41 text

@evacchi @mastodon.social Bringing the Web up to Speed with WebAssembly (PLDI’17) Disadvantages with LLVM bitcode in particular are that 1. it is not entirely stable, 2. it has undeﬁned behavior which had to be corrected in PNaCl, 3. it was found to be less compact than a stack machine, 4. it essentially requires every consumer to either include LLVM or reimplement a fairly complex LLVM IR decoder/verifier, and 5. the LLVM backend is notoriously slow. “

Slide 42

Slide 42 text

@evacchi @mastodon.social Bringing the Web up to Speed with WebAssembly (PLDI’17) Other compiler IRs have similar, sometimes worse, properties. In general, compiler IRs are better suited to optimization and transformation, and not as compact, veriﬁable code formats. “

Slide 43

Slide 43 text

@evacchi @mastodon.social WebAssembly [...] offers • compact representation, • efﬁcient validation and compilation, and • safe low to no-overhead execution. Bringing the Web up to Speed with WebAssembly (PLDI’17) “

Slide 44

Slide 44 text

@evacchi @mastodon.social Rather than committing to a specific programming model, WebAssembly is • an abstraction over modern hardware • making it language-, hardware-, and platform-independent, • with use cases beyond just the Web. Bringing the Web up to Speed with WebAssembly (PLDI’17) “

Slide 45

Slide 45 text

@evacchi @mastodon.social Supported languages Language Browser Other WASI Rust ✅ ✅ ✅ C++ ✅ ✅ ✅ C ✅ ✅ ✅ Swift ✅ ✅ ✅ Zig ✅ ✅ ✅ AssemblyScript ✅ ✅ ✅ https://www.fermyon.com/wasm-languages/webassembly-language-support

Slide 46

Slide 46 text

@evacchi @mastodon.social Language Browser CLI WASI Go ✅ ✅ ✅ Erlang (BEAM) ⏳ ⏳ ⏳ Haskell ✅ ✅ ✅ Lisp ⏳ ⏳ ⏳ Lua ✅ ❌ ❌ Perl ✅ ❌ ❌ Python ⏳ ✅ ✅ Ruby ✅ ✅ ✅ Java ⏳ ⏳ ⏳

Slide 47

Slide 47 text

Architecture

Slide 48

Slide 48 text

@evacchi @mastodon.social 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 49

Slide 49 text

JVM Bytecode int exp(int); Code: 0: iload_1 1: iconst_2 2: iadd 3: iconst_3 4: imul 5: ireturn ( x + 2 ) * 3 (local.get $x) (i32.const 2) i32.add (i32.const 3) i32.mul

Slide 50

Slide 50 text

Wasm Bytecode (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 51

Slide 51 text

@evacchi @mastodon.social Bringing the Web up to Speed with WebAssembly (PLDI’17) • JVM, CIL, Android Dalvik, allow bytecode to create irreducible loops and unbalanced locking structures, features which usually cause optimizing JITs to give up • In contrast, the structured control ﬂow of WebAssembly makes validation and compilation fast and simple • and paves the way for structured locking and exception constructs in the future “

Slide 52

Slide 52 text

Unstructured Control Flow void print(boolean x) { if (x) { System.out.println(1); } else { System.out.println(0); } } void print(boolean); Code: 0: iload_1 1: ifeq 14 4: getstatic #7 // Field java/lang/System.out:Ljava/io/PrintStream; 7: iconst_1 8: invokevirtual #13 // Method java/io/PrintStream.println:(I)V 11: goto 21 14: getstatic #7 // Field java/lang/System.out:Ljava/io/PrintStream; 17: iconst_0 18: invokevirtual #13 // Method java/io/PrintStream.println:(I)V 21: return

Slide 53

Slide 53 text

@evacchi @mastodon.social Structured Control Flow (module ;; import the browser console object, you'll need to pass this in from JavaScript (import "console" "log" (func $log (param i32))) (func (i32.const 0) ;; change to positive number (true) if you want to run the if block (call 0)) (func (param i32) local.get 0 (if (then i32.const 1 call $log ;; should log '1' ) (else i32.const 0 call $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 54

Slide 54 text

@evacchi @mastodon.social Structured Control Flow (module (type (;0;) (func (param i32))) (type (;1;) (func)) (import "console" "log" (func (;0;) (type 0))) (func (;1;) (type 1) i32.const 1 call 0) (func (;2;) (type 0) (param i32) local.get 0 if ;; label = @1 i32.const 1 call 0 else i32.const 0 call 0 end) (start 1))

Slide 55

Slide 55 text

Runtimes

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

@evacchi @mastodon.social Docker Linux “Containers” ● Sandboxing ● Packaging ● Distribution

Slide 61

Slide 61 text

@evacchi @mastodon.social WASI https:/ /hacks.mozilla.org/2019/03/standardizing-wasi-a-webassembly-system-interface/ ● Sandboxing ● Packaging ● Distribution