93
WebAssembly Demystified Jay Phelps | @_jayphelps

WebAssembly Demystified

Embed Size (px)

Citation preview

Page 1: WebAssembly Demystified

WebAssembly Demystified

Jay Phelps | @_jayphelps

Page 2: WebAssembly Demystified

Jay Phelps | @_jayphelps

We're on the brink of a revolution

Page 3: WebAssembly Demystified

Jay Phelps | @_jayphelps

WebAssembly will change the way we think of "web apps"

Page 4: WebAssembly Demystified

Senior Software Engineer |

@_jayphelps

Jay Phelps

Page 5: WebAssembly Demystified

Jay Phelps | @_jayphelps

So...what is WebAssembly? aka wasm

Page 6: WebAssembly Demystified

Jay Phelps | @_jayphelps

Efficient, low-level bytecode for the Web

Page 7: WebAssembly Demystified

Jay Phelps | @_jayphelps

Efficient, low-level bytecode for the Web

Page 8: WebAssembly Demystified

Jay Phelps | @_jayphelps

Fast to load and execute

Page 9: WebAssembly Demystified

Jay Phelps | @_jayphelps

Efficient, low-level bytecode for the Web

Page 10: WebAssembly Demystified

Jay Phelps | @_jayphelps

0x6a01101010

Page 11: WebAssembly Demystified

Jay Phelps | @_jayphelps

Intended (mostly) as a compilation target

Page 12: WebAssembly Demystified

intfactorial(intn){if(n==0){return1;}else{returnn*factorial(n-1);}}

Page 13: WebAssembly Demystified

intfactorial(intn){if(n==0){return1;}else{returnn*factorial(n-1);}}

0061736D010000000186808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B200041016B100020006C0B

Page 14: WebAssembly Demystified

Jay Phelps | @_jayphelps

Safe and portable just like JavaScript

Page 15: WebAssembly Demystified

Jay Phelps | @_jayphelps

“shortcut to your JavaScript engine's optimizer” Ben Smith, Chrome team

Page 16: WebAssembly Demystified

Jay Phelps | @_jayphelps

Is it going to kill JavaScript?

Page 17: WebAssembly Demystified

Jay Phelps | @_jayphelps

Nope!says browser vendors

*

Page 18: WebAssembly Demystified

Jay Phelps | @_jayphelps

*well...maybe...some day...a really long time from now(my own opinion)

Page 19: WebAssembly Demystified

Jay Phelps | @_jayphelps

Will we compile JavaScript to WebAssembly?

Page 20: WebAssembly Demystified

Jay Phelps | @_jayphelps

JavaScript is an extremely dynamic language

Page 21: WebAssembly Demystified

Jay Phelps | @_jayphelps

Compiling JavaScript to WebAssembly would almost certainly run slower

Page 22: WebAssembly Demystified

Jay Phelps | @_jayphelps

WebAssembly is still missing things

Page 23: WebAssembly Demystified

Jay Phelps | @_jayphelps

v1 MVP is best suited for languages like C/C++ and Rust

Page 24: WebAssembly Demystified

Jay Phelps | @_jayphelps

But other languages soon!

Page 25: WebAssembly Demystified

Jay Phelps | @_jayphelps

TurboScript

Page 26: WebAssembly Demystified

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;}

Page 27: WebAssembly Demystified

Jay Phelps | @_jayphelps

When should I target WebAssembly?

Page 28: WebAssembly Demystified

Jay Phelps | @_jayphelps

Heavily CPU-bound number computations

Page 29: WebAssembly Demystified

Jay Phelps | @_jayphelps

Games

Page 30: WebAssembly Demystified

https://s3.amazonaws.com/mozilla-games/tmp/2017-02-21-SunTemple/SunTemple.html

Page 31: WebAssembly Demystified

Jay Phelps | @_jayphelps

Other use cases coming sooner than you might think!

Page 32: WebAssembly Demystified

Jay Phelps | @_jayphelps

You'll likely consume compiled WebAssembly binaries even sooner

Page 33: WebAssembly Demystified

Jay Phelps | @_jayphelps

What was that binary stuff?

Page 34: WebAssembly Demystified

intfactorial(intn){if(n==0){return1;}else{returnn*factorial(n-1);}}

0061736D010000000186808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B200041016B100020006C0B

Page 35: WebAssembly Demystified

0061736D010000000186808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B200041016B100020006C0B

Page 36: WebAssembly Demystified

0061736D010000000186808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B200041016B100020006C0B

Page 37: WebAssembly Demystified

0061736D010000000186808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B200041016B100020006C0B

Page 38: WebAssembly Demystified

86808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B20004101

Page 39: WebAssembly Demystified

86808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B20004101

Page 40: WebAssembly Demystified

Jay Phelps | @_jayphelps

Binary can be "a little" intimidating

Page 41: WebAssembly Demystified

Jay Phelps | @_jayphelps

Protip: don't worry about it(unless of course, you want to)

Page 42: WebAssembly Demystified

Jay Phelps | @_jayphelps

Textual representation to the rescue!

Page 43: WebAssembly Demystified

Jay Phelps | @_jayphelps

(func$factorial(param$ni32)(resulti32)get_local$ni32.const0i32.eqif$if0i32.const1returnend$if0get_local$ni32.const1i32.subcall$factorialget_local$ni32.mul)

Page 44: WebAssembly Demystified

Jay Phelps | @_jayphelps

