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

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
14. https://www. fi gma.com/blog/webassembly-cut- fi gmas-load-time-by-3x/
17. https://lichess.org/analysis
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