WebAssembly Intro

Transcript

1. WebAssembly A portable compilation target for the web
2. Compiling X Transpiling
3. Compiling: What? General term for taking source code written in one language and transforming into another language 1. C/C++ to x86 machine code 2. Java to JVM Bytecode
4. Transpiling: What? Specific term for taking source code written in one language and transforming into another language that has a similar level of abstraction 1. Java to Javascript 2. JVM Bytecode to x86 machine code
5. Assembly
6. Assembly: What? Assembly (or assembler) language (abbreviated asm), is any low-level programming language in which there is a very strong correspondence between the program's statements (mnemonic) and the architecture's machine code instructions (opcodes).
7. MOV AL, 0x61 ; Load register AL with 97 (61 hex) Assembly: What? Assembly Language for x86 (Mnemonic and operands): 0xB0 0x61 ; Load register AL with 97 (61 hex) Machine code (Opcode Operand) Assembler Disassembler Strong Correspondence Strong Correspondence MOV AL <=> 0xB0
8. LLVM https://lowlevelbits.org/bitcode-demystified/
9. 1. C / C++ 2. Rust 3. Go 4. 5. 6. 7. Compilation Targets 1. x86 2. x86-64 3. ARM 4. MIPS 5. PowerPC High-Level Languages Machine Code Common Targets
10. 1. C / C++ 2. Rust 3. Go 4. Java 5. C# 6. Kotlin 7. Javascript Compilation Targets 1. JVM Bytecode 2. MS CIL 3. LLVM-IR (BitCode) 4. ASM.JS 5. WASM High-Level Languages Low-Level Languages More Targets
11. 1. JVM Bytecode 2. 3. 4. 5. JVM Bytecode 1. 2. x86-64 3. 4. 5. Low-Level Languages Machine Code • JVM Desktop Virtual Machines Graal Substrate
12. 1. 2. MS CIL 3. 4. 5. MS CIL Low-Level Languages 1. 2. 3. 4. MS CLR Desktop Virtual Machines
13. 1. 2. 3. LLVM-IR (BitCode) 4. 5. LLVM BitCode 1. x86 2. x86-64 3. ARM 4. MIPS 5. PowerPC Low-Level Languages Machine Code • Graal Sulong Desktop Virtual Machines • asm.js • WASM Virtual Machine Code
14. 1. 2. 3. 4. ASM.JS 5. ASM.JS Low-Level Languages 1. SpiderMonkey 2. V8 3. 4. Virtual Machines
15. WebAssembly: What? WebAssembly (abbreviated wasm) • A stack-based virtual machine architecture (no registers).
16. WebAssembly: What? WebAssembly (abbreviated wasm) • A stack-based virtual machine architecture (no registers). • In a way, the next evolution of asm.js and PNaCl
17. WebAssembly X asm.js asm.js (text) Wasm (bytes) (x+y)|0 => i32.add f()|0 => call HEAP32[i>>2]|0 => i32.load
18. WebAssembly: What? WebAssembly (abbreviated wasm) • A stack-based virtual machine architecture (no registers). • In a way, the next evolution of asm.js and PNaCl • An easy, portable compilation target of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.
19. WebAssembly: What? WebAssembly (abbreviated wasm) • A stack-based virtual machine architecture (no registers). • In a way, the next evolution of asm.js and PNaCl • An easy, portable compilation target of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications. • A set of 1-byte opcodes encoded in a size- and load-time-efficient binary format and corresponding mnemonics
20. WebAssembly: What? WebAssembly (abbreviated wasm) • A stack-based virtual machine architecture (no registers). • In a way, the next evolution of asm.js and PNaCl • An easy, portable compilation target of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications. • A set of 1-byte opcodes encoded in a size- and load-time-efficient binary format and corresponding mnemonics • Able to provide predictable performance (difficult for languages w/ GC and really difficult with dynamically-typed languages)
21. WebAssembly: Features • Transpiling to native machine code is super fast • No runtime library • Can call and use exported functions and linear memory from JS • Can export functions and linear memory to JS • No GC for now. Single linear memory space (a byte array). That’s why Go compiled to WASM is bigger than C/C++ and Rust (needs to also compile its own garbage collector to WASM, just like Kotlin and Java). • Runs inside a sandboxed environment, so it's inherently more secure than running a C source code compiled to x86 or ARM architectures
22. WebAssembly: Uses • Avoid plugins like Flash, Java Applets (deprecation, friction, security) • Avoid rewriting large code bases in C/C++/etc - Just compile it • Port high-performance C/C++ libs to be called by JS • Ship audio/video codecs for rare formats • Audio / Video / Image editing / processing (https://github.com/agnivade/shimmer) • 3D editing (AutoCAD: https://web.autocad.com/ - 36.8 MB) • 3D Games (Tanks! w/ Unity3D: https://webassembly.org/demo/Tanks/)
23. 1. 2. 3. 4. 5. WASM WASM: Where to run? Low-Level Languages 1. Browsers 2. Desktop 3. Smart Contract VM Virtual Machines 1. EOS 2. Parity Substrate 3. Dfinity 4. TrueBit Blockchain
24. Text format (.wat) • Encodes a WASM module with all its contained definitions in a way that is equivalent to the binary format. • Uses S-Expressions C++ Binary Text int factorial(int n) { if (n == 0) return 1; else return n * factorial(n-1); } 20 00 42 00 51 04 7e 42 01 05 20 00 20 00 42 01 7d 10 00 7e 0b get_local 0 i64.const 0 i64.eq if i64 i64.const 1 else get_local 0 get_local 0 i64.const 1 i64.sub call 0 i64.mul end
25. Text format (.wat) The shortes possible WASM module: Text (module)
26. Text format (.wat) The shortes possible WASM module: Binary 0000000: 0061 736d ; WASM_BINARY_MAGIC 0000004: 0100 0000 ; WASM_BINARY_VERSION
27. C Example C // demo.c DLL_EXPORT int add(int lhs, int rhs) { return lhs + rhs; } #define DLL_EXPORT __attribute__ ((visibility ("default")))
28. C Example Compile to WASM: clang -mwasm demo.c -o demo.wasm C // demo.c DLL_EXPORT int add(int lhs, int rhs) { return lhs + rhs; } #define DLL_EXPORT __attribute__ ((visibility ("default")))
29. Loading and calling fetch('demo.wasm').then(response => Wasm.compile(response.body.getReader()) ).then(instance => { alert("1 + 2 = " + instance.exports.add( 1, 2)); });
30. C Example WAT (module (func $add (param $lhs i32) (param $rhs i32) (result i32) (i32.add (get_local $lhs) (get_local $rhs)) ) (export "add" $add) )
31. Go Example • Go 1.11 (2018-08-24) added an experimental port to WebAssembly. Go package main import "fmt" func main() { fmt.Println("Hello, WebAssembly!") } $ GOOS=js GOARCH=wasm go build -o main.wasm
32. Go Example index.html <html> <head> <meta charset="utf-8"> <script src="wasm_exec.js"></script> <script> const go = new Go(); WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => { go.run(result.instance); }); </script> </head> <body></body> </html> $ GOOS=js GOARCH=wasm go build -o main.wasm $ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" . $ goexec 'http.ListenAndServe(":8080", http.FileServer(http.Dir(".")))'
33. Go + LLVM https://go.googlesource.com/gollvm/
34. Links 1. https://github.com/mbasso/awesome-wasm 2. https://chinagdg.org/2018/08/liftoff-a-new-baseline-compiler-for-webasse mbly-in-v8/ 3. https://github.com/golang/go/wiki/WebAssembly
35. Thanks! Contact me: Elifarley Cruz elifarley@gmail.com http://about.me/elifarley