Wonderful WebAssembly

WebAssembly is neither "web" nor "assembly" - but 100% amazing. It is our one chance to build a fast, safe, and universal compilation target for all languages and all platforms.

Let me show you why this is cool and how to get started with WebAssembly in Go, C, and Rust.

We will also learn about up and coming features of WebAssembly (like WASI) that will make it even faster and more versatile. Let's change the way we write software forever!

Transcript

1. ...and the future of computing
   Webassembly
   Wonderful
   !
   

   View Slide

2. Matthias Endler
   ...works at trivago
   ...mostly Backend
   ...afraid of Frontend
   ...Python/Golang/Rust
   ...Runs "Hello Rust"
   https://endler.dev
   

   View Slide

3. hello-rust.show
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. ? ? ?
   

   View Slide

9. Ritchie Thompson Kernighan
   

   View Slide

10. View Slide

11. View Slide

12. " UNIX is very simple.

    It just takes a genius

    to understand its simplicity. "
    -- Dennis Ritchie
    

    View Slide

13. View Slide

14. " C is what made

    Unix portable "
    -- Dennis Ritchie
    

    View Slide

15. View Slide

16. View Slide

17. 
    
    WWW
    
    
    Hello, World!
    
    
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. function Vb(d) {
    d = d | 0;
    var e = 0, f = 0, h = 0, j = 0, k = 0, l = 0, m = 0, n = 0,
    o = 0, p = 0, q = 0, r = 0, s = 0;
    e = i;
    i = i + 12 | 0;
    f = e | 0;
    [l + 4 >> 2] = 0;
    l = (c[1384465] | 0) + 3 | 0;
    do {
    if (l >>> 0 < 26) {
    if ((c[1356579] | 0) > 0) {
    m = d + 4 | 0;
    n = 0;
    while (1) {
    o = c[(c[1356577] | 0) + (n << 2) >> 2] | 0;
    do {
    if (a[o + 22 | 0] << 24 >> 24 == 24) {
    if (!(Vp(d, o | 0) | 0)) {
    break
    }
    p = (c[m >> 2] | 0) + (((c[h >> 2] | 0) - 1 | 0) * 40 & -1) + 12 | 0;
    q = o + 28 | 0;
    c[p >> 2] = c[q >> 2] | 0;
    c[p + 4 >> 2] = c[q + 4 >> 2] | 0;
    c[p + 8 >> 2] = c[q + 8 >> 2] | 0;
    c[p + 12 >> 2] = c[q + 12 >> 2] | 0;
    c[p + 16 >> 2] = c[q + 16 >> 2] | 0;
    asm.js
    

    View Slide

25. [Source]
    

    View Slide

26. •Performance differences
    between browsers
    •Still requires 

    parsing, compiling,
    optimising
    •No specification
    Disadvantages of asm.js
    

    View Slide

27. Enter WASM
    (Webassembly)
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. •Fast
    •Safe
    •Well defined
    •Language-independent
    •Streamable
    •Parallelizable
    Wasm is . . .
    

    View Slide

35. Wasm is . . . 

    neither web nor assembly
    

    View Slide

36. Decoding
    Validation
    Execution
    

    View Slide

37. https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/
    

    View Slide

38. i32, i64, f32, f64
    that's it.
    Datatypes!
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. (module)
    

    View Slide

45. 0000000: 0061 736d ; WASM_BINARY_MAGIC
    0000004: 0100 0000 ; WASM_BINARY_VERSION
    

    View Slide

46. ( func )
    

    View Slide

47. // JavaScript

    function add(a, b) {
    return a + b;
    }
    

    View Slide

48. (func (param i32) (param i32) (result f64)
    
    )
    

    View Slide

49. (func (param i32) (param f32) (local f64)
    get_local 0
    get_local 1
    get_local 2
    )
    

    View Slide

50. (func (param $foo i32) (param $bar f32) (local $baz f64)
    get_local $foo
    get_local $bar
    get_local $baz
    )
    

    View Slide

51. (module
    (
    func (param $a i32) (param $b i32) (result i32)
    get_local $a
    get_local $b
    i32.add
    )
    )
    

    View Slide

52. (module
    (func $add (param $a i32) (param $b i32) (result i32)
    get_local $a
    get_local $b
    i32.add)
    (export "add" (func $add))
    )
    

    View Slide

53. (module
    (type $type0 (func (result i32)))
    (table 0 anyfunc)
    (memory 1)
    (export "memory" memory)
    (export "hello" $func0)
    (func $func0 (result i32)
    i32.const 16
    )
    (data (i32.const 16)
    "Hello World\00"
    )
    )
    

    View Slide

54. View Slide

55. wasm2wat
    wat2wasm
    

    View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. 0
    750
    1500
    2250
    3000
    Go C Rust
    How big is " Hello World " (in KB)?
    40k 1k
    

    View Slide

63. View Slide

64. 0
    750
    1500
    2250
    3000
    Go C Rust
    "Hello World" unoptimized (KB)
    40k 1k
    

    View Slide

65. 0
    750
    1500
    2250
    3000
    Go C Rust
    "Hello World" unoptimized (KB)
    20k 400 bytes
    

    View Slide

66. Examples!
    

    View Slide

67. Wasm!
    

    View Slide

68. https://endler.dev/2019/tinysearch
    

    View Slide

69. https://squoosh.app/editor
    

    View Slide

70. View Slide

71. " Serverless "
    

    View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. https://wapm.io/
    

    View Slide

80. https://hacks.mozilla.org/2019/03/standardizing-wasi-a-webassembly-system-interface/
    

    View Slide

81. View Slide

82. https://www.youtube.com/watch?v=QKTh5Xj60pI
    

    View Slide

83. Thanks!
    endler.dev/talks
    

    View Slide