WebAssembly - is it the future for the Web?

WebAssembly Is it the future for the Web?

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

HTML initially released in 1993

JavaScript is first appeared at the end of 1995

CSS initially released at the end of 1997

<HTML /> CSS {} JS ()

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…

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

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

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

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.

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 <stdio.h> 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

WebAssembly - is it the future for the Web?

WebAssembly - is it the future for the Web?

More Decks by Bilal Çınarlı

Other Decks in Technology

Featured

Transcript