Save 37% off PRO during our Black Friday Sale! »

How to use The Fourth Language

687ac25540fe35fcb5e828f75c4a6079?s=47 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,


Jimmy Moon

November 25, 2021


  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 / Javascript Pipeline
  7. 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 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

  13. None
  14. https://www. fi fi gmas-load-time-by-3x/

  15. None
  16. None

  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 • 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