State of WebAssembly

Transcript

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