Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wasmer Things: An Upside Down Guide To WebAssembly

Wasmer Things: An Upside Down Guide To WebAssembly

Edoardo Vacchi

November 07, 2022
Tweet

More Decks by Edoardo Vacchi

Other Decks in Programming

Transcript

  1. @evacchi About Me Edoardo Vacchi @evacchi • DSL/PL Research @

    UniMi • R&D @ UniCredit • Drools, Kogito codegen @ Red Hat
  2. @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
  3. @evacchi Transpilers • CoffeeScript (2009) • Dart (2011) • TypeScript

    (2012) • AtScript (2014) • BabelJS (2014) Elm Scala.js Haxe ClojureScript React/JSX Svelte
  4. @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/
  5. @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
  6. @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
  7. @evacchi JVM • Source Code compiled into Bytecode • Stack-based

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

    VM • Client / Server • Bytecode “interpreted” by the JVM (Interpreter + JIT)
  9. @evacchi JVM However bytecode was never really meant to be

    a general purpose compilation target
  10. @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
  11. @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
  12. @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 }
  13. @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
  14. @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
  15. @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
  16. @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 ✅ ✅ ✅
  17. @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 flow 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
  18. 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)
  19. @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
  20. @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))