14: Webassembly - JSToElm
All Episodes

14: Webassembly

Taking a look at webassembly. A new compilation that brings more than just JavaScript to the web,allowing memory managed apps like, C/C++ and Rust to be compiled down to assembly and run in the browser environment. This along side your current JavaScript code

Webassembly Overview

  • Disclaimer: webassembly does not currently support ‘Garbage Collected’(GC) compilations. This means it’s not yet viable for Elm. It will be, however, important to web development ecosystem as a whole, and thus very much worth our time and energy understanding it, and being ready to leverage it as soon as possible.

What is webassembly?

  • wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web.
  • Efficient and fast
  • Open and debuggable (pretty print)
  • Part of the open web platform
  • webassembly must currently be loaded and compiled by JavaScript.
  • General Purpose virtual architecture
  • Webassembly is NOT always faster than JavaScript
  • Pace…

Inter opt with JavaScript

  • For basic loading, there are

    • three steps:

    • Get the .wasm bytes into a typed array or ArrayBuffer

    • Compile the bytes into a WebAssembly.Module

    • Instantiate the WebAssembly.Module with imports to get the callable exports

Linear Memory

  • rather than js objects that will be GC (garbage collected later on)
  • used to represent the entire heap of a compiled C/C++ application.
  • can be considered to be an untyped array of bytes
  • it’s sandboxed
  • execution engine’s internal data structures, the execution stack, local variables, or other process memory.
  • In the MVP, linear memory cannot be shared between threads of execution. The addition of threads :unicorn: will allow this.
  • Memories can be created from JavaScript by supplying their initial size and, optionally, their maximum size: var memory = new WebAssembly.Memory({initial:10, maximum:100});
  • Memory imports work just like function imports, only Memory objects are passed as values instead of JS functions. Memory imports are useful for two reasons:

    1. They allow JavaScript to fetch and create the initial contents of memory before or concurrent with module compilation.
    2. They allow a single Memory object to be imported by multiple instances, which is a critical building block for implementing dynamic linking in WebAssembly.

Getting some wasm in the browser

cd ~
 wget https://s3.amazonaws.com/mozilla-games/emscripten/releases/emsdk-portable.tar.gz
 tar -xvf emsdk-portable.tar.gz
 cd emsdk-portable
 ./emsdk update
 ./emsdk install sdk-incoming-64bit
cargo new fsociety --bin --vcs none
cd fsociety
npm init -y
  • Yep, it took a while.

  • Just a bit more…


  • WebAssembly supports integers and floats, coming in 32- and 64-bit varieties.
  • translate JavaScript objects to/from their C/C++ equivalents will need a far bit of logic

    • think distinct modules
  • access to the WASM instance memory via JS ArrayBuffer. access from both sides of the fence
  • you don’t get access to system allocation commands like ‘malloc’ and ‘free,’
  • wasm is not always faster than js. there is no silver bullet




Published 23 Nov 2017

A show about learning Elm, Functional Programing, and generally leveling up as a JS developer.
JavaScript To Elm on Twitter