WebAssembly

WebAssembly, 20180222, Redwerk 16

Transcript

1. 2018 @arturparkhisenko 1 Photo by Ilnur Kalimullin on Unsplash WEBASSEMBLY
2. Closure, Scala, Ruby, Python, Perl, Go, Java/JVM, Erlang, Elixir, C#, F#, Lisp, Scheme, OCaml, Haskell, Smalltalk, C/C++, Basic, PHP, ActionScript, Prolog, Lua and others here. But there’s A New Hope... 2 JavaScript is a compile target for
3. WASM 1. Who is 2. How it works 3. Usage: Why, Where, How 4. Examples 3
4. • Java Applets • ActiveX • NaCl & PNaCl • asm.js *2013 History 4
5. function f(i) { 'use asm'; i = i | 0; return (i + 1) | 0; } ASM.js example 5 int f(int i) { return i + 1; } C++ ASM.js
6. 6 source [####################] 19.55s JavaScript [###############_____] 15.67s Asm.js [##########__________] 10.27s Native ASM.js execution time
7. 7 Don't reinvent the wheel? ancient-wheel.png
8. 8 Size and load-time-efficient binary format (.wasm) It has Intermediate representation (.wast) Compiler target Who is WEBASSEMBLY or WASM Open standard with cross-browser support W3C 20180215: WebAssembly First Public Working Drafts
9. 9 C | C++ | Rust | C# | JAVA | Kotlin | AssemblyScript(TS) | Swift And others in future Portability Windows | MacOS | Linux | Android | iOS ... x86_64 | arm | arm64 | i686 | mips | powerpc ... V8 | SpiderMonkey | Chakra | JSC(Nitro) … Compile target for
10. C/C++ Source => Emscripten => WebAssembly C++ -> Clang -> LLVM(IR) -> Emscripten(asm.js) -> binaryen(asm2wasm) -> webAssembly OR C/C++ Source => WASM LLVM backend => s2wasm => WebAssembly C++ -> Clang -> LLVM(IR) -> webAssembly How it works 10
11. 11 https://medium.com/reloading/javascript-start-up-performance-69200f43b201
12. 12 https://blog.sessionstack.com/how-javascript-works-a-comparison-with- webassembly-why-in-certain-cases-its-better-to-use-it-d80945172d79
13. 13 JavaScript code is much more expensive, byte for byte, than an image, because of the time spent parsing and compiling it. It's possible to parse and compile wasm as fast as it comes over the network, which makes it much more like an image than JavaScript code. Game changer! Yehuda Katz, twitter @wycats said:
14. • Existing code portability to web • Compact (but requires a glue code) • No Parsing • Optimization and Deoptimization • Lower-level (no garbage collection) • Typed (everything is static) • A linear memory model (auto-increasing heap) Why WASM 14
15. • No garbage collection: Both asm.js and WASM do not produce ‘garbage’ that needs to be collected • Everything is static: Once the code is compiled, it is guaranteed to stay that way. • A linear memory model: C/C++ heap into a single Javascript TypedArray 15 Why WASM is fast
16. 2D/3D: AR/VR, Computer vision, Games (Unity, Unreal, etc…), WebGL, mapping – Altus platform, Google Earth, User-interface design, Medical imaging Data processing: Multimedia (Image/Audio/Video) Edit/Recognize/Codecs: Audio mixing , Video codec support , Digital signal processing, Language detection, Compression – zlib-asm, Brotli, lzma, Computer algebra Other: ReactJS ;)? Cross-platform node extensions: performant CLI tooling (LibSass). Desktop apps using Electron / PWA: CAD, Editors. Simulations: Physical simulation / Platform simulation / emulation (ARC, DOSBox, QEMU, MAME) Where 16 source
17. How 17
18. The LLVM Project is a collection of modular and reusable compiler and toolchain technologies. LLVM itself is written in C++. It has an IR - intermediate representation. Clang is an "LLVM native" C/C++/Objective-C compiler. LLVM and Clang 18
19. & other: • Binaryen - Binary + Emscripten: asm2wasm, s2wasm, AssemblyScript, wasm2asm, mir2wasm • WABT - WebAssembly Binary Toolkit: wat2wasm, wasm2wat, wasm-objdump, wasm-interp, wat-desugar, wasm-link(lld), wasm2c Toolchain 19 LLVM to JavaScript compiler provides: libc, libc++, SDL, GLES2, GLFW
20. 20 emsdk - sdk manager, used to perform all SDK maintenance and can install sdk as a bundle which contains: clang, node, emscripten(emcc). emcc - emscripten compiler frontend (use in cli) Emscripten Toolchain
21. JavaScript API • WebAssembly namespace • Module • Loading and running • Function imports and exports • Memory 21 to read 1 to read 2
22. Usage 22 to read
23. 23 int sum(int x, int y) { return x + y; } sum.c
24. 24 emcc -s WASM=1 -s SIDE_MODULE=1 -Oz -g4 -o sum.wasm sum.c Run
25. 25 emcc -s WASM=1 -Oz -g4 -o sum.js or -o sum.html sum.c Run
26. 26 sum.wast (module (export "_sum" (func $_sum)) (func $_sum (; 0 ;) (param $0 i32) (param $1 i32) (result i32) (i32.add (get_local $1) (get_local $0) ))) This code was a little bit cleaned ;)
27. 27 JS loader const loadWASM = async (url, importObject) => { const buffer = await fetch(url) .then(r => r.arrayBuffer()); const result = await WebAssembly .instantiate(buffer, importObject); return result.instance; };
28. 28 JS loader const loadWASM2 = (url, importObject) => fetch(url) .then(response => response.arrayBuffer()) .then(buffer => WebAssembly .compile(buffer)) .then(module => new WebAssembly .Instance(module, importObject));
29. 29 JS API const importObject = { env: { memoryBase: 0, tableBase: 0, memory: new WebAssembly.Memory({ // ArrayBuffer initial: 1, // 64KiB - single page maximum: 10 // 640KiB }), table: new WebAssembly.Table({ // Table initial: 0, // length element: 'anyfunc' }) } }; new WebAssembly.Memory({initial: 32767, maximum: 65536}) // tab will eat ~1.6gb(2gb), bigger values will throw a RangeError
30. 30 JS API loadWASM('sum.wasm', importObject) .then(instance => { const {exports} = instance; const result = exports._sum(40, 2); console.log({instance, result}); });
31. 31 JS API
32. 32 JS API more • Call compiled C functions from normal JS • Call compiled C++ classes from JS • Call JavaScript functions from C/C++ • Call passed JS functions using pointers from C/C++
33. • Webpack ◦ v2+ as global .js, ◦ v3+ as .wasm using wasm-loader ◦ v4+ as .wasm * async-only • Parcel v1.5.0+, as .wasm/.rs Usage 33 A lot of examples here *Sync WebAssembly compilation is not yet implemented - v4.1.1
34. // Webpack 4.1.1 - Sync WebAssembly compilation is not yet implemented import {fib} from './fib.wasm'; console.log('import test fib', fib); Usage, Webpack and Parcel 34
35. // WebAssembly module (indirect) import('./fib-async').then(module => { const result = module.default(13); console.log('fib-async', result); }); Usage, Webpack and Parcel 35
36. // WebAssembly module (direct) import('./fib.wasm').then(({fib}) => { // arg is wasm.fib const result = fib(13); console.log('fib.wasm', result); }); Usage, Webpack and Parcel 36
37. import {fib} from './fib.wasm'; import {fib as fibRs} from './fib.rs'; console.log(fib(42)); console.log(fibRs(42)); import('./fib.rs').then(({fib}) => { // wasm.fib const result = fib(13); console.log('fib-async .rs', result); }); Usage, Parcel 37
38. Filesystem? Emscripten provides a virtual file system that simulates the local file system (MEMFS - default, NODEFS, IDBFS browser indexedDB). Emscripten-generated code running in the browser cannot access files in the local file system. You can use preloading and embedding(package). It is possible to allow access to local file system for code running in node.js, use the NODEFS filesystem option. 38 source
39. "-g<level>" emcc command line option which controls how much debug information is kept when compiling from bitcode to JavaScript. Our case it’s "-g4". This is the highest level of debuggability: • Don't minify • Preserve function names • Preserve variable names • Preserve LLVM debug information (shows line number, debug comments, source maps) 39 Debugging
40. 40 Source file as is Debugging .wast representation .js .wasm In both cases you’ll see human readable format, with ability to set breakpoints.
41. Yehuda Katz, twitter @wycats said: 41 The WebAssembly text format is called WAT (*W*eb*A*ssembly *T*ext format). Whose idea was it to call it WAT and not WTF (Wasm Text Format)?
42. Can i use ASM.js Edge Firefox Chrome Safari 16 53 57 11 42 Can i use WASM Edge Firefox Chrome Safari 13 22 28
43. FAQ 43 Is WebAssembly a security risk? No, unless you consider JS a security risk. WebAssembly is about as secure as Javascript since it runs in the same sandbox. Typical WebAssembly implementations only add a fairly small parser module to the existing JS engine. Can I start a program or process from WebAssembly? Nope, same reason as DLLs, it would be unsafe. • Today Wasm runs just ~20% slower than native code execution. • Today no multithreading :/ • code-that-cannot-be-compiled source
44. FAQ 44 Can I access sockets, files, native API X… from WebAssembly? No, WebAssembly runs inside the browser sandbox and can only access Web APIs (just like Javascript). Emscripten SDK provides wrappers for many common native APIs which simplifies porting existing C/C++ code over (for instance sockets-to-WebSockets, GL-to-WebGL, OpenAL-to-WebAudio, and some more…). Can I load and call into a DLL from WebAssembly? No, DLLs are native machine code and thus off-limits. But WebAssembly supports dynamic linking between WASM modules, this allows to reuse shared code modules (they can be cached locally). source
45. Awesome things • nectarjs - JS to ANY • ide.onelang.io - JS to 10 languages • mbasso/gccx - JSX? CPX support: JSX like syntax in C++ ◦ mbasso/asm-dom + mbasso/asm-dom-boilerplate using gccx Perf tests • why-webassembly-is-faster-than-asm-js • getting-started-with-webassembly-in-node • WebAssembly-benchmark • how-to-get-a-performance-boost-using-webassembly • WASM-vs-JS-Realtime-pitch-detection Languages • wasm-wheel - Random Lang for WASM • blazor-experimental-project - .Net • teavm.org - Java • webassembly-swift-c-java-and-oxygene-in-the-browser - Swift, C#, Java • what-languages-can-be-compiled-to-web-assembly-or-wasm 45 URL’s
46. Examples from this presentation: https://github.com/arturparkhisenko/til/tree/master/wasm Web version (gh-pages): https://github.com/arturparkhisenko/til/tree/master/wasm • from-asm-js-to-webassembly • webassembly-for-beginners, ru • awesome-wasm Video • Real world WebAssembly - Sergey Rubanov, ru • WebAssembly and Node.js - Ben Smith • Compiling for the Web with WebAssembly • What WebAssembly means for React - Lin Clark • Hacker's guide to Web Assembly - Vigneshwer Dhinakaran • Practical WebAssembly - Dan Callahan • WebAssembly: What and What Next? - Ben Titzer and Andreas Rossberg Course (workshop) google codelabs web-assembly-intro URL’s 46
47. 1. webassembly.studio 2. WasmExplorer + WasmFiddle 3. godbolt + gcc.godbolt 4. ast.run 5. shamadee/wasm-init 6. parcel-v1-5-0-released-source-maps-webassembly-rust 7. MichaReiser/speedy.js 8. AssemblyScript 9. npmjs webassembly + wasm 10. kripken binaryen 11. asampson llvm 12. what-is-llvm-the-power-behind-swift-rust-clang-and-more 13. kripken Porting-Examples-and-Demos URL’s : tools 47
48. 1. an-introduction-to-webassembly 2. xtuc/js-webassembly-interpreter - polyfill 3. a-crash-course-in-memory-management in 3 parts 4. callahad tccc20-wasm 5. webassembly-demystified 6. WebAssembly/wabt 7. asmjs spec 8. WebAssembly and the Future of the Web - kgryte 9. kripken mloc_emscripten_talk 10. mozilla webassembly-in-browsers 11. how-javascript-works-a-comparison-with-webassembly-why-in-certain-cases-its-better-to-use-it 12. gurugio/lowlevelprogramming-university 13. speed-up-your-node-js-app-with-native-addons 14. AndrewScheidecker/WAVM 15. alexnoz/wasm-class-sample 16. ballercat/walt 17. ir-is-better-than-assembly 18. tomassetti introduction-to-webassembly 19. https://habrahabr.ru/post/345748/ ru (assemblers) 20. https://habrahabr.ru/post/342180/ ru 21. https://kripken.github.io/emscripten-site/docs/api_reference/emscripten.h.html 22. https://github.com/asRIA/emscripten-docker 23. https://developers.google.com/web/updates/2018/03/emscripting-a-c-library URL’s : other 48
49. Own arturparkhisenko wasm examples intro arturparkhisenko wasm examples fib-module-used Top 1. emulators win311vr 2. unity3d AngryBots 3. unreal EpicZenGarden + video 4. webassembly skeletal animation + repository Other 1. maierfelix wasm-particles + repository 2. floooh sokol-html5 + repository 3. funky karts + article about 4. webassembly demo tanks 5. sniklaus raytracer 6. aransentin cwasm 7. shamadee/web-dsp-demo + url 8. JasonHuang3D/AJC-Flash-WebAssembly-Examples 49 URL’s : demos
50. • Binary and text format • Low-level compiler target • Small, Fast & Robust • Enhances existing code Conclusion 50 2018 @arturparkhisenko
51. • WasmWeekly twitter • Alon Zakai twitter • Dmitriy Tsvettsikh twitter, medium • Sergey Rubanov twitter, medium Whom to follow 51 2018 @arturparkhisenko
52. URL: https://goo.gl/bUKdoq Thanks! Questions? 52 2018 @arturparkhisenko