WebAssembly becoming the biggest platform

前端狗

2019/01/19 发布于 技术 分类

文字内容
1. English
2. WebAssembly becoming the biggest platform Sven Sauleau 2019 1
3. Sven Sauleau @svensauleau Igalia’s compiler team. @svensauleau 3
4. The Web (previously)
5. @svensauleau 5
6. Java: “write once, run anywhere” Desktop apps. Web pages. Android. Smart Card (SIM, credit card, . . . ). @svensauleau 6
7. The Web (currently)
8. Side note1 Java May 23, 1995 23 years ago JavaScript December 4, 1995 23 years ago 1 source: Wikipedia @svensauleau 8
9. JavaScript became mainstream on the web
10. All good, but suddenly...
11. The <blink> tag stopped working. @svensauleau 11
12. JavaScript, what happened?
13. Loading time Fetching. Parsing source. ∞ Compiling + optimizing −→ reoptimizing. @svensauleau 13
14. Performance Dynamic and untyped. Complex runtime. Managed memory. @svensauleau 14
15. A few optimizations Static analysis is difficult. Minification. Tree shaking. @svensauleau 15
16. Became a compilation target
17. F# Scala Haskell OCaml ... JavaScript The Web @svensauleau 17
18. WebAssembly, at the rescue?
19. Sources C/C++ Rust Golang rustc Go Haskell ... GHC LLVM Asterius Binaryen Compilers Emscripten WebAssembly Module @svensauleau 19
20. WebAssembly Module Runtimes Web browser Other environments (Firefox, Chrome, Safari, Edge, ...) (Node.js, standalone, WAVM, crypto...) @svensauleau 20
21. WebAssembly is a safe, portable, low-level format. @svensauleau 21
22. Replace JavaScript with Wasm?
23. No! @svensauleau 23
24. JavaScript Simple. Accessible. Easy to Debug and Test. @svensauleau 24
25. WebAssembly is designed to be a complement to, not replacement of, JavaScript. @svensauleau 25
26. Steps decode instantiate .wasm −−−−→ WebAssembly.Module −−−−−−→ WebAssembly.Instance @svensauleau 26
27. Efficient representation Compact and easy to decode. Streamable and parallelizable. @svensauleau 27
28. ”Streamable” Download → decode → instantiate → compile. @svensauleau 28
29. .wasm 00 61 73 6d 01 00 00 00 01 07 01 60 02 7f 7f 01 7f 03 02 01 00 07 0a 01 06 61 64 64 54 77 6f 00 00 0a 09 01 07 00 20 00 20 01 6a 0b 00 19 04 6e 61 6d 65 01 09 01 00 06 61 64 64 54 77 6f 02 07 01 00 02 00 00 01 00 . . . @svensauleau 29
30. WebAssembly Module header @svensauleau type section magic type #0 version 1 type #1 func section code section func #1 func #1 . . . func #2 func #2 . . . start section data section func #2 0x1 0x2 . . . 30
31. WebAssembly Module header magic type #0 version 1 type #1 import section JS Native @svensauleau type section export section y from x func #2 func section code section func #1 func #1 . . . func #2 func #2 . . . start section data section func #2 0x1 0x2 . . . JS Native 31
32. 1 2 3 4 5 6 7 const binary = ...; const module = WebAssembly . Module ( binary ) ; const instance = WebAssembly . Instance ( binary , importObject ) ; instance . exports . somefunc () ; @svensauleau 32
33. It’s a virtual machine
34. 1 2 3 Register-based Stack-based (x86, . . . ) (WebAssembly, call stack, . . . ) mov % eax , 0 x1 mov % rax , 0 x1 add % eax , % rax @svensauleau VS 1 2 3 i32 . const 1 i32 . const 1 i32 . add 34
35. Textual representation module.wast: 1 2 3 4 5 6 7 ( module ( func ( export " addTwo " ) ( param i32 i32 ) ( result i32 ) ( get_local 0) ( get_local 1) ( i32 . add ) ) ) @svensauleau 35
36. Performance
37. WebAssembly is fast Compiled to machine code. Static analysis. Optimized Ahead Of Time. @svensauleau 37
38. Side note Crossing the boundary2 Can require a conversion. Can require checks. 2 https://hacks.mozilla.org/2018/10/calls-between-javascript-andwebassembly-are-finally-fast-%F0%9F%8E%89/ @svensauleau 38
39. “Our load time improved by more than 3x [...]” — Figma, medium @svensauleau 39
40. How to use it?
41. Usage Likely: 1 $ compiler - x -- target = wasm file @svensauleau 41
42. Languages 3 • .Net • Astro • Brainfuck • C / C# / C++ • Elixir • Faust • Forest • Forth • Haskell • Golang 3 • Java • Kotlin/Native • Kou • Lua • OCaml • Plorth • Rust • Turboscript • Wah • Wracket • Xlang https://github.com/appcypher/awesome-wasm-langs @svensauleau 42
43. Browser support @svensauleau 43
44. Browser (no) support WebAssembly → JS compiler WebAssembly/binaryen WebAssembly interpreter written in JavaScript (WIP) xtuc/webassemblyjs @svensauleau 44
45. Other usages
46. Serverless Example Cloudflare Run code on edge on each request. Links: main.c, blog + demo @svensauleau 46
47. Crypto “ewasm is a restricted subset of WASM to be used for contracts in Ethereum.” — ewasm @svensauleau 47
48. Gaming Unity and Unreal Engine use WebAssembly Links: Funky Karts, AngryBots @svensauleau 48
49. What does it mean for JavaScript?
50. ES Module Integration 4 Import JS modules and values from Wasm. Export JS module from Wasm. 4 https://github.com/WebAssembly/esm-integration @svensauleau 50
51. with Webpack module.c 1 2 3 4 5 6 # include < strings .h > # include < webassembly .h > EXPORT void test () { console_log ( " Hi " ) ; } index.js 1 2 3 4 import ( " ./ module . c " ) . then (({ test }) = > { test () ; }) ; @svensauleau 51
52. JS-like languages
53. AssemblyScript: TypeScript → WebAssembly compiler 1 2 3 5 export function add ( a : i32 , b : i32 ) : i32 { return a + b ; } 5 AssemblyScript.org @svensauleau 53
54. Work-In-Progress
55. Wasm BigInt 67 WebAssembly: 1 2 3 4 5 ( module ( func ( export " fn " ) ( param i64 ) ( result i64 ) ( get_local 0) ) ) JavaScript: 1 exports . fn (42 n ) === 42 n 6 7 https://sauleau.com/notes/wasm-bigint.html https://github.com/WebAssembly/JS-BigInt-integration @svensauleau 55
56. Host Bindings 8 Integration with the host Import Web APIs. Manipulate JavaScript + DOM objects. 8 https://github.com/webassembly/host-bindings @svensauleau 56
57. Garbage collection 9 • Data structures • Reference types • Support more languages 9 https://github.com/webassembly/gc @svensauleau 57
58. Threading 10 • Native threads • Shared memory • Atomics 10 https://github.com/webassembly/threads @svensauleau 58
59. Demo
60. Thanks