WebAssembly Is it the future for the Web?

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

No content

HTML initially released in 1993

JavaScript is first appeared at the end of 1995

CSS initially released at the end of 1997

In the beginning Web was mainly used for displaying content

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

We did not stop there!

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

No content

JS limitations on performance

WebAssembly

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.

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

It works with inside and outside of the Browser

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

No content

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.

No content

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

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

How to Use?

Compiling your low-level code to WebAssembly

➡ 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

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

(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

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

Wasm Module JavaScript Document Fetch Execute

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

Common Misconceptions

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

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

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

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

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

Thank you