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

  2. @ragingwind
    • @Riiid

    • Google Developer Expert for
    Web Technology

    • 🦀 ❤ WebAssembly
    Jimmy Moon

    View full-size slide

  3. WebAssembly
    5W1H

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    • Image viewer or editor

    • Games

    • Vision processing

    • Music player

    • Encryption

    • Edge computing

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. https://lichess.org/analysis

    View full-size slide

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

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

  17. • Hello World

    • DOM Access with wasm-
    bindgen

    • Fetch

    • SIMD

    • Multithread

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

    View full-size slide