the webassembly revolution has begun - qcon …...webassembly is still missing things for broad...
Post on 26-Jun-2020
4 Views
Preview:
TRANSCRIPT
WebAssembly
Jay Phelps | @_jayphelps
The
Revolutionhas begun
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 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 is
Jay Phelps | @_jayphelps
Is it going to kill JavaScript?
Jay Phelps | @_jayphelps
Nope!says browser vendors
*
Jay Phelps | @_jayphelps
*well...maybe...some day...a 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
Jay Phelps | @_jayphelps
Compiling JavaScript to WebAssembly would run slower
What about a something JavaScript-like?
Jay Phelps | @_jayphelps
AssemblyScript, TurboScript, ThinScript, etc
Jay Phelps | @_jayphelps
classCoordinates{x:i64;y:i64;z:i64;
constructor(x:i64,y:i64,z:i64){this.x=x;this.y=y;this.z=z;}}
exportfunctionexample(){letposition=newCoordinates(10,20,30);//laterdeleteposition;}
Jay Phelps | @_jayphelps
WebAssembly is still missing things for broad adoption
Jay Phelps | @_jayphelps
v1 MVP is best suited for languages like C/C++ and Rust
Jay Phelps | @_jayphelps
But other languages soon!Things like Java, OCaml, and even brand new ones
Jay Phelps | @_jayphelps
typeschoolPerson=Teacher|Director|Student(string);
letgreeting=(stranger)=>switchstranger{|Teacher=>"Heyprofessor!"|Director=>"Hellodirector."|Student("Richard")=>"StillhereRicky?"|Student(anyOtherName)=>"Hey,"++anyOtherName++"."};
Jay Phelps | @_jayphelps
When should I target WebAssembly right now?
Jay Phelps | @_jayphelps
Heavily CPU-bound number computations
Jay Phelps | @_jayphelps
Games
Physics Simulation
Encryption
Compression
Video Decoding
Audio Mixing
Language Detection
Jay Phelps | @_jayphelps
Games
Physics Simulation
Encryption
Compression
Video Decoding
Audio Mixing
Language Detection
Jay Phelps | @_jayphelps
Jay Phelps | @_jayphelpshttps://goo.gl/yvV92X
https://goo.gl/YWMpdp
asm-dom
https://goo.gl/XWBeme
Jay Phelps | @_jayphelps
Other use cases just around the corner
Jay Phelps | @_jayphelps
You'll likely consume compiled WebAssembly libraries 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
WebAssembly is a stack machine language
Jay Phelps | @_jayphelps
stack machine: instructions on a stack
1+2
i32.add 0x6a
opcode
01101010
mnemonic
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.add
stack
3
i32.add
Jay Phelps | @_jayphelps
call$log
i32.const1i32.const2i32.add
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 coming
Jay Phelps | @_jayphelps
What about memory on the heap?
Jay Phelps | @_jayphelps
A linear memory is a contiguous, byte-addressable range of memory
Jay Phelps | @_jayphelps
Accessed with instructions like i32.load and i32.store
Jay Phelps | @_jayphelps
0 1 2 3 4 5 6 7 8 9 10
Jay Phelps | @_jayphelps
0 1 2 3 4 5 6 7 8 9 10
1 byte
Jay Phelps | @_jayphelps
0 1 2 3 4 5 6 7 8 9 10
Jay Phelps | @_jayphelps
0 1 2 3 4 5 6 7 8 9 10
w a s m
Jay Phelps | @_jayphelps
0 1 2 3 4 5 6 7 8 9 10
w a s m
Jay Phelps | @_jayphelps
0 1 2 3 4 5 6 7 8 9 10
119 97 115 109
Jay Phelps | @_jayphelps
How do I get started?
https://mbebenita.github.io/WasmExplorer/
Jay Phelps | @_jayphelps
https://github.com/WebAssembly/wabt
Jay Phelps | @_jayphelps
https://github.com/WebAssembly/binaryen
Jay Phelps | @_jayphelps
Jay Phelps | @_jayphelps
$emccmain.c-sWASM=1-oapp.html
Jay Phelps | @_jayphelps
webassembly.org
Jay Phelps | @_jayphelps
Webpack is adding support (!!!)They received a $125,000 grant from MOSS
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 collectionalso necessary for better interop with JavaScript and WebIDL
Jay Phelps | @_jayphelps
Multi-threading
Jay Phelps | @_jayphelps
Browser support?
Jay Phelps | @_jayphelps
The revolution is just beginning
Jay Phelps | @_jayphelps
Jay Phelps | @_jayphelps
Efficient, low-level bytecode for the Web
Jay Phelps | @_jayphelps
Efficient, low-level bytecode for the Web
Jay Phelps | @_jayphelps
Jay Phelps | @_jayphelps
Questions?
@_jayphelps
Jay Phelps | @_jayphelps
Thanks!
@_jayphelps
Jay Phelps | @_jayphelps
Jay Phelps | @_jayphelps
Jay Phelps | @_jayphelps
voidlog(char*);
voidexample(){log("wasm");}
(module(import"env""log"(func$log(parami32)))(memory$01)(data(i32.const0)"wasm\00")(func$example(call$log(i32.const0))))
Jay Phelps | @_jayphelps
(module(import"env""log"(func$log(parami32)))(memory$01)
(func$example(call$log(i32.const0))))
Jay Phelps | @_jayphelps
(data(i32.const0)"wasm\00")
(module(import"env""log"(func$log(parami32)))(memory$01)(data(i32.const0)"wasm\00")(func$example
))
Jay Phelps | @_jayphelps
(call$log(i32.const0))
top related