The document discusses the advantages of WebAssembly (WASM) over traditional JavaScript, emphasizing its performance, safety, and compatibility as a means to run native code in browsers. It compares various programming techniques, profiling methods, and the internal workings of JavaScript versus WebAssembly. Additionally, it highlights future improvements and features for WASM, such as streaming compilation and potential integration with JavaScript.

1. Do things faster & better
with WebAssembly
@sendilkumarn

2. Sendil Kumar
• Full stack developer @Xebialabs
• Core dev team member @JHipster
• Team member @webpack
• Part of rust-wasm Working Group
• Big open source lover & enthusiast

4. @sendilkumarn
You can reach me at

5. C / C++ devs ?

6. Rust devs ?

7. What does Rust / C++
offer?

8. Faster
More
control
SafetyTypes
Closer to
machine

9. JS devs ?

10. Fullstack JS devs ?

11. What does JS offer?

12. Try to be
faster
Easier to
read
Easier to
writeTypes?
Far from
machine

13. What you do to increase
the Performance of your
App ?

14. Minify
Async & Defer
Reduce dom
manipulation
Profile
JS Engine based
optimisations
Immutability
Type system
Code splitting
Service worker

15. Let us do a
performance question

16. Which has higher
performance?
function test() {
let arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
}
function test() {
let arr = [];
arr[0] = 1;
arr[2] = 3;
arr[1] = 2;
}

17. Which has higher
performance?
function test() {
let arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
}
function test() {
let arr = [];
arr[0] = 1;
arr[2] = 3;
arr[1] = 2;
}

18. Which has higher
performance?
let arr = new Array(3);let arr = [];

19. Which has higher
performance?
let arr = []; let arr = new Array(3);

20. But why 😱?
Packed & Holey Array
https://v8project.blogspot.nl/2017/09/elements-kinds-in-v8.html

22. Uncertainties😕🤔

23. Most of the profiling, needs you to know
more about the internals of JS engine.

24. Optional
Arguments
Packed/Holey
Array
Monomorphisation
Micro-
benchmarking
Engine based
tunings
Known engine
shortcomings
Time-
consuming

25. Uncertainty in
performance & results

26. ⚙ Maintainability ⚙

27. How better will it be to have
the consistency & speed of
native code in browsers?

28. WebAssembly
Binary encoded - Stack machine

29. In other words, you can compile
your native code and make
them run in your browser.

31. 🚀 Fast & Efficient

32. 🚀 Fast & Efficient
🔐 Safe

33. 🚀 Fast & Efficient
🔐 Safe
🧐 Debuggable

34. 🚀 Fast & Efficient
🔐 Safe
🧐 Debuggable
🕸 Open web platform

35. “WebAssembly is not a
replacement of JAVASCRIPT”
integrating well and being symbiotic

36. How JS works now inside
JS Engine

37. PARSE
COMPILE
OPTIMIZE
Re-OPTIMIZE
EXECUTE
GC
Javascript AST

38. PARSE
COMPILE
OPTIMIZE
Re-OPTIMIZE
EXECUTE
GC
Profiler
🔥
COMPILE 0101010101010

39. PARSE
COMPILE
OPTIMIZE
Re-OPTIMIZE
EXECUTE
GC
Profiler
🔥🔥🔥🔥🔥

40. PARSE
COMPILE
OPTIMIZE
Re-OPTIMIZE
EXECUTE
GC
Profiler

41. PARSE
COMPILE
OPTIMIZE
Re-OPTIMIZE
EXECUTE
GC
Profiler
🚮

42. How WASM Works?

43. DECODE
COMPILE
EXECUTE
01010101001010 0101011001111000

44. DECODE
COMPILE
EXECUTE
0101
0110
0111
1000
0101011001111000

45. DECODE
COMPILE
EXECUTE
0111
1000
0110 5

46. Simple Example in
Rust

47. #[no_mangle]
pub extern fn add_one(x: i32) -> i32{
x+1
}
RUST

48. rustc +nightly
— —target wasm32-unknown-unknown
-O test.rs

49. WASM
Raw binary format

50. WASM
MODULE
IMPORT
TABLE MEMORY
GLOBAL
EXPORT
ELEMENT
DATA
START
FUNCTION &
CODE

51. Let us see what is inside
Module

52. WASM
IMPORT
EXPORT
FUNCTION &
CODE
(import …)
(export …)
(func …)
Anything that you want to import inside WASM
Anything that you want to export outside WASM
Actual Binary code to execute

53. WASM
MEMORY
GLOBAL
START (start $start_function)
first function to get loaded & run in the module
(global type mutability expr)
(memory init-size max-size(opt))

54. WASM
TABLE
ELEMENT
DATA Data -> linear array of memory indexes
GC references, raw OS handles, or native pointers
Allows module to initialise the elements

55. (module
(type $t0
(func (param i32) (result i32)))
(func $add_one (export “add_one”)
(type $0) (param $p0 i32) (result i32)
get_local $p0
i32.const 1
i32.add
)
(table $T0 0 anyfunc)
(memory $memory (export “memory”) 17)
(data (i32.const 4) “10001000”))
WAST

56. (module )
Module

57. (type $t0
(func
(param i32)
(result i32)
)
)
Type

58. (func $add_one
(export “add_one”)
(type $0)
(param $p0 i32)
(result i32)
get_local $p0
i32.const 1
i32.add
)
Actual function

59. (table $T0 0 anyfunc)
Table

60. (memory $memory
(export “memory”)
17)
Memory

61. (data
(i32.const 4)
“10001000”)
)
Data

62. How to load them?

63. Using fetch…

64. Using compile streaming…

65. Using instantiate streaming…
⚠Few browsers yet to support

66. Streaming compilation
speeds up the wasm
performance by 10-15 times
Streaming compilation will be coming to JS… 🎉 🎉 🎉 🎉 🎉 🎉

67. ESM spec for WASM
⚠Still in very early stages, and will be implemented

68. Demo Time ⏱

69. Future 🎠
🦄 Garbage Collection
🦄 DOM Manipulation
🦄 Bulk memory operations
🦄 Threads
🦄 Exception handling

70. Questions?

71. Happy Hacking 😎