WebAssembly for Developers (web… or not)

A presentation at GDG Lille in December 2019 in Lille, France by Horacio Gonzalez

Slide 1

Slide 1

WebAssembly for Developers (web… or not) Horacio Gonzalez @LostInBrittany GDG Lille

Slide 2

Slide 2

Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek GDG Lille

Slide 3

Slide 3

OVHcloud: A Global Leader 250k Private cloud VMs running 1 Dedicated IaaS Europe 30 Datacenters Own 20Tbps Hosting capacity : 1.3M Physical Servers 360k Servers already deployed GDG Lille Netwok with 35 PoPs

1.3M Customers in 138 Countries

Slide 4

Slide 4

OVHcloud: Our solutions Cloud GDG Lille Web Hosting Mobile Hosting Telecom VPS Containers ▪ Dedicated Server Domain names VoIP Public Cloud Compute ▪ Data Storage Email SMS/Fax Private Cloud ▪ Network and Database CDN Virtual desktop Serveur dédié Security Object Storage Web hosting Cloud HubiC Over theBox ▪ Licences Cloud Desktop Securities MS Office Hybrid Cloud Messaging MS solutions

Slide 5

Slide 5

Did I say WebAssembly? WASM for the friends… GDG Lille

Slide 6

Slide 6

WebAssembly, what’s that? Let’s try to answer those (and other) questions… GDG Lille

Slide 7

Slide 7

A low-level binary format for the web Not a programming language A compilation target GDG Lille

Slide 8

Slide 8

That runs on a stack-based virtual machine A portable binary format that runs on all modern browsers… but also on NodeJS! GDG Lille

Slide 9

Slide 9

With several key advantages GDG Lille

Slide 10

Slide 10

But above all… WebAssembly is not meant to replace JavaScript GDG Lille

Slide 11

Slide 11

Who is using WebAssembly today? And many more others… GDG Lille

Slide 12

Slide 12

A bit of history Remembering the past to better understand the present GDG Lille

Slide 13

Slide 13

Executing other languages in the browser A long story, with many failures… GDG Lille

Slide 14

Slide 14

2012 - From C to JS: enter emscripten Passing by LLVM pivot GDG Lille

Slide 15

Slide 15

Wait, dude! What’s LLVM? A set of compiler and toolchain technologies GDG Lille

Slide 16

Slide 16

2013 - Generated JS is slow… Let’s use only a strict subset of JS: asm.js Only features adapted to AOT optimization GDG Lille

Slide 17

Slide 17

WebAssembly project Joint effort GDG Lille

Slide 18

Slide 18

Hello W(ASM)orld My first WebAssembly program GDG Lille

Slide 19

Slide 19

Do you remember your 101 C course? A simple HelloWorld in C GDG Lille

Slide 20

Slide 20

We compile it with emscripten GDG Lille

Slide 21

Slide 21

We get a .wasm file… Binary file, in the binary WASM format GDG Lille

Slide 22

Slide 22

We also get a .js file… Wrapping the WASM GDG Lille

Slide 23

Slide 23

And a .html file To quickly execute in the browser our WASM GDG Lille

Slide 24

Slide 24

And in a more Real WorldTM case? A simple process: ● Write or use existing code ○ In C, C++, Rust, Go, AssemblyScript… ● Compile ○ Get a binary .wasm file ● Include ○ The .wasm file into a project ● Instantiate ○ GDG Lille Async JavaScript retrieving and instantiating the .wasm binary

Slide 25

Slide 25

I think I need a real example now Let’s use WASM Explorer https://mbebenita.github.io/WasmExplorer/ GDG Lille

Slide 26

Slide 26

Let’s begin with the a simple function WAT: WebAssembly Text Format Human readable version of the .wasm binary GDG Lille

Slide 27

Slide 27

Download the binary .wasm file Now we need to call it from JS… GDG Lille

Slide 28

Slide 28

Instantiating the WASM 1. Get the .wasm binary file into an array buffer 2. Compile the bytes into a WebAssembly module 3. Instantiate the WebAssembly module GDG Lille

Slide 29

Slide 29

Instantiating the WASM GDG Lille

Slide 30

Slide 30

Loading the squarer function We instantiate the WASM by loading the wrapping JS GDG Lille

Slide 31

Slide 31

Using it! Directly from the browser console (it’s a simple demo…) GDG Lille

Slide 32

Slide 32

Communicating between JS and WASM Shared memory, functions… GDG Lille

Slide 33

Slide 33

Native WASM types are limited WASM currently has four available types: ● ● ● ● i32: 32-bit integer i64: 64-bit integer f32: 32-bit float f64: 64-bit float Types from languages compiled to WASM are mapped to these types GDG Lille

Slide 34

Slide 34

How can we share data? GDG Lille Using the same data in WASM and JS? Shared linear memory between them!

Slide 35

Slide 35

Some use cases What can I do with it? GDG Lille

Slide 36

Slide 36

Tapping into other languages ecosystems Don’t rewrite libs anymore GDG Lille

Slide 37

Slide 37

Replacing problematic JS bits Predictable performance Same peak performance, but less variation GDG Lille

Slide 38

Slide 38

AssemblyScript Writing WASM without learning a new language GDG Lille

Slide 39

Slide 39

TypeScript subset compiled to WASM Why would I want to compile TypeScript to WASM? GDG Lille

Slide 40

Slide 40

Ahead of Time compiled TypeScript More predictable performance GDG Lille

Slide 41

Slide 41

Avoiding the dynamicness of JavaScrip More specific integer and floating point types GDG Lille

Slide 42

Slide 42

Objects cannot flow in and out of WASM yet Using a loader to write/read them to/from memory GDG Lille

Slide 43

Slide 43

No direct access to DOM Glue code using exports/imports to/from JavaScript GDG Lille

Slide 44

Slide 44

WASM outside the browser Not only for web developers GDG Lille

Slide 45

Slide 45

Run any code on any client… almost Languages compiling to WASM GDG Lille

Slide 46

Slide 46

Includes WAPM The WebAssembly Package Manager GDG Lille

Slide 47

Slide 47

But I need some POSIX WebAssembly System Interface GDG Lille

Slide 48

Slide 48

Huge potential GDG Lille

Slide 49

Slide 49

Future To the infinity and beyond! GDG Lille

Slide 50

Slide 50

WebAssembly Threads Threads on Web Workers with shared linear memory GDG Lille

Slide 51

Slide 51

SIMD GDG Lille

Slide 52

Slide 52

Garbage collector And exception handling GDG Lille