Webpack & WebAssembly

Webpack & WebAssembly

32e6a76c61f41da3beca909251498c60?s=128

Sendil Kumar N

June 01, 2018
Tweet

Transcript

  1. Webpack @sendilkumarn WebAssembly

  2. Sendil Kumar N • Full stack developer @Xebialabs

  3. Sendil Kumar N • Full stack developer @Xebialabs • Core

    dev team member @JHipster
  4. Sendil Kumar N • Full stack developer @Xebialabs • Core

    dev team member @JHipster • Team member @webpack
  5. Sendil Kumar N • Full stack developer @Xebialabs • Core

    dev team member @JHipster • Team member @webpack • Part of rust-wasm Working Group
  6. Sendil Kumar N • Full stack developer @Xebialabs • Core

    dev team member @JHipster • Team member @webpack • Part of rust-wasm Working Group • Big open source lover
  7. Full stack developers?

  8. C++ devs?

  9. None
  10. None
  11. WebAssembly ?

  12. What is WebAssembly?

  13. Binary instruction format 1010110 1010110 1010110 1010110 1010 1010110 1010110

    1010110 1010110 1010
  14. stack based machines 1010110 1010110 1010110 1010110 1010 1010110 1010110

    1010110 1010110 1010 Binary instruction format for
  15. Most efficient representation of instructions in binary 1010110 1010110 1010110

    1010110 1010 1010110 1010110 1010110 1010110 1010
  16. What, well in other words?

  17. Run your native code in web.

  18. Implementation detail for high level languages

  19. Why WebAssembly?

  20. Where “Performance” matters

  21. JavaScript ?

  22. WebAssembly is not a replacement to Javascript

  23. None
  24. ❤ We

  25. ❤ We

  26. Javascript is fast

  27. Interpreted language Write it Execute it

  28. It is compiled too Write it Execute it Compile it

    Optimise it
  29. Then what is the benefit with WebAssembly ?

  30. Where you need “Maintainable Performance”

  31. Wait, What is maintainable performance?

  32. High performance with Maintainable code

  33. Geeky code

  34. Uncertainties

  35. Performance loopholes

  36. Okay, I am writing Javascript for 15 years.

  37. Well, lets test it

  38. Tell me which is having higher performance

  39. A B

  40. A B ✅

  41. Optional args will have an impact on your performance…

  42. Monomorphisation

  43. Memoization

  44. Debug with profiler

  45. Used Webpack?

  46. ❤Webpack❤

  47. Okay, isn’t webpack a JS bundler?

  48. Webpack is a bundler for your frontend.

  49. Webpack is a new LLVM Unpopular

  50. It bundles / packs everything that you need

  51. Actually, how your application needs

  52. Actually, how your application needs code-splitting / DCE

  53. WP 4 - announced WebAssembly support.

  54. From WP4.8 we have a better WebAssembly support

  55. WP5 will have even better WebAssembly support

  56. Demo time lets pack and roll with webpack

  57. Demo agenda

  58. Create a Rust project

  59. Use Wasm bindgen to create wasm files + binding JS

    files.
  60. Make that rust project into node project

  61. Add web pack + web pack serve to it

  62. Run it…

  63. Enough demo it…

  64. Other mentions

  65. Streaming compilation

  66. WP internals may be / will be in Rust

  67. In future

  68. Garbage collection

  69. Dom Manipulation

  70. JVM devs ?

  71. Kotlin ?

  72. Questions?

  73. Happy Hacking