Pro Yearly is on sale from $80 to $50! »

WebAssembly - is it the future for the Web?

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

80d92d5d0bd0170aebf6e07589a0b571?s=128

Bilal Çınarlı

October 27, 2020
Tweet

Transcript

  1. WebAssembly Is it the future for the Web?

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

  3. None
  4. HTML initially released in 1993

  5. JavaScript is first appeared at the end of 1995

  6. CSS initially released at the end of 1997

  7. <HTML /> CSS {} JS ()

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

  9. Then e-commerce came in to place. Web has started to

    be used for selling
  10. We did not stop there!

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

    processing Documents etc…
  12. None
  13. JS limitations on performance

  14. WebAssembly

  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.
  16. It is a binary instruction format for a stack-based virtual

    machine
  17. It works with inside and outside of the Browser

  18. <HTML /> CSS {} JS () WASM ()

  19. WebAssembly code can be executed at near-native speed across different

    platforms by taking advantage of common hardware capabilities.
  20. None
  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.
  22. None
  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
  24. WebAssembly is designed so that it plays nicely with other

    web technologies and maintains backwards compatibility
  25. How to Use?

  26. Compiling your low-level code to WebAssembly

  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
  28. // hello.c #include <stdio.h> int main() { printf("hello, world!\n"); return

    0; } Sample C++
  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
  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
  31. Wasm Module JavaScript Document Fetch Execute

  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
  33. Common Misconceptions

  34. WebAssembly runs inside its own separate Virtual Machine In the

    browser, shared the same runtime with JS
  35. WebAssembly runs inside a separate thread Uses the same execution

    thread as with JavaScript
  36. WebAssembly directly runs on the processor It is platform agnostic.

    Runs through JS Engine
  37. WebAssembly will replace JavaScript It provides to near-native performance for

    heavy processes. Not to created to replace but work along with JS
  38. Resources: https://developer.mozilla.org/en-US/docs/WebAssembly/ Concepts https://webassembly.org/

  39. Thank you