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

@bmihaylov | Codemotion Milan 2015 4

19961995

Microsoft releases JScript in IE3

Becoming a standard

@bmihaylov | Codemotion Milan 2015 5

The first edition of ECMA-262 is released

199719961995

photo: engineering.wix.com

2007-2008199719961995

@bmihaylov | Codemotion Milan 2015 7

The jQuery era

JavaScript goes server-side

@bmihaylov | Codemotion Milan 2015 8

JavaScript conquers the world

@bmihaylov | Codemotion Milan 2015 9

JavaScript

source: github.com

Module counts

@bmihaylov | Codemotion Milan 2015 10

source: www.modulecounts.com

Mobile apps

@bmihaylov | Codemotion Milan 2015 11

JavaScript is everywhere, but…

@bmihaylov | Codemotion Milan 2015 12

We are compiling to JavaScript

@bmihaylov | Codemotion Milan 2015 13

JavaScript

C# (Script#)

Java (GWT)

TypeScript

CoffeeScript

C/C++

@bmihaylov | Codemotion Milan 2015 14

C/C++ emscripten

.js

.js + .html

Node.js

Web Browser

Hello, world

@bmihaylov | Codemotion Milan 2015 15

#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

@bmihaylov | Codemotion Milan 2015 17

asm.js examples

@bmihaylov | Codemotion Milan 2015 18

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

@bmihaylov | Codemotion Milan 2015 19

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?

@bmihaylov | Codemotion Milan 2015 22

Improvement to JavaScript and the browser

A new language

Short name is wasm

Compilation target from other languages

Collaborative effort

@bmihaylov | Codemotion Milan 2015 23

+many others…

WebAssembly

WebAssembly is not bytecode

@bmihaylov | Codemotion Milan 2015 24

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

@bmihaylov | Codemotion Milan 2015 25

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

@bmihaylov | Codemotion Milan 2015 27

(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

@bmihaylov | Codemotion Milan 2015 28

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

@bmihaylov | Codemotion Milan 2015 31

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

@bmihaylov | Codemotion Milan 2015 33

WebAssembly JavaScript

Bytecode

Machine code

WebAssembly and JavaScript

@bmihaylov | Codemotion Milan 2015 34

WebAssembly JavaScript

Games,video & image decoders, etc.

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

The future of WebAssembly

@bmihaylov | Codemotion Milan 2015 35

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)

@bmihaylov | Codemotion Milan 2015 36

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

Eric Elliott

“”

photo: www.adafruit.com

@bmihaylov | Codemotion Milan 2015 37

We think Swift should be everywhere and used by everyone.

Craig FederighiApple’s WWDC 2015

“”

@bmihaylov | Codemotion Milan 2015 38

39

Grazie, Milano!

hey@boyan.in

@bmihaylov

After party

@bmihaylov | Codemotion Milan 2015