Hands-on WebAssembly Horacio Gonzalez 2021-06-24

Who are we? Introducing myself and introducing OVH OVHcloud

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

OVHcloud: A global leader Web Cloud & Telcom 30 Data Centers in 12 locations 1 Million+ Servers produced since 1999 Private Cloud 34 Points of Presence on a 20 TBPS Bandwidth Network 1.5 Million Customers across 132 countries Public Cloud 2200 Employees worldwide 3.8 Million Websites hosting Storage 115K Private Cloud VMS running 1.5 Billion Euros Invested since 2016 300K Public Cloud instances running P.U.E. 1.09 Energy efficiency indicator 380K Physical Servers running in our data centers 20+ Years in Business Disrupting since 1999 Network & Security

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

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

Nothing to install Using WebAssembly Explorer and WebAssembly Studio

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

Procedure: follow the steps Step by step

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

Did I say WebAssembly? Wasm for friends…

WebAssembly, what’s that?

A low-level binary format Not a programming language, a compilation target

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

With several key advantages

But above all… Wasm is not meant to replace JavaScript

Who is using WebAssembly today? And many more others…

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

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

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

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

WebAssembly project Joint effort

Hello W(asm)orld My first WebAssembly program

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

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

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

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

Instantiating the WASM

Loading the squarer function

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

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

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

Some use cases What can I do with it?

Tapping into other languages ecosystems Don’t rewrite libs anymore

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

Features of Wasm Why is everybody looking at it?

Near native speed https://medium.com/wasmer/benchmarking-webassembly-runtimes-18497ce0d76e

Highly portable It can be run almost everywhere…

Readable and debuggable Each .wasm file with it .wat companion file

Memory safe & secure Running in a fully sandboxed environment

Accepting many source languages And more and more…

Some constraints Still a young platform…

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

How can we share data? Using the same data in WASM and JS? Shared linear memory between them, and serializing the data to one Wasm types

Solution is coming: Interface types Beautiful description at: https://hacks.mozilla.org/2019/08/webassembly-interface-types

No outside access By design, communication is done using the shared linear memory only

Solution exists: WASI

Mono-thread and scalar operations only Not the most efficient way…

Solution exists: SIMD

Solutions are coming too: Wasm Threads Threads on Web Workers with shared linear memory

Incoming proposals: Garbage collector And exception handling

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

AssemblyScript Writing WASM without learning a new language

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

Ahead of Time compiled TypeScript More predictable performance

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

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

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

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

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

The 3 minutes context What the heck are web component?

Web Components Web standard W3C

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

Web Components Create your own HTML tags Encapsulating look and behavior

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

Web Components CUSTOM ELEMENTS SHADOW DOM TEMPLATES

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

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>

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);

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

You can do step 06 and 07 now

That’s all, folks! Thank you all!