WebAssembly for the masses

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?

32e6a76c61f41da3beca909251498c60?s=128

Sendil Kumar N

June 24, 2019
Tweet

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