Slide 1
Slide 1 text
WebAssembly :
a new virtual machine for the Web
Mozilla Japan
N. Shimizu ([email protected])
Emscripten Night!! @ DRECOM Cafe 2016/10/05
Slide 2
Slide 2 text
IUUQTHJUIVCDPN8FC"TTFNCMZEFTJHOJTTVFT
IUUQTHJUIVCDPN'PHBDDJP0QFO%FTJHO
Slide 3
Slide 3 text
Bytes
asm.js
String
AST
Parsing Validation
Decode
Bytes
WASM MIR
Execut
able
Validation
Emission Compile
asm.js is translated as WASM in its compilation pipeline (in SpiderMonkey)
Slide 4
Slide 4 text
N. Shimizu / @chikoski
• Mozilla Japan
• Developer relation
• Localizer: MDN, SUMO, Firefox for iOS
• html5j Web platform / html5j Game
• Programming language enthusiast
• https://speakerdeck.com/chikoski/
• https://html5experts.jp/chikoski/
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Proudly non-profit, Mozilla makes products
like Firefox with a mission to keep the power
of the Web in the hands of users everywhere.
Mozilla Mission (https://www.mozilla.org/en-US/mission/)
Slide 9
Slide 9 text
Our mission is to promote openness,
innovation & opportunity on the Web.
Mozilla Mission(https://www.mozilla.org/en-US/mission/)
Slide 10
Slide 10 text
https://www.w3.org/community/webassembly/
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
.P[JMMB
.JDSPTPGU
(PPHMF
"QQMF
Slide 13
Slide 13 text
https://www.w3.org/community/webassembly/
Slide 14
Slide 14 text
+BWB4DSJQU7JSUVBM.BDIJOF
KT
8"4.7JSUVBM.BDIJOF
XBTN
Slide 15
Slide 15 text
Live demo: https://webassembly.github.io/demo/ (Firefox Nightly required)
Slide 16
Slide 16 text
String Executable
AST
Tokens IR
Lexical analysis Parsing Semantic Analysis
Optimization
code generation
Source code compilation (in general)
Slide 17
Slide 17 text
Parsing Download Compile Run
WASM
Parsing
Download Compile Run
asm.js
Parsing
Download Compile
Run
JS
Slide 18
Slide 18 text
asm.js
• An extraordinarily optimizable, "low-level" subset of JavaScript
• Numerical operations
• Heap access using Array Buffer as linear memory space
• Module system (import / export functions)
• Type annotation and its formal validation
• Foreign function interface (FFI) to JavaScript
Slide 19
Slide 19 text
function Peano(stdlib, ffi, heap){
"use asm";
function zero(){ return 0; }
function succ(a){
a = a | 0;
return (a + 1) | 0;
}
return {zero: zero, succ: succ};
}
asm.js module
Slide 20
Slide 20 text
function Peano(stdlib, ffi, heap){
"use asm";
function zero(){ return 0; }
function succ(a){
a = a | 0;
return (a + 1) | 0;
}
return {zero: zero, succ: succ};
}
Type annotations in asm.js
Slide 21
Slide 21 text
function someModule(stdlib, ffi, heap){
var memo = new stdlib.Uint32Array(heap);
// snip
function f(n){
if(memo[n >> 2] | 0 != 0){
return memo[n >> 2] | 0;
}
memo[n >> 2] = doSometing(n) | 0;
}
Heap access in asm.js
Slide 22
Slide 22 text
function Peano(){
use "asm";
// snip
return {zero: zero, succ: succ};
}
const module = Peano();
const zero = module.zero();
const one = module.succ(zero);
asm.js module in JS
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
% emsdk activate latest
% source ${where emsdk installed}/emsdk_env.sh
% emcc -o helloworld.js helloworld.c
% node helloworld.js
Hello world!
% emcc -o index.html helloworld.c
HTML / JS file generation from C / C++ code
Slide 25
Slide 25 text
// call a C function defined as: int add(int a, int b);
const add = Module.cwrap("add", "number", ["number, "number"]);
const two = add(1, 1);
const three = Module.ccall("add", "number", ["number", "number"], [1, 2]);
Emscripten translated function call in JS
Slide 26
Slide 26 text
Emscripten bridges the gap between Web and C/C++
• Standard C / C++ libraries
• POSIX file system API
• MemoryFS / IndexedDB FS / Special file JS emulation
• Statically linked libraries
• Inline JavaScript
• asm.js function export / Object mapping with WebIDL
Slide 27
Slide 27 text
WebAssembly
• New web standard discussed in W3C community group
• Size and load efficient and portable binary format
• Safe and Near-native speed execution
• Designed to execute within web browsers as well as non-
browser embedding
• Text representation (we can "view source" of WASMs)
Slide 28
Slide 28 text
App
no compression with gzip compression
asm.js WASM asm.js WASM
Hello World 301KiB 204KiB 71KiB 26KiB
AngryBots 19MiB 6 MiB 4.1 MiB 3.0 MiB
StandardAssets 25.7MiB 13.4 MiB 5.5 MiB 4.3 MiB
UnityChan-CRS 21.3MiB 11.4 MiB 4.7 MiB 3.7 MiB
Size efficiency: asm.js vs WASM
Slide 29
Slide 29 text
WASM's most viable products (MVP)
• Module : distributable, loadable and executable unit of code
• Behaviors specified in terms of AST (abstract syntax tree)
• Linear memory model
• Binary format and its equivalent text format
• Designed to be implemented both by web browsers and
completely difference execution environments
Slide 30
Slide 30 text
(a = (1 + (1 * 2)));
a = 1 + 1 * 2;
Slide 31
Slide 31 text
i32.mul
i32.add
set_local
$a
1
i32.const
1
i32.const
2
i32.const
AST in WASM
Slide 32
Slide 32 text
i32.mul
i32.add
set_local
$a
1
i32.const
1
i32.const
2
i32.const
(set_local $a
(i32.add
(i32.const 1)
(i32.mul
(i32.const 1)
(i32.const 2))))
WAST: Text representation of WASM (in development)
Slide 33
Slide 33 text
i32.mul
i32.add
set_local
$a
1
i32.const
1
i32.const
2
i32.const
Typed stack machine
1
2 3
4
5
6
Slide 34
Slide 34 text
Type name Acceptable values
i32 32bit integer
i64 64bit integer
f32 32bit floating point
f64 64bit floating point
Types in WASM
Slide 35
Slide 35 text
ptr = malloc(100)
0
address_space_max
(< 4GB)
100 byte
i32.load
i32.store
WASM memory model: linear memory
Slide 36
Slide 36 text
Operator Semantics
i32.load8_s load 1 byte and extend it to signed i32
i32.load8_u load 1 byte and extend it to unsigned i32
i32.load16_s load 2 bytes and extend it to signed i32
i32.load16_u load 2 bytes and extend it to unsigned i32
i32.load load 4bytes
i32 load operators
Slide 37
Slide 37 text
Operator Semantics
i32.store8 Store i32 value as i8
i32.store16 Store i32 value as i16
i32.store Store i32 value
i32 store operators
Slide 38
Slide 38 text
0QFSBUPS 4FNBOUJDT
grow_memory Grow memory size by given pages
current_memory Return current memory size
Memory page operators (1page = 64 KiB)
Slide 39
Slide 39 text
Binary encoding
• 8bit bytes / byte memory granularity / Little endian
• 3 layers of compression: binary encoding / structural
compression / compression with generic algorithm (e.g. gzip)
• Preamble & sections
• Preamble: magic & version number
• Section: Import / export declaration, function signature list,
set of function bodies, etc
Slide 40
Slide 40 text
fetch("add.wasm").then(response =>
response.arrayBuffer();
).then(buffer => {
const codeByte = new UInt8Array(buffer);
const module = Wasm.instantiateModlue(codeByte);
alert(`1 + 2 = ${module.exports.add(1, 2)}`);
});
WASM module instantiation
Slide 41
Slide 41 text
Road map
Soon after MVP
• Threads
• Shared memory
• Dynamic Linking
• zero-cost exceptions
• fixed-width SIMDSoon after
MVP
Future versions
• Finer-grained memory
control
• Large page support
• More expressive control flow
• GC / DOM integration
• Linear memory > 4G
• etc
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
IUUQTXXXPQFOXFCHBNFTDPN
Slide 44
Slide 44 text
No content