(func$factorial(param$ni32)(resulti32)get_local$ni32.const0i32.eqif$if0i32.const1returnend$if0get_local$ni32.const1i32.subcall$factorialget_local$ni32.mul)

Page 45: WebAssembly Demystified

Jay Phelps | @_jayphelps

Let's learn the fundamentals

Page 46: WebAssembly Demystified

Jay Phelps | @_jayphelps

WebAssembly is a stack machine language

Page 47: WebAssembly Demystified

Jay Phelps | @_jayphelps

...what's a stack machine?

Page 48: WebAssembly Demystified

Jay Phelps | @_jayphelps

a data structure with two operations:

push and pop

Stack

Page 49: WebAssembly Demystified

item

stack

push

Page 50: WebAssembly Demystified

item

item

stack

Page 51: WebAssembly Demystified

item

item

item

stack

Page 52: WebAssembly Demystified

item

item

item

stack

pop

Page 53: WebAssembly Demystified

item

stack

item

Page 54: WebAssembly Demystified

stack

item

Page 55: WebAssembly Demystified

Jay Phelps | @_jayphelps

last in, first out order (LIFO)

Page 56: WebAssembly Demystified

Jay Phelps | @_jayphelps

stack machine: instructions on a stack

Page 57: WebAssembly Demystified

1+2

Page 58: WebAssembly Demystified

i32.add 0x6a

opcode mnemonics

01101010

Page 59: WebAssembly Demystified

i32.const1i32.const2i32.add

Page 60: WebAssembly Demystified

i32.const1i32.const2i32.add

i32.const1

Page 61: WebAssembly Demystified

i32.const1i32.const2i32.addi32.const2

Page 62: WebAssembly Demystified

i32.const1i32.const2i32.addi32.add

Page 63: WebAssembly Demystified

stack

i32.const1i32.const2i32.add

Page 64: WebAssembly Demystified

i32.const1i32.const2i32.add

i32.const1

stack

1

Page 65: WebAssembly Demystified

i32.const1i32.const2i32.addi32.const2

stack

2

1

Page 66: WebAssembly Demystified

i32.const1i32.const2i32.addi32.add

stack

1

2

Page 67: WebAssembly Demystified

i32.const1i32.const2i32.addi32.add

stack

3

Page 68: WebAssembly Demystified

i32.const1i32.const2i32.add

Jay Phelps | @_jayphelps

Page 69: WebAssembly Demystified

i32.const1i32.const2i32.addcall$log

Jay Phelps | @_jayphelps

Page 70: WebAssembly Demystified

Jay Phelps | @_jayphelps

Compilers usually apply optimizationsreal-world output is often less understandable to humans

Page 71: WebAssembly Demystified

i32.const1i32.const2i32.addcall$log

Jay Phelps | @_jayphelps

Page 72: WebAssembly Demystified

i32.const3call$log

Jay Phelps | @_jayphelps

Page 73: WebAssembly Demystified

Jay Phelps | @_jayphelps

Most tooling supports an Abstract Syntax Tree (AST)still compiled and evaluated as a stack machine

Page 74: WebAssembly Demystified

i32.const1i32.const2i32.addcall$log

Jay Phelps | @_jayphelps

Page 75: WebAssembly Demystified

(call$log(i32.add(i32.const1)(i32.const2)))

Jay Phelps | @_jayphelps

Page 76: WebAssembly Demystified

(call$log(i32.add(i32.const1)(i32.const2)))

Jay Phelps | @_jayphelps

s-expressionsYep, looks like Lisp

Page 77: WebAssembly Demystified

Jay Phelps | @_jayphelps

Source map support is likely coming, eventually.

Page 78: WebAssembly Demystified

Jay Phelps | @_jayphelps

How do I get started?

Page 79: WebAssembly Demystified

Jay Phelps | @_jayphelps

Page 80: WebAssembly Demystified

Jay Phelps | @_jayphelps

https://mbebenita.github.io/WasmExplorer/

Page 81: WebAssembly Demystified

Jay Phelps | @_jayphelps

webassembly.org

Page 82: WebAssembly Demystified

Jay Phelps | @_jayphelps

emccmain.c-sWASM=1-oapp.html

Page 83: WebAssembly Demystified

Jay Phelps | @_jayphelps

Firefox / Chrome support since March

Page 84: WebAssembly Demystified

Jay Phelps | @_jayphelps

Webpack is planning to add support (!!!)

Page 85: WebAssembly Demystified

Jay Phelps | @_jayphelps

Imagine a cpp-loader / rust-loader

Page 86: WebAssembly Demystified

Jay Phelps | @_jayphelps

What's missing?

Page 87: WebAssembly Demystified

Jay Phelps | @_jayphelps

Direct access to Web APIsYou have call into JavaScript, right now

Page 88: WebAssembly Demystified

Jay Phelps | @_jayphelps

Garbage collectionnecessary for better interop with JavaScript and WebIDL

Page 89: WebAssembly Demystified

Jay Phelps | @_jayphelps

Multi-threadingSounds likely we'll get very close to "real" threads

Page 90: WebAssembly Demystified

Jay Phelps | @_jayphelps

There's more, but advancing very quickly!

Page 91: WebAssembly Demystified

Jay Phelps | @_jayphelps

The revolution is just beginning

Page 92: WebAssembly Demystified

Jay Phelps | @_jayphelps

Join the discussions!https://github.com/WebAssembly/design

Page 93: WebAssembly Demystified

Jay Phelps | @_jayphelps

Thanks!

@_jayphelps