dotJS 2019 - Into WebAssembly

Slide 1

Slide 1 text

@vladikoﬀ | Paris 2019 Into WebAssembly Add WASM to your existing projects!

Slide 2

Slide 2 text

@vladikoff | Paris 2019 Vlad Filippov Toronto, Canada 󰎟 vf.io twitter.com/vladiko ff github.com/vladikoff

Slide 3

Slide 3 text

@vladikoﬀ | Paris 2019 You probably already heard about WebAssembly... ● A new low-level bytecode format for the Web ● Stack-based virtual machine, produces *.wasm modules ● User for: ○ Calculations and computational tasks ○ Importing low-level components from other languages ○ Audio, Image and Video processing ○ Game development ○ Bitcoin mining $$$$ ● Integrates well with the Web Developer workﬂow https://www.tu-braunschweig.de/Medien-DB/ias/pubs/2019-dimva.pdf

Slide 4

Slide 4 text

@vladikoﬀ | Paris 2019 Meanwhile this morning...

Slide 5

Slide 5 text

@vladikoﬀ | Paris 2019 WebAssembly is already here!

Slide 6

Slide 6 text

@vladikoﬀ | Paris 2019 We have an app in production. But it’s slow*! The Problem

Slide 7

Slide 7 text

@vladikoﬀ | Paris 2019 xxHash - an extremely fast non-cryptographic hash algorithm. Implementation in diﬀerent languages. INPUT: “String” OUTPUT: 38F1791AF7DCE8B5 COMPUTE: XXH.h64(INPUT) 100 000 times

Slide 8

Slide 8 text

@vladikoﬀ | Paris 2019 Let’s optimize with WASM! The Solution webassembly.studio

Slide 9

Slide 9 text

@vladikoﬀ | Paris 2019 Replace with a WASM module... Compute... Main Thread Done!

Slide 10

Slide 10 text

@vladikoﬀ | Paris 2019 Demo WASM modules

Slide 11

Slide 11 text

@vladikoﬀ | Paris 2019

Slide 12

Slide 12 text

@vladikoﬀ | Paris 2019 Compute... Web Worker Main Thread createWasmWebWorker('parser.wasm').then(parser => { const result = parser.input(data); }); Done! Use web workers with WebAssembly... new Worker('worker.js');

Slide 13

Slide 13 text

@vladikoﬀ | Paris 2019 Demo WASM web workers

Slide 14

Slide 14 text

@vladikoﬀ | Paris 2019

Slide 15

Slide 15 text

@vladikoﬀ | Paris 2019 WASM Future Beyond the Browser

Slide 16

Slide 16 text

@vladikoﬀ | Paris 2019 bytecodealliance.org WASM beyond the browser... ● Using WebAssembly System Interfaces (WASI) to go run WASM beyond the browser. ● New software security model, useful for C++ and Rust, etc. ● WebAssembly speed to runtimes in Python, node.js, etc. open source community dedicated to creating secure new software foundations through WebAssembly Python node.js .NET

Slide 17

Slide 17 text

@vladikoﬀ | Paris 2019 “nanoprocess” security model goal Python node.js process sandboxed: memory network access sandboxed: memory ﬁle system access sandboxed: memory

Slide 18

Slide 18 text

@vladikoﬀ | Paris 2019 Demo WebAssembly System Interfaces

Slide 19

Slide 19 text

@vladikoﬀ | Paris 2019

Slide 20

Slide 20 text

@vladikoﬀ | Paris 2019 In conclusion... ● Use WebAssembly wisely - benchmark, optimize inputs, workers! ● WebAssembly might not always be a solution! ● Keep an eye on WASM module size and your WebPack output ● Research diﬀerent WASM runtimes ● Go beyond the Web Browser and get excited for the future with WebAssembly!

Slide 21

Slide 21 text

@vladikoff | Paris 2019 Vlad Filippov twitter.com/vladiko ff github.com/vladikoff linkedin.com/in/vladikoff Merci beaucoup dotJS!