WebAssembly Codelab Stéphanie Moallic @steffy_29 Horacio Gonzalez @LostInBrittany
A presentation at DevFest Nantes in October 2019 in Nantes, France by Horacio Gonzalez
WebAssembly Codelab Stéphanie Moallic @steffy_29 Horacio Gonzalez @LostInBrittany
Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek Flutter
Stéphanie Moallic @steffy_29 Steffy29 “La dame du téléphone” - Quentin Adam Duchess Développeuse front Telecom chez OVHcloud Organisatrice d’évènements pour les développeurs et les enfants. Passionnée d’informatique mais pas que… Prédilection pour le développement front ainsi que les gadgets et autres jouets.
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
