How to use The Fourth Language

Slide 1

Slide 1 text

How Use The Fourth Language Code Hello, WebAssembly

Slide 2

Slide 2 text

@ragingwind • @Riiid • Google Developer Expert for Web Technology • 🦀 ❤ WebAssembly Jimmy Moon

Slide 3

Slide 3 text

WebAssembly 5W1H

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Where to use WebAssembly? • Video player or editor • Image viewer or editor • Games • Vision processing • Music player • Encryption • Edge computing

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

https://lichess.org/analysis

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

• 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

Slide 26

Slide 26 text

• Hello World • DOM Access with wasm- bindgen • Fetch • SIMD • Multithread • WASI (WebAssembly System Interface) WebAssembly Starter Kit with Rust

Slide 27

Slide 27 text

No content