Webpack & WebAssembly

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. ❤

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