boyan mihaylov - is web assembly the killer of javascript

Is WebAssembly the killer of JavaScript?

Boyan Mihaylov@bmihaylov

Codemotion Milan 2015

Birth of JavaScript

@bmihaylov | Codemotion Milan 2015 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


The jQuery era

JavaScript goes server-side


JavaScript conquers the world


JavaScript

source: github.com

Module counts


source: www.modulecounts.com

Mobile apps


JavaScript is everywhere, but…


We are compiling to JavaScript


JavaScript

C# (Script#)

Java (GWT)

TypeScript

CoffeeScript

C/C++


C/C++ emscripten

.js

.js + .html

Node.js

Web Browser

Hello, world


#include<stdio.h>

int main() {printf("Welcome to Codemotion");return 0;

}

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((8|0),($vararg_buffer|0))|0);STACKTOP = sp;return 0;

}

1 KB 372 KB

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

https://www.youtube.com/watch?v=XsyogXtyU9o

Meet asm.js

Started by Mozilla in 2013

A subset of JavaScript to compile very fast

We know the types, rather than infer them on runtime

Enables ahead-of-time (AOT) compilation


asm.js examples


function Circle(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 codevar circle = Circle(window, null, heap);

// calculate the area of a circlecircle.area(31);

Performance


0 2 4 6 8 10 12 14 16 18 20

bullet

zlib

skinning

Firefox Chrome Firefox+asm.js Nativesource: http://kripken.github.io/mloc_emscripten_talk/#/28

Issues with asm.js

@bmihaylov | Codemotion Milan 2015` 20

Once VMs optimize for it, the parser becomes the bottleneck

We may want to do some things different than JavaScript allows us

It is backed-up only by Mozilla (so far)

WebAssembly

photo: www.onyxtruth.com

What is WebAssembly?


Improvement to JavaScript and the browser

A new language

Short name is wasm

Compilation target from other languages

Collaborative effort


+many others…

WebAssembly

WebAssembly is not bytecode


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

WebAssembly is binary representation of an AST

WebAssembly is not versioned

WebAssembly will probably lead to universal VM

Abstract syntax tree


Text format vs. Binary encoding

View source of a WebAssembly module

Browser developer tools(when no source maps exist)

Browsers will NOT parse it

Serialized version of the text format

The main format used by browsers

Custom-tailored compression

A possible syntax


(module(memory 1024 (segment 0 "abcdefghijklmnopqrstuvwxyz"))(import $print "stdio" "print" (param i32))

(func $good (param $i i32)(call_import $print (i32.load8_u offset=0 (get_local $i))) :: 97 'a'(call_import $print (i32.load8_u offset=1 (get_local $i))) :: 98 'b'(call_import $print (i32.load8_u offset=2 (get_local $i))) :: 99 'c'(call_import $print (i32.load8_u offset=25 (get_local $i))) :: 122 'z‘

)(export "good" $good)

(assert_return (invoke "good" (i32.const 0))))

How to produce WebAssembly


Produce binary output programmatically

Write code manually using the textual representation

Compile it from another language

WebAssembly is sandboxed

photo: thenextweb.com

asm.js vs WebAssembly

19

6.34.1

3

asm.js WebAssembly

Angry Bots demo

MBsMBs (compressed)

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

WebAssembly today


Use emscripten to produce it

Stay as close as possible to asm.js

Uses a polyfill to run in the browser

Is in a prototype phase

JavaScript will survive

photo: deviantart.net

WebAssembly is a new feature


WebAssembly JavaScript

Bytecode

Machine code

WebAssembly and JavaScript


WebAssembly JavaScript

Games,video & image decoders, etc.

External libraries(f.x., C/C++)

The future of WebAssembly


Focus on compilation from C/C++

Debug WebAssembly via the source code used to produce it

Mainly low-level computations

Single Instruction, Multiple Data (SIMD)


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

“”

39

Grazie, Milano!

[email protected]

@bmihaylov

After party

@bmihaylov | Codemotion Milan 2015

boyan mihaylov - is web assembly the killer of javascript

Technology