voxxed days thessaloniki 2016 - web assembly : the browser vm we were waiting for

WebAssembly:the browser VM we were

waiting forBoyan Mihaylov

@bmihaylov

Birth of JavaScript

@bmihaylov | Voxxed Days Thessaloniki 2016 2

1995

Created by Brendan Eichin 10 days and released

in Netscape Navigator 2.0

Microsoft hits back


19961995

Microsoft releases JScript in IE3

Becoming a standard


The first edition of ECMA-262 is released

199719961995

photo: engineering.wix.com

2007-2008199719961995

6@bmihaylov | Voxxed Days Thessaloniki 2016


The jQuery era

JavaScript goes server-side


Mobile apps


JavaScript conquers the world

@bmihaylov | Voxxed Days Thessaloniki 2016 10source: https://www.codementor.io/learn-programming/beginner-programming-language-job-salary-community

102.3K

280.4K

431.7K

444.4K

512.1K

791.9K

953.9K

962.4K

1,699.7K

1,964.5K

Swift

Objective-C

C#

C

C++

PHP

Python

Ruby

Java

JavaScript

Total GitHub Projects(as of February 2016)

20.9K

31.6K

50.5K

67.7K

90.3K

112.0K

117.9K

125.1K

191.9K

200.1K

Swift

Ruby

SQL

C

C++

Python

C#

PHP

Java

JavaScript

StackOverflow Tag Followers(as of February 2016)


The new Web

We compile to JavaScript


New compilation source


Issues with JavaScript

Just-In-Time compilation

Types are inferred on runtime

Variables can change types

Automated garbage collection


Meet asm.js


Started by Mozilla in 2013

It defines a subset of JavaScript

Avoids potential slowdowns in codee.g., no variables with mixed type

It does only low-level assembly-like computationexactly what compiled C/C++ needs


C/C++ Emscripten

.js

.js + .html

Node.js

Web Browser

Hello, world


…

function _main() {

var $0 = 0, $vararg_buffer = 0, label = 0, sp = 0;

sp = STACKTOP;

STACKTOP = STACKTOP + 16|0;

if ((STACKTOP|0) >= (STACK_MAX|0))

abort();

$vararg_buffer = sp; $0 = 0;

(_printf(672,$vararg_buffer)|0);

STACKTOP = sp;

return 0;

}

…

#include<stdio.h>

int main() {

printf(“Hello, Thessaloniki“);;

return 0;

}

C program (1KB) asm.js output (479KB)

asm.js example

@bmihaylov | Codemotion Milan 2015 18

asm.js module definition Usage in JavaScript

function CircleModule(stdlib, foreign, heap) {

"use asm";

var pi = +stdlib.Math.PI;

function area(r) {

r = r | 0;

return +(pi * r * r);

}

return { area: area };

}

// create and initialize the heap (64k)

var heap = new ArrayBuffer(0x10000);

init(heap, START, END);

// produce exports object,

// linked to AOT-compiled code

var circle = CircleModule(window, null, heap);

// calculate the area of a circle

circle.area(31);

Mozilla and Epic ported Unreal Engine 3 to the Web in 4 days

https://www.youtube.com/watch?v=XsyogXtyU9o@bmihaylov | Voxxed Days Thessaloniki 2016 20

How compilers work


Source program

Intermediate Representation

Assembly or machine

code

Frontend Backend

Static analysisSemantic analysis

Code generationCode optimization

asm.js compilation pipeline


C/C++ Fastcode(LLVM backend)Clang JavaScript

engine

LLVM bitcode asm.js

Emscripten

Compiled JavaScript code can be faster than handwritten JavaScript


Performance


0 2 4 6 8 10 12 14 16 18 20

bullet

zlib

skinning

Firefox Chrome Firefox+asm.js Native

source: http://kripken.github.io/mloc_emscripten_talk/#/28

аsm.js +++


Not a new language

Code is a subset of JavaScriptso it already runs in all browsers, if special support is missing

Code runs 2X slower than nativecomparable to C# and Java

аsm.js ---


The parser becomes the bottleneckonce VMs optimize for it

We may want to do some different thingsthan what JavaScript allows us to do today

It is backed-up only by Mozillaso far

