Webpack & WebAssembly

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?
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
24. ❤ We
25. ❤
26. ❤ We
27. Javascript is fast
28. Interpreted language Write it Execute it
29. It is compiled too Write it Execute it Compile it Optimise it
30. Then what is the benefit with WebAssembly ?
31. Where you need “Maintainable Performance”
32. Wait, What is maintainable performance?
33. High performance with Maintainable code
34. Geeky code
35. Uncertainties
36. Performance loopholes
37. Okay, I am writing Javascript for 15 years.
38. Well, lets test it
39. Tell me which is having higher performance
40. A B
41. A B ✅
42. Optional args will have an impact on your performance…
43. Monomorphisation
44. Memoization
45. Debug with profiler
46. Used Webpack?
47. ❤Webpack❤
48. Okay, isn’t webpack a JS bundler?
49. Webpack is a bundler for your frontend.
50. Webpack is a new LLVM Unpopular
51. It bundles / packs everything that you need
52. Actually, how your application needs
53. Actually, how your application needs code-splitting / DCE
54. WP 4 - announced WebAssembly support.
55. From WP4.8 we have a better WebAssembly support
56. WP5 will have even better WebAssembly support
57. Demo time lets pack and roll with webpack
58. Demo agenda
59. Create a Rust project
60. Use Wasm bindgen to create wasm files + binding JS files.
61. Make that rust project into node project
62. Add web pack + web pack serve to it
63. Run it…
64. Enough demo it…
65. Other mentions
66. Streaming compilation
67. WP internals may be / will be in Rust
68. In future
69. Garbage collection
70. Dom Manipulation
71. JVM devs ?
72. Kotlin ?
73. Questions?
74. Happy Hacking