Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
@sendilkumarn Hoi Nederland !!!
Slide 2
Slide 2 text
@sendilkumarn Languages are built for a purpose. Choose & Use them wisely…
Slide 3
Slide 3 text
The state of WebAssembly Sendil Kumar N
Slide 4
Slide 4 text
@sendilkumarn Sendil Kumar
Slide 5
Slide 5 text
@sendilkumarn Hacking on WebAssembly
Slide 6
Slide 6 text
JavaScript is weird @sendilkumarn
Slide 7
Slide 7 text
[1, 2] + [3, 4] @sendilkumarn
Slide 8
Slide 8 text
1, 23, 4 @sendilkumarn [1, 2] + [3, 4]
Slide 9
Slide 9 text
1, 23, 4 @sendilkumarn [1, 2].toString() + [3, 4].toString() “1,2” + “3, 4”
Slide 10
Slide 10 text
JavaScript is weird* * - sometimes @sendilkumarn
Slide 11
Slide 11 text
@sendilkumarn JavaScript Execution
Slide 12
Slide 12 text
@sendilkumarn Load JavaScript
Slide 13
Slide 13 text
@sendilkumarn a.js AST 1001010010101101010 Execute Profiler Parse Interpret Compile 100101001010 Optimise 1010 GC
Slide 14
Slide 14 text
@sendilkumarn JavaScript Tuning
Slide 15
Slide 15 text
@sendilkumarn Css Tuning
Slide 16
Slide 16 text
JavaScript is awesome @sendilkumarn ~80% ~90% https://2019.stateofjs.com/opinions/
Slide 17
Slide 17 text
@sendilkumarn JavaScript is easy https://octoverse.github.com/ 6 years in row
Slide 18
Slide 18 text
@sendilkumarn https://2019.stateofjs.com/opinions/ ~59% ~40% JavaScript is evolving
Slide 19
Slide 19 text
So what is the problem? @sendilkumarn
Slide 20
Slide 20 text
@sendilkumarn Types Polymorphism Unpredictable Performance Runtime exceptions
Slide 21
Slide 21 text
@sendilkumarn Types 66% users interested to use TypeScript https://2019.stateofjs.com/javascript-flavors/
Slide 22
Slide 22 text
@sendilkumarn Predicatble Performance Types Unpredictable Performance Typed
Slide 23
Slide 23 text
WebAssembly @sendilkumarn
Slide 24
Slide 24 text
Yet Another Frontend framework?
Slide 25
Slide 25 text
@sendilkumarn 00 61 73 6D 01 00 00 00 Native Code Binary JavaScript Javascript Engine Runtime
Slide 26
Slide 26 text
@sendilkumarn 00 61 73 6D 01 00 00 00 Native Code Binary JavaScript Javascript Engine
Slide 27
Slide 27 text
WebAssembly is not a language @sendilkumarn
Slide 28
Slide 28 text
@sendilkumarn func add is called Stack get_local $lhs LHS RHS get_local $rhs i32.add SUM Structured stack machine
Slide 29
Slide 29 text
@sendilkumarn 00 61 73 6D 01 00 00 00 Size & Load time efficient
Slide 30
Slide 30 text
@sendilkumarn What WebAssembly provides?
Slide 31
Slide 31 text
@sendilkumarn Speed
Slide 32
Slide 32 text
@sendilkumarn Near Native perf. ~30% faster than JS
Slide 33
Slide 33 text
@sendilkumarn secure
Slide 34
Slide 34 text
@sendilkumarn Linear Memory Model
Slide 35
Slide 35 text
@sendilkumarn Shared Array Buffer
Slide 36
Slide 36 text
@sendilkumarn Typed
Slide 37
Slide 37 text
@sendilkumarn i32 i64 f32 f64 00 61 73 6D 01 00 00 00 WebAssembly Binary JavaScript Javascript Engine Binding JS file
Slide 38
Slide 38 text
@sendilkumarn Boundary Crossing
Slide 39
Slide 39 text
@sendilkumarn Not always faster
Slide 40
Slide 40 text
@sendilkumarn How WASM works?
Slide 41
Slide 41 text
@sendilkumarn WebAssembly Execution
Slide 42
Slide 42 text
@sendilkumarn Load WebAssembly
Slide 43
Slide 43 text
@sendilkumarn Decode Compile Execute 00 61 73 6D 00 61 73 6D 00 61 73 6D
Slide 44
Slide 44 text
@sendilkumarn PARSE COMPILE OPTIMISE EXECUTE GC JavaScript execution DECODE COMPILE EXECUTE WebAssembly execution
Slide 45
Slide 45 text
@sendilkumarn PARSE COMPILE OPTIMISE EXECUTE GC JavaScript execution DECODE COMPILE EXECUTE WebAssembly execution I am faster
Slide 46
Slide 46 text
@sendilkumarn PARSE COMPILE OPTIMISE EXECUTE GC JavaScript execution DECODE COMPILE EXECUTE WebAssembly execution Optimised already
Slide 47
Slide 47 text
@sendilkumarn Streaming compilation
Slide 48
Slide 48 text
What languages can do wasm? @sendilkumarn
Slide 49
Slide 49 text
C/C++ @sendilkumarn
Slide 50
Slide 50 text
@sendilkumarn ./emcc -O3 helloworld.c
Slide 51
Slide 51 text
Why C/C++? @sendilkumarn Tons of options All batteries included Verbose
Slide 52
Slide 52 text
Rust @sendilkumarn
Slide 53
Slide 53 text
@sendilkumarn $ wasm-pack build $ cargo install wasm-pack
Slide 54
Slide 54 text
Why Rust? @sendilkumarn Inbuilt into the compiler All batteries included Best tooling support Sometimes bigger binaries
Slide 55
Slide 55 text
AssemblyScript @sendilkumarn
Slide 56
Slide 56 text
@sendilkumarn $ asc helloworld.ts -b helloworld.wasm -O3 $ npm i --save-dev assemblyscript
Slide 57
Slide 57 text
Why AssemblyScript? @sendilkumarn Closer to JavaScript community Good tooling support / options
Slide 58
Slide 58 text
Go @sendilkumarn
Slide 59
Slide 59 text
@sendilkumarn $ GOOS=js GOARCH=wasm go build -o out/main.wasm go/main.go
Slide 60
Slide 60 text
Why Go? @sendilkumarn Easy & Concise TinyGo is awesome Reflections & Proxies everywhere
Slide 61
Slide 61 text
@sendilkumarn Future
Slide 62
Slide 62 text
@sendilkumarn Interface types
Slide 63
Slide 63 text
@sendilkumarn Single Instruction Multiple Data
Slide 64
Slide 64 text
@sendilkumarn ♻ Garbage Collection
Slide 65
Slide 65 text
@sendilkumarn WASI WebAssembly System Interface
Slide 66
Slide 66 text
JavaScript with WebAssembly together makes web even more awesome & faster @sendilkumarn
Slide 67
Slide 67 text
@sendilkumarn Thanks… @sendilkumarn dev.to/sendilkumarn sendilkumarn.com/blog Questions…