This document discusses the rise of JavaScript and introduces WebAssembly as a new technology that may impact JavaScript. It summarizes JavaScript's history from its creation in 1995 to its widespread use today. It then introduces WebAssembly as a new low-level compilation target that is faster than JavaScript and can be used to compile code from C/C++. WebAssembly is positioned as a complement to JavaScript rather than a replacement, with each having advantages for different types of applications.

1. Is WebAssembly the
killer of JavaScript?
Boyan Mihaylov
@bmihaylov
Codemotion Milan 2015

2. Birth of JavaScript
@bmihaylov | Codemotion Milan 2015 2
1995
Created by Brendan Eich
in 10 days and released
in Netscape Navigator 2.0

4. Microsoft hits back
@bmihaylov | Codemotion Milan 2015 4
19961995
Microsoft releases
JScript in IE3

5. Becoming a standard
@bmihaylov | Codemotion Milan 2015 5
The first edition of
ECMA-262 is released
199719961995

6. photo: engineering.wix.com
2007-2008199719961995

7. @bmihaylov | Codemotion Milan 2015 7
The jQuery era

8. JavaScript goes server-side
@bmihaylov | Codemotion Milan 2015 8

9. JavaScript conquers the world
@bmihaylov | Codemotion Milan 2015 9
JavaScript
source: github.com

10. Module counts
@bmihaylov | Codemotion Milan 2015 10
source: www.modulecounts.com

11. Mobile apps
@bmihaylov | Codemotion Milan 2015 11

12. JavaScript is everywhere, but…
@bmihaylov | Codemotion Milan 2015 12

13. We are compiling to JavaScript
@bmihaylov | Codemotion Milan 2015 13
JavaScript
C# (Script#)
Java (GWT)
TypeScript
CoffeeScript
C/C++

14. @bmihaylov | Codemotion Milan 2015 14
C/C++ emscripten
.js
.js + .html
Node.js
Web Browser

15. 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

16. Mozilla and Epic ported Unreal Engine 3 to the Web in 4 days
https://www.youtube.com/watch?v=XsyogXtyU9o

17. 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

18. 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-compiledcode
var circle = Circle(window, null, heap);
// calculatethe area of a circle
circle.area(31);

19. 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 Native
source: http://kripken.github.io/mloc_emscripten_talk/#/28

20. 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)

21. WebAssembly
photo: www.onyxtruth.com

22. 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

23. Collaborative effort
@bmihaylov | Codemotion Milan 2015 23
+
many others…
WebAssembly

24. 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

25. Abstract syntax tree
@bmihaylov | Codemotion Milan 2015 25

26. 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

27. A possible syntax
@bmihaylov | Codemotion Milan 2015 27
(module
(memory1024 (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)))
)

28. 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

29. WebAssembly is sandboxed
photo: thenextweb.com

30. asm.js vs WebAssembly
19
6.3
4.1
3
asm.js WebAssembly
Angry Bots demo
MBs
MBs (compressed)
http://beta.unity3d.com/jonas/AngryBots/

31. 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

32. JavaScript will survive
photo: deviantart.net

33. WebAssembly is a new feature
@bmihaylov | Codemotion Milan 2015 33
WebAssembly JavaScript
Bytecode
Machine code

34. WebAssembly and JavaScript
@bmihaylov | Codemotion Milan 2015 34
WebAssembly JavaScript
Games,
video & image
decoders, etc.
External libraries
(f.x., C/C++)

35. 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)

36. @bmihaylov | Codemotion Milan 2015 36
WebAssembly fills in the gaps that would
be awkward to fill with JavaScript.
Eric Elliott
“
”
photo: www.adafruit.com

37. @bmihaylov | Codemotion Milan 2015 37
We think Swift should be everywhere and
used by everyone.
Craig Federighi
Apple’sWWDC 2015
“
”

38. @bmihaylov | Codemotion Milan 2015 38

39. 39
Grazie, Milano!
hey@boyan.in
@bmihaylov
After party
@bmihaylov | Codemotion Milan 2015