hi

Hellooo FOSDEM!

Last updated: 2019-02-02

Flaki, tinkering

Szmozsánszky István "Flaki"
@slsoftworks

Mozilla DevRel

Developer Outreach / DevRel

Mozilla TechSpeakers

Mozilla TechSpeakers

Tessel

Tessel Project, JS+HW hacker

Speed without Shenanigans

István Szmozsánszky "Flaki"
@slsoftworks

[]()
Browsers

…a.k.a. WebAssembly & Compile-to-JavaScript’s Rise to Fame

Our story starts around the JS-engine perf wars…

Our story starts around 2012. Several years into the JavaScript engine performance arms race kickstarted by V8’s release in 2008 just-in-time compilation and careful optimizations have resulted in an explosive speed-up in JS execution speeds.

The rise of Compile to JS

Around this time various experiments appeared, exploring direct compilation of code from typed, lower-level languages to a subset of JavaScript and ditching garbage collection for linear memory (in hopes for high-speed execution in the browser).

Emscripten & asm.js


Although Emscripten & the asm.js format wasn’t the first attempts at this, they ended up being the one proving beyond doubt that the idea of "compiling large, pre-existing codebases to JavaScript" and running them in the browser’s JS VM is not only feasible, but desirable on today's web.

Around this time many parties got fairly excited about "compiling to JavaScript", but one in particular has jumped on the bandwagon early on, and remain a key supporter of the compile-to-js ecosystem:

The gaming industry

The gaming industry.

Today the web is the biggest app dev platform

Easy to see why! The web has become the most popular application-development platform (one of the most widely used and accessible ones), and is rapidly gaining new capabilities to cater for the sudden rise in expectations. Games happened to be a pretty good proxy for the vast "high-quality multimedia applications" space — high-performance apps with heavy use of graphics-, audio- & computation resources, networking and interactivity.

…and the largest open distribution platform


Moreover, the web is also one of the most open distribution platforms — and in the day-and-age of stores, walled gardens and a choice of few giant gatekeepers it's only natural game developers are longing for a more open distribution method that's secure, low-cost and wide-reaching.

Many ways the same—but also very different


Seeded by the idea of repurposing the existing optimizing JavaScript VM in browsers with the feasibility of reusing pre-existing low-level (C/C++) codebases the web platform started exploring new frontiers.

Tools like Emscripten and the standardization of asm.js made it possible to compile low-level languages to a subset of JavaScript to be executed with high speeds by the JS VM. This kickstarted a whole new ecosystem of compile-to-JS libraries, tooling & applications, and eventually paved the way for an incremental update building on these foundations and incorporating ideas from other efforts (like (P)NaCL) in the field:

WebAssembly was born.

   A joint effort
work-in-progress

That's all it is, really, carefully engineered evolution (rather than revolution), aligning stakeholders and browser vendors along a common goal and moving them in lockstep brought us today's WebAssembly "MVP": a platform-independent VM specification with a "minimal but useful" instruction set coupled with a binary transmission format.

  • An efficient stack machine
  • Binary representation + text format
  • Open & debuggable
  • A complement to the web—not a competitor


Ditching the makeshift JS form compresses the code over the wire & improves loading speeds (in Firefox WASM is compiled faster than it comes through the wire!), while WASM code itself supports an initial limited set of numeric types and is executed by the browser with similar safety guarantees as JavaScript (usually running inside the same VM as JS).

Some of these limitations are due to the MVP-nature of the current specification, but some are intentional — WASM is built to communicate extensively with other parts of the browser/JS APIs, and to extend, rather than replace its existing functionalities.

Compiling to JavaScript has seen many interesting usecases: from the noble cause of archival & emulation of vintage computer games, to entire operating systems and processor architectures being transposed onto an HTML5 canvas.

Funnily enough, WASM is not built solely for the browser: giving the spec a quick skim will reveal its rather platform-agnostic nature), and the some of the demos popping up can bring back fond memories of Gary Bernhardt's musings on the implications of sophisticated compile-to-JavaScript tooling.

Nebulet

In short, Nebulet is an operating system that runs WebAssembly.

Under the hood, Nebulet is a microkernel that executes WebAssembly modules in ring 0 and a single address space to increase performance.


Like, there is now an experiment, titled Nebulet, which is an attempt to create a prototype WebAssembly kernel, running exclusively WebAssembly applications.

The WebAssembly MVP is a fair bit more down-to-Earth in its approach, yet it still brings a crucial, deeply missed tool to the web platform…

Lower-level abstractions for performance & control are not new

When we take a look at any number of programming languages, dropping to a lower level of abstraction when performance or access to system resources require it is a mainstream practice: high-level languages like Ruby, Python, even Node.js achieve this via platform-specific binary modules; even low-level languages like C/C++ allow for inline assembly when performance & precise control becomes a priority. What WebAssembly brings today is this exact capability to the entire Web Platform — without the drawbacks like platform-dependence, but also with the added choice of virtually any programming language (with big asterisks on "any", at least today).

A potential fix…

In fact WebAssembly might be first in line for solving some of these platforms’ binary-module-specific woes.

Saving millions of dollars in production with WebAssembly

And although it's early days still, there are already some remarkable success stories being told! Fortune 500 companies saving millions of dollars in server costs by offloading expensive computation to the client…

…or replacing parts of your browser with it

…or improving source map parsing speed tenfold in Firefox’s Developer Tools by surgically replacing performance-sensitive parts of its JavaScript-heavy Debugger with tailor-made WebAssembly solutions. Yes, that's JavaScript and WebAssembly powering parts of a production web browser on hundreds of millions of computers all across the world!

The lurking secret sauce: Rust

These two examples are also interesting for they both used Rust for implementing the source of the WASM logic. Rust is a safe & performant low-level programming language used in later versions of Firefox extensively, and booming in popularity across the industry. It also has out-of-the box (and improving) first-class support for WebAssembly as a compile target.

⚡
Speed Without Wizardry

Nick Fitzgerald, one of the engineers behind Firefox’s new Rust-WebAssembly source map parser blogged extensively about the process. In the conversations unfolding around its release he highlighted how Rust's excellent ergonomics, safety guarantees & out-of-the box WASM support work together to empower anyone in achieving Blazing Speeds without the Wizardry—without the arcane incantations and weirdly specific knowledge of knowing JS & JIT-internals. I link to the articles in the "Reading List" section of the slides, they are a very rewarding read, even with no particular Rust experience.

Expanding what's possible today in the browser

Reflecting on Rust & WASM in 2018



The not-so-secret purpose of this talk is to whet your appetite to know more about this exciting feature of the web platform.

Some of the points I made would have deserved their own talks (which I'll probably need to cater for at some point, at least in the form of a blogpost), but if you are interested in any of them in more detail, be sure to find me after the talk or reach out to me on Twitter (@slsoftworks) or any of my other contacts at flak.is.

Thanks!

talk.flak.is/wasm/fosdem-2019

Mozilla Hacks @mozhacks

Flaki @slsoftworks

Keep on Assemblin'!

Reading list: