IO Extended Suwon Web Assembly

IO Extended Suwon Web Assembly

Transcript

1. Slide ㅇTitle Subhead Web Assembly David Michael Barr
2. WEBASSEMBLY Google I/O Extended @Suwon with David Michael Barr
3. David Michael Barr Staff Engineer @ Samsung in Suwon - DevOps lead for browser development Previously, Chrome team @ Google Sydney - WebKit committer - Depot tools contributor Bespoke Web Applications in Canberra Interested in High Performance Computing Language of highest proficiency: C99
4. Fundamental properties of the Web ➔ Linkability – URLs connect documents, apps & content ➔ Ephemerality – resources are loaded on demand ➔ Origin security model – sites are sandboxed
5. Foundations of the interactive web ➔ html5 living specification for dynamic content ➔ High-performance just-in-time optimized Javascript ➔ WebGL accelerated graphics API ➔ ServiceWorker for creating offline experiences
6. Complex applications on the Web ➔ Collaborative document editing ➔ Web-based email ➔ Photography and image editing ➔ Multimedia authoring ➔ Multi-way video calls
7. Past Intermediate Representations for the Web ➔ Java Applets ➔ ActiveX ➔ Dart VM ➔ Portable Native Client (PNaCl) ➔ asm.js
8. WebAssembly - Low-level binary format ➔ Performance – Ahead-of-time optimizing compilers ➔ Portability – Bringing new languages to the web ◆ Full support – C, C++, Rust ◆ Experimental – Kotlin, .NET
9. Widely supported runtime 83.2% Desktop 75.6% Mobile 71.7% Global https://caniuse.com/#feat=wasm
10. emscripten “Emscripten is a toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed without plugins.” ./emcc tests/hello_world.c -o hello.html
11. https://play.rust-lang.org/ #[no_mangle] pub fn fib(n: u32) -> u32 { if n < 2 { n } else { fib(n - 2) + fib(n - 1) } } (func $fib (export "fib") (type $t0) (param $p0 i32) (result i32) (block $B0 (br_if $B0 (i32.ge_u (get_local $p0) (i32.const 2))) (return (get_local $p0))) (i32.add (call $fib (i32.add (get_local $p0) (i32.const -2))) (call $fib (i32.add (get_local $p0) (i32.const -1)))))
12. https://webassembly.studio/ Wasm-function[0]: 0x000000: ; 0x000000 from: [0x000008, 0x000019, 0x00001f] sub rsp, 0x18 ; 0x000000 48 83 ec 18 cmp qword ptr [r14 + 0x28], rsp ; 0x000004 49 39 66 28 jae 0x71 ; 0x000008 0f 83 63 00 00 00 0x00000e: mov dword ptr [rsp + 0xc], edi ; 0x00000e 89 7c 24 0c mov eax, dword ptr [rsp + 0xc] ; 0x000012 8b 44 24 0c cmp eax, 2 ; 0x000016 83 f8 02 jae 0x24 ; 0x000019 0f 83 05 00 00 00 0x00001f: jmp 0x4a ; 0x00001f e9 26 00 00 00 0x000024: mov edi, dword ptr [rsp + 0xc] ; 0x000024 8b 7c 24 0c add edi, -2 ; 0x000028 83 c7 fe call 0 ; 0x00002b e8 d0 ff ff ff mov dword ptr [rsp + 8], eax ; 0x000030 89 44 24 08 mov eax, dword ptr [rsp + 0xc] ; 0x000034 8b 44 24 0c add eax, -1 ; 0x000038 83 c0 ff mov edi, eax ; 0x00003b 8b f8 call 0 ; 0x00003d e8 be ff ff ff mov ecx, eax ; 0x000042 8b c8 mov eax, dword ptr [rsp + 8] ; 0x000044 8b 44 24 08 add eax, ecx ; 0x000048 03 c1 nop ; 0x00004a 66 90 add rsp, 0x18 ; 0x00004c 48 83 c4 18 ret ; 0x000050 c3
13. Case studies ➔ figma.com ◆ Typescript, React ◆ C++, WebAssembly ◆ WebGL ◆ Freetype, HarfBuzz ◆ WebSockets ➔ construct.net ◆ Author in the browser ◆ Publish to various platforms ➔ AutoCAD ◆ 2~5 million active files ◆ 5+ billion archived files ◆ Flash → html5 & JS → WebAssembly ◆ 2017 – Viewer ◆ March 2018 – Editor
14. Case Study: AV1 Bitstream Analyzer
15. Case Study: AV1 Bitstream Analyzer ➔ Video format under development ➔ Reference code in C99 ➔ Test videos encoded on Amazon Elastic Cloud Compute ➔ Compressed output served by simple storage ➔ Decoder.js compiled with emscripten ➔ Web-based analyzer UI ◆ Renders decoded video ◆ Overlays with bitstream details bit.ly/2lgTSEO
16. Case Study: Funky Karts Demo ➔ http://www.rossis.red/wasm.html ◆ The Plan ◆ Emscripten ◆ Makefile ◆ Making a Splash ◆ Handling Input ◆ Audio ◆ Fullscreen ➔ https://www.funkykarts.rocks/demo.html ◆ Try it on your phone! ◆ Try it on your notebook!
17. WebAssembly – Features to add after the MVP ➔ Feature proposal ◆ Threads ◆ Fixed-width SIMD ◆ Exception handling ◆ Garbage collection ◆ Bulk memory operations ◆ ECMAScript module integration ◆ Tail Call ◆ Host bindings ◆ Type Reflection for WebAssembly JavaScript API ◆ Unmanaged closures ◆ Custom Annotation Syntax in the Text Format ➔ Implementation phase ◆ Non-trapping float-to-int conversions ◆ Multi-value ◆ Sign-extension operators ◆ Import/Export Mutable Globals
18. Thank you 삼성전자 David Michael Barr