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

How to use The Fourth Language

Jimmy Moon
November 25, 2021

How to use The Fourth Language

Summary of WebAssembly overviews and status of 2001. It covers WebAssembly Starter Kit with Rust, https://github.com/ragingwind/webassembly-starter-kit-rust

Jimmy Moon

November 25, 2021
Tweet

More Decks by Jimmy Moon

Other Decks in Programming

Transcript

  1. How Use The Fourth Language
    Code Hello, WebAssembly

    View Slide

  2. @ragingwind
    • @Riiid

    • Google Developer Expert for
    Web Technology

    • 🦀 ❤ WebAssembly
    Jimmy Moon

    View Slide

  3. WebAssembly
    5W1H

    View Slide

  4. What is WebAssembly?
    • 4th Language for the Web

    • Virtual Instruction Set Architecture (V-ISA), Linear Memory, Implicit Stack,
    Some Instructions
    • Bytecode
    • No functions for operation system access and built-in
    • Code with programming languages, C/C++, Rust, Go, AssemblyScript, ...
    • Browser, and beyond browser, V8, SpiderMonkey, Wasmer, Wasmtime, Lucet,
    Cranelift, Nodejs, Python, Deno ...

    View Slide

  5. Why is WebAssembly fast?
    • Bytecode, compiled and Optimized by low-level language

    • Li
    ff
    o
    ff
    runs Wasm immediately and TurboFan runs further optimized machine
    code without observing

    • Optimized machine code can be running at near native speed

    • E
    ffi
    cient memory management

    • Use 'better' a programming language to solve a certain problem

    View Slide

  6. Javascript

    Source Code Ignition

    (JS Interpreter)
    TurboFan

    (Optimization Compiler)
    Optimized

    Machine

    Code
    Deoptimize
    Parse
    Bytecode
    BlinkOn 6 Day 1 Talk 2: Ignition - an interpreter for V8 - YouTube / https://www.youtube.com/watch?v=r5OWCtuKiAk
    Javascript Pipeline

    View Slide

  7. https://mathiasbynens.be/notes/prototypes#tradeoffs
    Javascript Pipeline

    View Slide

  8. Liftoff

    (WebAssembly baseline compiler)
    4. Hot Swap
    1. Execution

    Immediately
    0. WASM

    Compile and Optimized
    TurboFan

    (Optimization Compiler)
    2. Off the (main
    )

    thread

    Optimization
    https://www.youtube.com/watch?v=kZrl91SPSpc
    WebAssembly Pipeline
    3. Optimized

    Machine

    Code

    View Slide

  9. When to use WebAssembly?
    • Predictable performance

    • E
    ffi
    cient memory management

    • Rooms for performance improvement

    • Taking advantages of low-level languages, SIMD, Multithread, Popular and
    certi
    fi
    cated libraries

    View Slide

  10. Who should learn WebAssembly?
    • Developers for Multimedia or Graphic tools on browsers, ex)
    fi
    gma

    • Full-stack engineer in case of serverless, lambda, or edge computing

    • Games on browsers, ex) unity

    • Desktop application developers who want to port it

    • Developers who would like to use popular libraries written by low-level
    language

    • Basic knowledge of HTML Javascript and be passionate about performance
    improvement on the Web

    View Slide

  11. Where to use WebAssembly?
    • Video player or editor

    • Image viewer or editor

    • Games

    • Vision processing

    • Music player

    • Encryption

    • Edge computing

    View Slide

  12. https://www.bayl.eu/2021/10/30

    View Slide

  13. View Slide

  14. https://www.
    fi
    gma.com/blog/webassembly-cut-
    fi
    gmas-load-time-by-3x/

    View Slide

  15. View Slide

  16. View Slide

  17. https://lichess.org/analysis

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. How to get started with WebAssembly?
    • Pick up a low-level language like C/C++, Rust, AssemblyScript, C# or Go

    • Find out toolchain to compile to wasm:

    • C/C++: Emscripten

    • Rust: rustc with wasm32 target, or cargo, or wasmtime, ...

    • AssemblyScript: acs

    • Go: Build with Wasm architecture

    • Try out WebAssembly frameworks, like yew.rs

    • Learn how to use tools and debugger for WebAssembly

    View Slide

  25. • Rust with the latest version

    • Ready to build wasm and wasi

    • wasmtime, wasm-pack,
    binaryen, wabt

    • Dev server (ft. serve)
    WebAssembly
    Starter
    Kit with Rust

    View Slide

  26. • Hello World

    • DOM Access with wasm-
    bindgen

    • Fetch

    • SIMD

    • Multithread

    • WASI (WebAssembly System
    Interface)
    WebAssembly
    Starter
    Kit with Rust

    View Slide

  27. View Slide