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

More Decks by Jimmy Moon

Other Decks in Programming


  1. How Use The Fourth Language Code Hello, WebAssembly

  2. @ragingwind • @Riiid • Google Developer Expert for Web Technology

    • 🦀 ❤ WebAssembly Jimmy Moon
  3. WebAssembly 5W1H

  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 ...
  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
  6. Javascript
 Source Code Ignition
 (JS Interpreter) TurboFan
 (Optimization Compiler) Optimized

 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
  7. https://mathiasbynens.be/notes/prototypes#tradeoffs Javascript Pipeline

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

    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
  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
  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
  11. Where to use WebAssembly? • Video player or editor •

    Image viewer or editor • Games • Vision processing • Music player • Encryption • Edge computing
  12. https://www.bayl.eu/2021/10/30

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

  15. None
  16. None
  17. https://lichess.org/analysis

  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  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
  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
  26. • Hello World • DOM Access with wasm- bindgen •

    Fetch • SIMD • Multithread • WASI (WebAssembly System Interface) WebAssembly Starter Kit with Rust
  27. None