WebAssembly for the masses

Providing a consistent and reliable performance is a nightmare in JavaScript. Different engines, different optimizations, and unmaintainable code. If the above sounds are familiar, then WebAssembly is for you. Let us embrace the near-native performance consistently.

This is a complete talk on WebAssembly.

What is WebAssembly and what does it provide?
Why you need WebAssembly?
Which language supports it?
How to use it with demos?
Where it will be in the future?

Transcript

1. Cześć ! Krakow
2. Every Programming Language out there is built for a purpose. @sendilkumarn
3. We should learn from it @sendilkumarn
4. Stop fighting about languages @sendilkumarn
5. Start learning @sendilkumarn
6. WebAssembly for the masses @sendilkumarn
7. I am Sendil Kumar @sendilkumarn • Developer • Passionate about Open Source
8. What is WebAssembly ? @sendilkumarn
9. Computer / Machine / Server Send me 0s & 1s 010101010101010101010101010101010 @sendilkumarn
10. Computer / Machine / Server Send me 0s & 1s 010101010101010101010101010101010 @sendilkumarn
11. Computer / Machine / Server A S S E M B L E R mov eax, 14 mov ebx, 10 add eax, ebx 010101010101010101010101010101010 @sendilkumarn
12. Machine A S S E M B L E R mov eax, 14 mov ebx, 10 …. 010101010101010101010 C O M P I L E R Int sum = a + b; @sendilkumarn
13. Machine A S S E M B L E R mov eax, 14 mov ebx, 10 …. 010101010101010101010 C O M P I L E R Int sum = a + b; Machine Machine Machine Machine Machine @sendilkumarn
14. Distribution @sendilkumarn
15. Browsers came @sendilkumarn
16. Browsers evolved
17. Machine 010101010101010101010 Machine Machine Machine Machine Machine Browsers Give me code, I will handle @sendilkumarn
18. Machine 010101010101010101010 Machine Machine Machine Machine Machine Browsers But I know only HTML, CSS, JS @sendilkumarn
19. Machine 010101010101010101010 Machine Machine Machine Machine Machine Browsers JS Engine Layout Engine And many more… let’s simplify things... @sendilkumarn
20. Machine 010101010101010101010 Machine Machine Machine Machine Machine Browsers JS Engine Layout Engine HTML / CSS / JavaScript @sendilkumarn
21. Machine 010101010101010101010 Machine Machine Machine Machine Machine Browsers JS Engine Layout Engine HTML / CSS / JavaScript JavaScript @sendilkumarn
22. Machine 010101010101010101010 Machine Machine Machine Machine Machine Browsers JS Engine HTML / CSS / JavaScript Bytecode (or) WASM @sendilkumarn
23. What is a WebAssembly Module? • The Wasm stack machine is designed to be encoded in ◦ a size- and ◦ load-time-efficient binary format. • WebAssembly aims to execute at native speed by taking advantage of common hardware capabilities available on a wide range of platforms. @sendilkumarn
24. Browsers Your favorite language C O M P I L E R Bytecode (or) WASM JS Engine It works... @sendilkumarn
25. Why you need WebAssembly ? @sendilkumarn
26. ⚡ Fast ⚡ ~30% faster than JavaScript Not always the faster variant. Limit the boundary crossing Near-native performance @sendilkumarn
27. Secure Sandboxed environment Linear memory model Watch out Memory access @sendilkumarn
28. Portable Execute efficiently on various platform @sendilkumarn
29. Consistent Performance @sendilkumarn
30. Maintainable Performance @sendilkumarn
31. Multi-language support @sendilkumarn
32. JavaScript @sendilkumarn
33. JavaScript is easy @sendilkumarn
34. Courtesy: @bmeurer
35. But it is weird too... @sendilkumarn
36. How it works? @sendilkumarn
37. @sendilkumarn
38. JavaScript execution a.js c.js b.js e.js f.js d.js @sendilkumarn
39. JavaScript execution PARSE AST INTERPRET Byte Code 1010101 0101010 1010101 Profiler COMPILE 1010101 0101010 101 EXECUTE OPTIMISE 1010101 010101 GC EXECUTE EXECUTE @sendilkumarn
40. WebAssembly @sendilkumarn
41. @sendilkumarn
42. JavaScript @sendilkumarn
43. 1010101 0101010 1010101 DECODE 1010101 0101010 1010101 COMPILE 1010101 0101010 1010101 EXECUTE WebAssembly execution @sendilkumarn
44. PARSE COMPILE EXECUTE OPTIMISE GC JavaScript execution DECODE COMPILE EVALUATE WebAssembly execution @sendilkumarn
45. Which language supports it? @sendilkumarn
46. C / C++ Best performance... It is C / C++ More verbose Emscripten - father of toolchain @sendilkumarn
47. Rust Best tool chain available Performance needs to be tuned Integrated with the language @sendilkumarn
48. TypeScript Assembly Script FTW Insanely easy & fast @sendilkumarn
49. Go Kotlin Native Swift @sendilkumarn
50. And others... @sendilkumarn
51. WebAssembly here we come @sendilkumarn
52. Think before using it Source: AssemblyScript - FAQ
53. Future @sendilkumarn
54. Reference type proposal JS WASM Send me only numbers JS WASM Send me JS Objects @sendilkumarn
55. Host Binding proposal JS WASM Glue code With ref. type proposal @sendilkumarn
56. Garbage Collection @sendilkumarn
57. Cloudfare workers @sendilkumarn
58. WASI @sendilkumarn
59. Questions @sendilkumarn
60. Thanks for your time @sendilkumarn