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

Transcript

1. Edoardo Vacchi – @evacchi
   

   View Slide

2. Hi, I am Edoardo Vacchi @evacchi
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. View Slide

16. @evacchi
    @mastodon.social
    ActiveX/NPAPI/PPAPI
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

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

    View Slide

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

    View Slide

22. @evacchi
    @mastodon.social
    

    View Slide

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

    View Slide

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

    View Slide

25. @evacchi
    @mastodon.social
    JS Runtimes?
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. History Repeating?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. @evacchi
    @mastodon.social
    JVM
    

    View Slide

36. @evacchi
    @mastodon.social
    JVM
    

    View Slide

37. @evacchi
    @mastodon.social
    Bringing the Web up to Speed with WebAssembly (PLDI’17)
    • JVM bytecode verification 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 verification
    • JVM, CIL, Android Dalvik, allow bytecode to create
    irreducible loops and unbalanced locking structures,
    features which usually cause optimizing JITs to give up
    “
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. @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 undefined 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.
    “
    

    View Slide

42. @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, verifiable
    code formats.
    “
    

    View Slide

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

    View Slide

44. @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)
    “
    

    View Slide

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

    View Slide

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

    View Slide

47. Architecture
    

    View Slide

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

49. 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
    

    View Slide

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

    View Slide

51. @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 flow of WebAssembly
    makes validation and compilation fast and simple
    • and paves the way for structured locking and exception
    constructs in the future
    “
    

    View Slide

52. 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
    

    View Slide

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

    View Slide

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

    View Slide

55. Runtimes
    

    View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

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

    View Slide

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

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

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

    View Slide

69. View Slide

70. View Slide

71. View Slide

72. Cool Use Cases
    

    View Slide

73. Foreign Function
    Interface
    

    View Slide

74. https://github.com/knqyf263/go-plugin
    Dynamic Linking
    

    View Slide

75. View Slide

76. You are cordially
    invited to…
    

    View Slide

77. View Slide

78. 1.0
    the
    

    View Slide

79. bit.ly/wazeroparty
    EventBrite link! 👇
    

    View Slide

80. …AND OTHERS!
    bit.ly/wazeroparty
    EventBrite link! 👇
    

    View Slide

81. Edoardo Vacchi – @evacchi
    

    View Slide

82. Edoardo Vacchi – @evacchi
    

    View Slide