WebAssembly - is it the future for the Web?

Web assembly brings language diversity into web development to cover gaps created by JavaScript. It is defined as an “a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.”

Transcript

1. WebAssembly
   Is it the future for the Web?
   

   View Slide

2. Bilal Çınarlı
   Sr. Software Engineer @Adidas
   @bcinarli
   

   View Slide

3. View Slide

4. HTML initially released in 1993
   

   View Slide

5. JavaScript is first appeared
   at the end of 1995
   

   View Slide

6. CSS initially released
   at the end of 1997
   

   View Slide

7. View Slide

8. In the beginning Web was
   mainly used for displaying content
   

   View Slide

9. Then e-commerce came in to place.
   Web has started to be used for selling
   

   View Slide

10. We did not stop there!
    

    View Slide

11. We started to use it for
    playing Games, processing Images,
    processing Documents etc…
    

    View Slide

12. View Slide

13. JS limitations on performance
    

    View Slide

14. WebAssembly
    

    View Slide

15. WebAssembly (abbreviated Wasm) is a new type of code
    that can be run in modern web browsers
    and provides new features
    and major gains in performance.
    

    View Slide

16. It is a binary instruction format
    for a stack-based virtual machine
    

    View Slide

17. It works with inside and outside of the Browser
    

    View Slide

18. View Slide

19. WebAssembly code can be executed
    at near-native speed across different platforms
    by taking advantage of common hardware capabilities.
    

    View Slide

20. View Slide

21. WebAssembly is a low-level assembly language,
    but it does have a human-readable text format
    that allows code to be
    written, viewed, and debugged by hand.
    

    View Slide

22. View Slide

23. WebAssembly is specified to be run in a safe, sandboxed
    execution environment. Like other web code, it will enforce the
    browser's same-origin and permissions policies
    

    View Slide

24. WebAssembly is designed so that
    it plays nicely with other web technologies
    and maintains backwards compatibility
    

    View Slide

25. How to Use?
    

    View Slide

26. Compiling your low-level code to WebAssembly
    

    View Slide

27. ➡ Porting a C/C++ application with Emscripten
    ➡ Writing WebAssembly by hand
    ➡ Writing a Rust application to target it to WebAssembly
    ➡ AssemblyScript to compile it WebAssembly
    

    View Slide

28. // hello.c
    #include
    int main() {
    printf("hello, world!\n");
    return 0;
    }
    Sample C++
    

    View Slide

29. (module
    (type $FUNCSIG$ii (func (param i32) (result i32)))
    (import "env" "puts" (func $puts (param i32) (result i32)))
    (table 0 anyfunc)
    (memory $0 1)
    (data (i32.const 16) "hello, world!\00")
    (export "memory" (memory $0))
    (export "main" (func $main))
    (func $main (; 1 ;) (result i32)
    (drop
    (call $puts
    (i32.const 16)
    )
    )
    (i32.const 0)
    )
    )
    Wat File
    

    View Slide

30. wasm-function[1]:
    sub rsp, 0x18 ; 0x000000 48 83 ec 18
    cmp qword ptr [r14 + 0x28], rsp ; 0x000004 49 39 66 28
    jae 0x56 ; 0x000008 0f 83 48 00 00 00
    0x00000e:
    mov edi, 0x10 ; 0x00000e bf 10 00 00 00
    mov qword ptr [rsp], r14 ; 0x000013 4c 89 34 24
    mov rax, qword ptr [r14 + 0x30] ; 0x000017 49 8b 46 30
    mov r14, qword ptr [r14 + 0x38] ; 0x00001b 4d 8b 76 38
    mov r15, qword ptr [r14 + 0x18] ; 0x00001f 4d 8b 7e 18
    call rax ; 0x000023 ff d0
    mov r14, qword ptr [rsp] ; 0x000025 4c 8b 34 24
    mov r15, qword ptr [r14 + 0x18] ; 0x000029 4d 8b 7e 18
    xor eax, eax ; 0x00002d 33 c0
    nop ; 0x00002f 66 90
    add rsp, 0x18 ; 0x000031 48 83 c4 18
    ret ; 0x000035 c3
    wasm-function[0]:
    sub rsp, 0x18 ; 0x000000 48 83 ec 18
    mov qword ptr [rsp], r14 ; 0x000004 4c 89 34 24
    mov rax, qword ptr [r14 + 0x30] ; 0x000008 49 8b 46 30
    mov r14, qword ptr [r14 + 0x38] ; 0x00000c 4d 8b 76 38
    mov r15, qword ptr [r14 + 0x18] ; 0x000010 4d 8b 7e 18
    call rax ; 0x000014 ff d0
    mov r14, qword ptr [rsp] ; 0x000016 4c 8b 34 24
    mov r15, qword ptr [r14 + 0x18] ; 0x00001a 4d 8b 7e 18
    nop ; 0x00001e 66 90
    add rsp, 0x18 ; 0x000020 48 83 c4 18
    ret ; 0x000024 c3
    Firefox WebAssembly
    

    View Slide

31. Wasm
    Module
    JavaScript Document
    Fetch Execute
    

    View Slide

32. fetch('/module.wasm')
    .then((response) =>" {
    return response.arrayBuffer();
    })
    .then((wasmBuffer) =>" {
    return WebAssembly.instantiate(wasmBuffer);
    })
    .then(({ instance, module }) =>" {
    console.log(instance.exports.add(1, 2));
    });
    Loading Wasm to JS
    

    View Slide

33. Common Misconceptions
    

    View Slide

34. WebAssembly runs inside its own separate Virtual Machine
    In the browser, shared the same runtime with JS
    

    View Slide

35. WebAssembly runs inside a separate thread
    Uses the same execution thread as with JavaScript
    

    View Slide

36. WebAssembly directly runs on the processor
    It is platform agnostic. Runs through JS Engine
    

    View Slide

37. WebAssembly will replace JavaScript
    It provides to near-native performance for heavy processes.
    Not to created to replace but work along with JS
    

    View Slide

38. Resources:
    https://developer.mozilla.org/en-US/docs/WebAssembly/
    Concepts
    https://webassembly.org/
    

    View Slide

39. Thank you
    

    View Slide