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

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

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

Edoardo Vacchi

March 27, 2023
Tweet

More Decks by Edoardo Vacchi

Other Decks in Programming

Transcript

  1. Edoardo Vacchi – @evacchi

    View full-size slide

  2. Hi, I am Edoardo Vacchi @evacchi

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. @evacchi
    @mastodon.social

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. @evacchi
    @mastodon.social
    JS Runtimes?

    View full-size slide

  13. History Repeating?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. @evacchi
    @mastodon.social
    JVM

    View full-size slide

  18. @evacchi
    @mastodon.social
    JVM

    View full-size slide

  19. @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 full-size slide

  20. @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 full-size slide

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

    View full-size slide

  22. @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 full-size slide

  23. @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 full-size slide

  24. @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 full-size slide

  25. @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 full-size slide

  26. @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 full-size slide

  27. @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 full-size slide

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

    View full-size slide

  29. Architecture

    View full-size slide

  30. @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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. @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 full-size slide

  34. 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 full-size slide

  35. @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 full-size slide

  36. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Cool Use Cases

    View full-size slide

  41. Foreign Function
    Interface

    View full-size slide

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

    View full-size slide

  43. You are cordially
    invited to…

    View full-size slide

  44. bit.ly/wazeroparty
    EventBrite link! 👇

    View full-size slide

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

    View full-size slide

  46. Edoardo Vacchi – @evacchi

    View full-size slide

  47. Edoardo Vacchi – @evacchi

    View full-size slide