Voxxed Days Thessaloniki 2016 - Web assembly : the browser vm we were waiting for

WebAssembly:
the browser VM we were
waiting for
Boyan Mihaylov
@bmihaylov

Birth of JavaScript
@bmihaylov | Voxxed Days Thessaloniki 2016 2
1995
Created by Brendan Eich
in 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
source: 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 code
e.g., no variables with mixed type
It does only low-level assembly-like computation
exactly 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

How compilers work
Source
program
Intermediate
Representation
Assembly or
machine
code
Frontend Backend
Static analysis
Semantic analysis
Code generation
Code 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 JavaScript
so it already runs in all browsers, if special support is missing
Code runs 2X slower than native
comparable to C# and Java

аsm.js ---
The parser becomes the bottleneck
once VMs optimize for it
We may want to do some different things
than what JavaScript allows us to do today
It is backed-up only by Mozilla
so far

WebAssembly = asm.js done right

Collaborative effort
+
many others…
WebAssembly

What is WebAssembly
A new language
short name is wasm
Improvement to JavaScript
and the browser
Compilation target from other languages
Modular structure
Integrates with ES6 modules

Abstract syntax tree
WebAssembly describes an AST
e.g., it supports branches and loops
It is possible to produce it directly
or compile it from another language
Binary & textual representation

Textual representation
Main purpose is human consumption
No official text representation yet
most examples use s-expressions
Used in browser developer tools
when 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 size
about 20-30% smaller than the textual representation
Faster than parsing text
about 23x faster in the tests
Allows many optimization for the code
both size and decoding speed
The main format used by the browsers

How to use WebAssembly
1. Write code in any language
that 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 Targaryen
Game of Thrones

What comes with Binaryen
The Binary shell
It can load a WebAssembly module, transform it, execute it in an interpreter, etc.
asm2wasm / wasm2asm
Compiles asm.js to WebAssembly and vice versa
s2wasm
Compiles .s files, in the format of the new LLVM backend, to WebAssembly
wasm.js
A 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++
WebAssembly
LLVM backend
Clang
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 versioned
It 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 times
Binary format is much faster to parse than the textual representation of asm.js
Full threading support
SIMD
Single Instruction, Multiple Data
Integrated garbage collection

WebAssembly vs. asm.js
19
6.3
4.1
3
asm.js WebAssembly
Angry Bots demo size
MBs
MBs (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 documentation
for compiler writers, tool authors, hackers, and students

photo: panoramio.com
JavaScript will survive
at 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 Federighi
Apple’s WWDC 2015
“
”

54
Σας ευχαριστώ,
Θεσσαλονίκη
hey@boyan.in
@bmihaylov
After party
@bmihaylov | Voxxed Days Thessaloniki 2016

Voxxed Days Thessaloniki 2016 - Web assembly : the browser vm we were waiting for

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Voxxed Days Thessaloniki 2016 - Web assembly : the browser vm we were waiting for

Similar a Voxxed Days Thessaloniki 2016 - Web assembly : the browser vm we were waiting for (20)

Más de Voxxed Days Thessaloniki

Más de Voxxed Days Thessaloniki (13)

Último

Último (20)

Voxxed Days Thessaloniki 2016 - Web assembly : the browser vm we were waiting for