Hands on WebAssembly
Horacio Gonzalez @LostInBrittany 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
200k Private cloud VMs running
Dedicated IaaS 1 Europe 30 Datacenters
Own 20Tbps Netwok with Hosting capacity : 35 PoPs 1.3M Physical Servers
360k Servers already > 1.3M Customers in 138 Countries deployed OVHcloud: Our solutions
Mobile Web Cloud Hosting Hosting Telecom
VPS Containers▪ Dedicated Server Domain names VoIP Public Cloud Compute▪ Data Storage Email SMS/Fax
Private Cloud Database▪ Network and CDN Virtual desktop Security Serveur dédié Object Storage Web hosting Cloud Storage ▪ Licences Cloud Desktop Securities MS Office Over the Box Hybrid Cloud Messaging MS solutions 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 we say WebAssembly?
WASM for the friends... WebAssembly, what's that?
Let's try to answer those (and other) questions... A low-level binary format for the web
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! With several key advantages But above all...
WebAssembly 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 Wait, dude! What's LLVM?
A set of compiler and toolchain technologies 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 Do you remember your 101 C course?
A simple HelloWorld in C We compile it with emscripten We get a .wasm file...
Binary file, in the binary WASM format We also get a .js file...
Wrapping the WASM And a .html file
To quickly execute in the browser our WASM 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 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
We instantiate the WASM by loading the wrapping JS 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! WASM outside the browser
Not only for web developers Run any code on any client… almost
Languages compiling to WASM Includes WAPM
The WebAssembly Package Manager 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 Communicating between JS and WASM
Shared memory, functions... 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! 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! Future
To the infinity and beyond! WebAssembly Threads
Threads on Web Workers with shared linear memory SIMD Garbage collector
And exception handling WASI
WebAssembly System Interface 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
...To encapsulate subtree and style in an element
Template
To have clonable document 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
Let's code, mates!