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
   

   View Slide

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

   View Slide

3. WebAssembly
   5W1H
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

13. View Slide

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

    View Slide

15. View Slide

16. View Slide

17. https://lichess.org/analysis
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

27. View Slide