Wasmer Things: An Upside Down Guide To WebAssembly

Transcript

1. View Slide

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

   View Slide

3. A History of
   WebAssembly
   

   View Slide

4. A History of
   Running Arbitrary Code in the Browser
   

   View Slide

5. @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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. @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
   

   View Slide

10. @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
    

    View Slide

11. @evacchi
    

    View Slide

12. @evacchi
    What is WebAssembly
    

    View Slide

13. @evacchi
    What is WebAssembly
    

    View Slide

14. @evacchi
    What is WebAssembly
    

    View Slide

15. @evacchi
    What is WebAssembly
    

    View Slide

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

    View Slide

17. History Repeating ?
    

    View Slide

18. @evacchi
    The Infamous Quote
    

    View Slide

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

    View Slide

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

    View Slide

21. @evacchi
    More Quotes
    

    View Slide

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

    View Slide

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

    View Slide

24. @evacchi
    JVM
    

    View Slide

25. @evacchi
    JVM
    

    View Slide

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

    View Slide

27. @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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. @evacchi
    More Quotes
    

    View Slide

33. @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
    

    View Slide

34. @evacchi
    What is WebAssembly
    

    View Slide

35. @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
    

    View Slide

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

    View Slide

37. @evacchi
    Runtimes
    Wasmer
    Wasmtime
    v8
    etc…
    

    View Slide

38. @evacchi
    What is WebAssembly
    

    View Slide

39. Architecture
    

    View Slide

40. @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
    

    View Slide

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

    View Slide

42. @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
    

    View Slide

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

    View Slide

44. @evacchi
    What is WebAssembly
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

48. WASI
    

    View Slide

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

    View Slide

50. @evacchi
    WASI
    

    View Slide

51. @evacchi
    WASI
    

    View Slide

52. @evacchi
    WASI
    

    View Slide

53. Runtimes
    

    View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

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

    View Slide

59. View Slide

60. View Slide

61. Limitations
    

    View Slide

62. @evacchi
    Proposals
    Also in-progress: Garbage Collection
    

    View Slide

63. Edoardo Vacchi – @evacchi
    

    View Slide