WebAssembly Demystified
Jay Phelps | @_jayphelps
Jay Phelps | @_jayphelps
We're on the brink of a revolution
Jay Phelps | @_jayphelps
WebAssembly will change the way we think of "web apps"
Senior Software Engineer |
@_jayphelps
Jay Phelps
Jay Phelps | @_jayphelps
So...what is WebAssembly? aka wasm
Jay Phelps | @_jayphelps
Efficient, low-level bytecode for the Web
Jay Phelps | @_jayphelps
Efficient, low-level bytecode for the Web
Jay Phelps | @_jayphelps
Fast to load and execute
Jay Phelps | @_jayphelps
Efficient, low-level bytecode for the Web
Jay Phelps | @_jayphelps
0x6a01101010
Jay Phelps | @_jayphelps
Intended (mostly) as a compilation target
intfactorial(intn){if(n==0){return1;}else{returnn*factorial(n-1);}}
intfactorial(intn){if(n==0){return1;}else{returnn*factorial(n-1);}}
0061736D010000000186808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B200041016B100020006C0B
Jay Phelps | @_jayphelps
Safe and portable just like JavaScript
Jay Phelps | @_jayphelps
“shortcut to your JavaScript engine's optimizer” Ben Smith, Chrome team
Jay Phelps | @_jayphelps
Is it going to kill JavaScript?
Jay Phelps | @_jayphelps
Nope!says browser vendors
*
Jay Phelps | @_jayphelps
*well...maybe...some day...a really long time from now(my own opinion)
Jay Phelps | @_jayphelps
Will we compile JavaScript to WebAssembly?
Jay Phelps | @_jayphelps
JavaScript is an extremely dynamic language
Jay Phelps | @_jayphelps
Compiling JavaScript to WebAssembly would almost certainly run slower
Jay Phelps | @_jayphelps
WebAssembly is still missing things
Jay Phelps | @_jayphelps
v1 MVP is best suited for languages like C/C++ and Rust
Jay Phelps | @_jayphelps
But other languages soon!
Jay Phelps | @_jayphelps
TurboScript
Jay Phelps | @_jayphelps
classCoordinates{x:float32;y:float32;z:float32;
constructor(x:float32,y:float32,z:float32):Vect3{this.x=x;this.y=y;this.z=z;}}
exportfunctionexample(){letposition=newCoordinates(x,y,z);//laterdeleteposition;}
Jay Phelps | @_jayphelps
When should I target WebAssembly?
Jay Phelps | @_jayphelps
Heavily CPU-bound number computations
Jay Phelps | @_jayphelps
Games
https://s3.amazonaws.com/mozilla-games/tmp/2017-02-21-SunTemple/SunTemple.html
Jay Phelps | @_jayphelps
Other use cases coming sooner than you might think!
Jay Phelps | @_jayphelps
You'll likely consume compiled WebAssembly binaries even sooner
Jay Phelps | @_jayphelps
What was that binary stuff?
intfactorial(intn){if(n==0){return1;}else{returnn*factorial(n-1);}}
0061736D010000000186808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B200041016B100020006C0B
0061736D010000000186808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B200041016B100020006C0B
0061736D010000000186808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B200041016B100020006C0B
0061736D010000000186808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B200041016B100020006C0B
86808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B20004101
86808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B20004101
Jay Phelps | @_jayphelps
Binary can be "a little" intimidating
Jay Phelps | @_jayphelps
Protip: don't worry about it(unless of course, you want to)
Jay Phelps | @_jayphelps
Textual representation to the rescue!
Jay Phelps | @_jayphelps
(func$factorial(param$ni32)(resulti32)get_local$ni32.const0i32.eqif$if0i32.const1returnend$if0get_local$ni32.const1i32.subcall$factorialget_local$ni32.mul)
Jay Phelps | @_jayphelps
(func$factorial(param$ni32)(resulti32)get_local$ni32.const0i32.eqif$if0i32.const1returnend$if0get_local$ni32.const1i32.subcall$factorialget_local$ni32.mul)
Jay Phelps | @_jayphelps
Let's learn the fundamentals
Jay Phelps | @_jayphelps
WebAssembly is a stack machine language
Jay Phelps | @_jayphelps
...what's a stack machine?
Jay Phelps | @_jayphelps
a data structure with two operations:
push and pop
Stack
item
stack
push
item
item
stack
item
item
item
stack
item
item
item
stack
pop
item
stack
item
stack
item
Jay Phelps | @_jayphelps
last in, first out order (LIFO)
Jay Phelps | @_jayphelps
stack machine: instructions on a stack
1+2
i32.add 0x6a
opcode mnemonics
01101010
i32.const1i32.const2i32.add
i32.const1i32.const2i32.add
i32.const1
i32.const1i32.const2i32.addi32.const2
i32.const1i32.const2i32.addi32.add
stack
i32.const1i32.const2i32.add
i32.const1i32.const2i32.add
i32.const1
stack
1
i32.const1i32.const2i32.addi32.const2
stack
2
1
i32.const1i32.const2i32.addi32.add
stack
1
2
i32.const1i32.const2i32.addi32.add
stack
3
i32.const1i32.const2i32.add
Jay Phelps | @_jayphelps
i32.const1i32.const2i32.addcall$log
Jay Phelps | @_jayphelps
Jay Phelps | @_jayphelps
Compilers usually apply optimizationsreal-world output is often less understandable to humans
i32.const1i32.const2i32.addcall$log
Jay Phelps | @_jayphelps
i32.const3call$log
Jay Phelps | @_jayphelps
Jay Phelps | @_jayphelps
Most tooling supports an Abstract Syntax Tree (AST)still compiled and evaluated as a stack machine
i32.const1i32.const2i32.addcall$log
Jay Phelps | @_jayphelps
(call$log(i32.add(i32.const1)(i32.const2)))
Jay Phelps | @_jayphelps
(call$log(i32.add(i32.const1)(i32.const2)))
Jay Phelps | @_jayphelps
s-expressionsYep, looks like Lisp
Jay Phelps | @_jayphelps
Source map support is likely coming, eventually.
Jay Phelps | @_jayphelps
How do I get started?
Jay Phelps | @_jayphelps
Jay Phelps | @_jayphelps
https://mbebenita.github.io/WasmExplorer/
Jay Phelps | @_jayphelps
webassembly.org
Jay Phelps | @_jayphelps
emccmain.c-sWASM=1-oapp.html
Jay Phelps | @_jayphelps
Firefox / Chrome support since March
Jay Phelps | @_jayphelps
Webpack is planning to add support (!!!)
Jay Phelps | @_jayphelps
Imagine a cpp-loader / rust-loader
Jay Phelps | @_jayphelps
What's missing?
Jay Phelps | @_jayphelps
Direct access to Web APIsYou have call into JavaScript, right now
Jay Phelps | @_jayphelps
Garbage collectionnecessary for better interop with JavaScript and WebIDL
Jay Phelps | @_jayphelps
Multi-threadingSounds likely we'll get very close to "real" threads
Jay Phelps | @_jayphelps
There's more, but advancing very quickly!
Jay Phelps | @_jayphelps
The revolution is just beginning
Jay Phelps | @_jayphelps
Join the discussions!https://github.com/WebAssembly/design
Jay Phelps | @_jayphelps
Thanks!
@_jayphelps