Hands-on WebAssembly Horacio Gonzalez 2021-06-24
A presentation at SophiaConf in June 2021 in Sophia Antipolis, France by Horacio Gonzalez
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!
