boyan mihaylov - is web assembly the killer of javascript
TRANSCRIPT
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