WebAssembly = asm.js done right


Collaborative effort


+many others…

WebAssembly

What is WebAssembly


A new languageshort name is wasm

Improvement to JavaScriptand the browser

Compilation target from other languages

Modular structureIntegrates with ES6 modules

Abstract syntax tree


WebAssembly describes an ASTe.g., it supports branches and loops

It is possible to produce it directlyor compile it from another language

Binary & textual representation

Textual representation


Main purpose is human consumption

No official text representation yetmost examples use s-expressions

Used in browser developer toolswhen no source maps exist

Example textual representation


asm.js module s-expressions format

function () {

"use asm";

function add(x, y) {

x = x | 0;

y = y | 0;

return x + y | 0;

}

return { add: add };

}

(module

(export $add “add” $add)

(func $add (param $x i32) (param $y i32) (result i32)

(i32.add

(get_local $x)

(get_local $y)

)

)

)

Binary representation


Reduction in payload sizeabout 20-30% smaller than the textual representation

Faster than parsing textabout 23x faster in the tests

Allows many optimization for the codeboth size and decoding speed

The main format used by the browsers

How to use WebAssembly


1. Write code in any languagethat can be compiled to WebAssembly

2. Compile the code

3. Load the output in the browser

Compiling to WebAssembly


Browser???C/C++ Fastcode(LLVM backend)Clang

LLVM bitcode asm.js

Emscripten

WebAssembly

Meet Binaryen


Compiler and toolchain infrastructure library for WebAssembly

Parse & emit WebAssembly

Represent & process WebAssembly

Interpret WebAssembly

Binaryen


WebAssembly is a binary format and we integrate it with Emscripten -> hence the name

Pronounced as bi-NAIR-ee-in

Rhymes with TargaryenGame of Thrones

What comes with Binaryen


The Binary shellIt can load a WebAssembly module, transform it, execute it in an interpreter, etc.

asm2wasm / wasm2asmCompiles asm.js to WebAssembly and vice versa

s2wasmCompiles .s files, in the format of the new LLVM backend, to WebAssembly

wasm.jsA port of Binaryen itself to JavaScript

Compiling to WebAssembly


Browser

Binaryen

WebAssembly

C/C++ Fastcode(LLVM backend)Clang

LLVM bitcode asm.js

Emscripten

asm2wasm

New experimental LLVM backend


Browser

Binaryen

WebAssembly

C/C++ WebAssemblyLLVM backendClang

LLVM bitcode .s file

Emscripten

s2wasm

Compile from other languages


C/C++ Browser

WebAssembly

X Emscripten

Y

LLVM bitcode

WebAssembly is not bytecode


Bytecode is linear and stack-, register-, or SSA-based

WebAssembly is binary representation of an AST

WebAssembly is not versionedIt follows the same evolution cycle as JavaScript

WebAssembly will probably lead to universal VM

photo: frameitall.com

WebAssembly is sandboxed


WebAssembly vs. asm.js


Better load timesBinary format is much faster to parse than the textual representation of asm.js

Full threading support

SIMDSingle Instruction, Multiple Data

Integrated garbage collection

WebAssembly vs. asm.js

19

6.34.1

3

asm.js WebAssembly

Angry Bots demo size

MBsMBs (compressed)

http://beta.unity3d.com/jonas/AngryBots/


WebAssembly today


What’s next


Define the official text representation

Further reduction in binary format size

Updates on the WebAssembly JavaScript API

Better documentationfor compiler writers, tool authors, hackers, and students

photo: panoramio.com

JavaScript will surviveat least for new


WebAssembly and JavaScript


WebAssembly JavaScript

Games,video & image decoders, etc.

External libraries(e.g., C/C++)


WebAssembly fills in the gaps that would be awkward to fill with JavaScript.

Eric Elliott

“”

photo: www.adafruit.com


We think Swift should be everywhere and used by everyone.

Craig FederighiApple’s WWDC 2015

“”

54

Σας ευχαριστώ,Θεσσαλονίκη

[email protected]

@bmihaylov

After party

@bmihaylov | Voxxed Days Thessaloniki 2016

voxxed days thessaloniki 2016 - web assembly : the browser vm we were waiting for

Software