WebAssembly for Developers (web… or not)

WebAssembly for Developers (web… or not) Horacio Gonzalez @LostInBrittany

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

Did I 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 think I need a real example 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…)

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 this?

Tapping into other languages ecosystems Don’t rewrite libs anymore

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

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 JavaScrip 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

Future To the infinity and beyond!

WebAssembly Threads Threads on Web Workers with shared linear memory

SIMD

Garbage collector And exception handling