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, https://github.com/ragingwind/webassembly-starter-kit-rust

687ac25540fe35fcb5e828f75c4a6079?s=128

Jimmy Moon

November 25, 2021
Tweet

Transcript

  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


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

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