Hands-on-lab: Hands on WebAssembly

A presentation at JFokus in February 2020 in Stockholm, Sweden by Horacio Gonzalez

Slide 1

Slide 1

Hands on WebAssembly Horacio Gonzalez @LostInBrittany

Slide 2

Slide 2

Who are we? Introducing myself and introducing OVH OVHcloud

Slide 3

Slide 3

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

Slide 4

Slide 4

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

1.3M Customers in 138 Countries

Slide 5

Slide 5

OVHcloud: Our solutions Cloud 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 Storage Over the Box ▪ Licences Cloud Desktop Securities MS Office Hybrid Cloud Messaging MS solutions

Slide 6

Slide 6

How is the codelab structured? What are we coding today?

Slide 7

Slide 7

A GitHub repository https://github.com/LostInBrittany/wasm-codelab

Slide 8

Slide 8

Nothing to install Using WebAssembly Explorer and WebAssembly Studio

Slide 9

Slide 9

Only additional tool: a web server Because of the browser security model

Slide 10

Slide 10

Procedure: follow the steps Step by step

Slide 11

Slide 11

But before coding, let’s speak What’s this WebAssembly thing?

Slide 12

Slide 12

Did we say WebAssembly? WASM for the friends…

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

With several key advantages

Slide 17

Slide 17

But above all… WebAssembly is not meant to replace JavaScript

Slide 18

Slide 18

Who is using WebAssembly today? And many more others…

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

WebAssembly project Joint effort

Slide 25

Slide 25

Hello W(ASM)orld My first WebAssembly program

Slide 26

Slide 26

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

Slide 27

Slide 27

We compile it with emscripten

Slide 28

Slide 28

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

Slide 29

Slide 29

We also get a .js file… Wrapping the WASM

Slide 30

Slide 30

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

Slide 31

Slide 31

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 ○ Async JavaScript compiling and instantiating the .wasm binary

Slide 32

Slide 32

I don’t want to install a compiler now… Let’s use WASM Explorer https://mbebenita.github.io/WasmExplorer/

Slide 33

Slide 33

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

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

Instantiating the WASM

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

You sold us a codelab! Stop speaking and let us code

Slide 40

Slide 40

You can do steps 01 and 02 now Let’s code, mates!

Slide 41

Slide 41

WASM outside the browser Not only for web developers

Slide 42

Slide 42

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

Slide 43

Slide 43

Includes WAPM The WebAssembly Package Manager

Slide 44

Slide 44

Some use cases What can I do with it?

Slide 45

Slide 45

Tapping into other languages ecosystems Don’t rewrite libs anymore

Slide 46

Slide 46

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

Slide 47

Slide 47

Communicating between JS and WASM Shared memory, functions…

Slide 48

Slide 48

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

Slide 49

Slide 49

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

Slide 50

Slide 50

You can do steps 03 and 04 now Let’s code, mates!

Slide 51

Slide 51

AssemblyScript Writing WASM without learning a new language

Slide 52

Slide 52

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

Slide 53

Slide 53

Ahead of Time compiled TypeScript More predictable performance

Slide 54

Slide 54

Avoiding the dynamicness of JavaScript More specific integer and floating point types

Slide 55

Slide 55

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

Slide 56

Slide 56

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

Slide 57

Slide 57

You can do step 05 now Let’s code, mates!

Slide 58

Slide 58

Future To the infinity and beyond!

Slide 59

Slide 59

WebAssembly Threads Threads on Web Workers with shared linear memory

Slide 60

Slide 60

SIMD

Slide 61

Slide 61

Garbage collector And exception handling

Slide 62

Slide 62

WASI WebAssembly System Interface

Slide 63

Slide 63

WebAssembly ❤ Web Components How to hide the complexity and remove friction

Slide 64

Slide 64

The 3 minutes context What the heck are web component?

Slide 65

Slide 65

Web Components Web standard W3C

Slide 66

Slide 66

Web Components Available in all modern browsers: Firefox, Safari, Chrome

Slide 67

Slide 67

Web Components Create your own HTML tags Encapsulating look and behavior

Slide 68

Slide 68

Web Components Fully interoperable With other web components, with any framework

Slide 69

Slide 69

Web Components CUSTOM ELEMENTS SHADOW DOM TEMPLATES

Slide 70

Slide 70

Custom Element To define your own HTML tag <body> … <script> window.customElements.define(‘my-element’, class extends HTMLElement {…}); </script> <my-element></my-element> </body>

Slide 71

Slide 71

Shadow DOM To encapsulate subtree and style in an element <button>Hello, world!</button> <script> var host = document.querySelector(‘button’); const shadowRoot = host.attachShadow({mode:’open’}); shadowRoot.textContent = ‘こんにちは、影の世界!’; </script>

Slide 72

Slide 72

Template To have clonable document template <template id=”mytemplate”> <img src=”” alt=”great image”> <div class=”comment”></div> </template> var t = document.querySelector(‘#mytemplate’); // Populate the src at runtime. t.content.querySelector(‘img’).src = ‘logo.png’; var clone = document.importNode(t.content, true); document.body.appendChild(clone);

Slide 73

Slide 73

But in fact, it’s just an element… ● ● ● ● Attributes Properties Methods Events

Slide 74

Slide 74

You can do step 06 and 07 now Let’s code, mates!