WebAssembly neither Web nor Assembly, but Revolutionary Jay Phelps | - - PowerPoint PPT Presentation

▶
webassembly
SMART_READER_LITE
LIVE PREVIEW

WebAssembly neither Web nor Assembly, but Revolutionary Jay Phelps | - - PowerPoint PPT Presentation

Sep 02, 2022 28 likes •1.33k views

WebAssembly neither Web nor Assembly, but Revolutionary Jay Phelps | @_jayphelps The WebAssembly revolution has begun Jay Phelps | @_jayphelps Jay Phelps Chief Software Architect | previously @_jayphelps Support, Dev Rel, Staff Augmentation,

slide-1
SLIDE 1

WebAssembly

neither Web nor Assembly, but Revolutionary

Jay Phelps | @_jayphelps

slide-2
SLIDE 2

Jay Phelps | @_jayphelps

The WebAssembly revolution has begun

slide-3
SLIDE 3

Chief Software Architect |

previously

Jay Phelps

@_jayphelps

slide-4
SLIDE 4

Support, Dev Rel, Staff Augmentation, Mentorship, and more

www.thisdot.co

slide-5
SLIDE 5

Jay Phelps | @_jayphelps

So...what is WebAssembly? aka Wasm

slide-6
SLIDE 6

Jay Phelps | @_jayphelps

Efficient, safe, low-level bytecode for the Web

slide-7
SLIDE 7

Jay Phelps | @_jayphelps

Efficient, safe, low-level bytecode for the Web

slide-8
SLIDE 8

Jay Phelps | @_jayphelps

Fast to load and execute

slide-9
SLIDE 9

Jay Phelps | @_jayphelps

Streaming compilation

compiled to machine code faster than it downloads

slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12 (func $0 (type 0) i32.const 0 i32.load ) (func $1 (type 0) i32.const 0 i32.load ) (func $2 (type 0) i32.const 0 i32.load ) (func $3 (type 0) i32.const 0 i32.load )

.wasm

slide-13
SLIDE 13 (func $0 (type 0) i32.const 0 i32.load ) (func $1 (type 0) i32.const 0 i32.load ) (func $2 (type 0) i32.const 0 i32.load ) (func $3 (type 0) i32.const 0 i32.load )

.wasm machine code

slide-14
SLIDE 14 (func $0 (type 0) i32.const 0 i32.load ) (func $1 (type 0) i32.const 0 i32.load ) (func $2 (type 0) i32.const 0 i32.load ) (func $3 (type 0) i32.const 0 i32.load )

.wasm machine code

slide-15
SLIDE 15 wasm-function[0]: sub rsp, 8 mov eax, dword ptr [r15] nop add rsp, 8 wasm-function[1]: sub rsp, 8 mov eax, dword ptr [r15] nop add rsp, 8 wasm-function[2]: sub rsp, 8 mov eax, dword ptr [r15] nop add rsp, 8 wasm-function[3]: sub rsp, 8 mov eax, dword ptr [r15] nop add rsp, 8

.wasm machine code

slide-16
SLIDE 16

Jay Phelps | @_jayphelps

Efficient, safe, low-level bytecode for the Web safe

slide-17
SLIDE 17

Jay Phelps | @_jayphelps

Sandboxed and designed with security in mind

Control-flow integrity checks, stack protection, dynamic dispatch table separate from linear memory

slide-18
SLIDE 18

Jay Phelps | @_jayphelps

However, does not prevent all classes of exploits

Code reuse, side channel, race conditions, etc

slide-19
SLIDE 19

Jay Phelps | @_jayphelps

Efficient, safe, low-level bytecode for the Web low-level bytecode

slide-20
SLIDE 20

Jay Phelps | @_jayphelps

WebAssembly is a portable, binary instruction set for a virtual machine

slide-21
SLIDE 21

Jay Phelps | @_jayphelps

0x6a

01101010

(the i32.add instruction)

slide-22
SLIDE 22

Jay Phelps | @_jayphelps

Intended (mostly) as a compilation target

slide-23
SLIDE 23

int factorial(int n) { if (n == 0) { return 1; } else { return n * factorial(n - 1); } }

slide-24
SLIDE 24

int factorial(int n) { if (n == 0) { return 1; } else { return n * factorial(n - 1); } }

00 61 73 6D 01 00 00 00 01 86 80 80 80 00 01 60 01 7F 01 7F 03 82 80 80 80 00 01 00 06 81 80 80 80 00 00 0A 9D 80 80 80 00 01 97 80 80 80 00 00 20 00 41 00 46 04 40 41 01 0F 0B 20 00 41 01 6B 10 00 20 00 6C 0B

slide-25
SLIDE 25

Jay Phelps | @_jayphelps

Efficient, safe, low-level bytecode for the Web

slide-26
SLIDE 26

Jay Phelps | @_jayphelps

How did we get here?

slide-27
SLIDE 27

Jay Phelps | @_jayphelps

Primary goals: languages other than JavaScript and great—ideally improved—performance

slide-28
SLIDE 28

Jay Phelps | @_jayphelps

Java Applets

Never truly integrated into browsers

slide-29
SLIDE 29

Jay Phelps | @_jayphelps

Why not integrate the JVM or CLR?

misaligned goals, mostly related to validation/compiling

slide-30
SLIDE 30

Jay Phelps | @_jayphelps

Portable Native Client (PNaCl)

lead by Google

slide-31
SLIDE 31

Jay Phelps | @_jayphelps

asm.js

lead by Mozilla

slide-32
SLIDE 32

size_t strlen(char *ptr) { char *curr = ptr; while (*curr != 0) { curr++; } return (curr - ptr); }

"use asm" function strlen(ptr) { ptr = ptr|0; var curr = 0; curr = ptr; while (MEM8[curr]|0 != 0) { curr = (curr + 1)|0; } return (curr - ptr)|0; }

asm.js C

slide-33
SLIDE 33

!

Jay Phelps | @_jayphelps

WebAssembly !

slide-34
SLIDE 34

Jay Phelps | @_jayphelps

WebAssembly is an unprecedented collaboration

slide-35
SLIDE 35

Jay Phelps | @_jayphelps

The first open and standardized bytecode

slide-36
SLIDE 36

Jay Phelps | @_jayphelps

Is it going to kill JavaScript?

slide-37
SLIDE 37

Jay Phelps | @_jayphelps

Is it going to kill JavaScript?

slide-38
SLIDE 38

Jay Phelps | @_jayphelps

Nope!

slide-39
SLIDE 39

Jay Phelps | @_jayphelps

Will we compile JavaScript to WebAssembly?

slide-40
SLIDE 40

Jay Phelps | @_jayphelps

JavaScript is an extremely dynamic language

slide-41
SLIDE 41
slide-42
SLIDE 42

Jay Phelps | @_jayphelps

Fully spec compliant JavaScript compiled to WebAssembly would be slower

slide-43
SLIDE 43

Jay Phelps | @_jayphelps

…but a strict subset of JavaScript could be fast!

slide-44
SLIDE 44
slide-45
SLIDE 45
slide-46
SLIDE 46

Jay Phelps | @_jayphelps

WebAssembly v1 MVP is best suited for languages like C/C++ and Rust

slide-47
SLIDE 47

Jay Phelps | @_jayphelps

Ideal for relatively low-level, system languages

Very little dynamic features at run-time, no GC

slide-48
SLIDE 48

Jay Phelps | @_jayphelps

Some modern features of C++ don’t perform ideal

slide-49
SLIDE 49

Jay Phelps | @_jayphelps

Exceptions are the most common example

slide-50
SLIDE 50

Jay Phelps | @_jayphelps

But other languages are already supported, and more planned

Things like Go, .NET, Java, OCaml, and even new ones

slide-51
SLIDE 51

Jay Phelps | @_jayphelps

WebAssembly will impact language design and implementation

slide-52
SLIDE 52

Jay Phelps | @_jayphelps

The Web requires unique considerations

slide-53
SLIDE 53

Jay Phelps | @_jayphelps

Rust team has specifically called out WebAssembly as a priority

slide-54
SLIDE 54

Jay Phelps | @_jayphelps

File sizes

as well as lazy-loading/code splitting, caching, etc

slide-55
SLIDE 55

Jay Phelps | @_jayphelps

Shared libraries

Traditional platforms like iOS/Android/macOS/ Windows have more robust stdlibs and UI toolkits

slide-56
SLIDE 56

Jay Phelps | @_jayphelps

Offline

Caching story much more complex than desktop

slide-57
SLIDE 57

Jay Phelps | @_jayphelps

Interop with JavaScript

Languages which better interop with JS have major advantage

slide-58
SLIDE 58

Jay Phelps | @_jayphelps

Promising: Dart, Elm, Reason

Languages designed for the Web

slide-59
SLIDE 59

Jay Phelps | @_jayphelps

a TypeScript-like language?

AssemblyScript is an early example

slide-60
SLIDE 60

Jay Phelps | @_jayphelps

export function factorial(n: i32): i32 { if (n == 0) { return 1; } else { return n * factorial(n - 1); } }

AssemblyScript

slide-61
SLIDE 61

Jay Phelps | @_jayphelps

When should I target WebAssembly right now?

slide-62
SLIDE 62

Jay Phelps | @_jayphelps

Heavily CPU-bound number computations

slide-63
SLIDE 63

Jay Phelps | @_jayphelps

Games

both Unity and Unreal Engine offer support

slide-64
SLIDE 64

Jay Phelps | @_jayphelps

Using existing portable code

e.g. video/audio decoders and other processing

slide-65
SLIDE 65

Jay Phelps | @_jayphelps

bcrypt OpenCV mcl bls web-dsp hunspell XSalsa20 GDAL SPHINCS NTRU xxHash RLWE McEliece Zopfli SIDH ttf2woff2

slide-66
SLIDE 66

Jay Phelps | @_jayphelps

Zoom for Web client

Video conferencing powered by WebAssembly, video/audio decoding off the main thread

slide-67
SLIDE 67

react-native-dom

(not react-native-web)

slide-68
SLIDE 68

Jay Phelps | @_jayphelps

Web UI developers are probably already using WebAssembly without knowing it!

slide-69
SLIDE 69

Jay Phelps | @_jayphelps

source-map npm package

10.9x faster!

used by Firefox, Babel, create-react-app, LESS, etc

slide-70
SLIDE 70

Jay Phelps | @_jayphelps

Other use cases are just around the corner

slide-71
SLIDE 71

Jay Phelps | @_jayphelps

What was that binary stuff?

slide-72
SLIDE 72

int factorial(int n) { if (n == 0) { return 1; } else { return n * factorial(n - 1); } }

00 61 73 6D 01 00 00 00 01 86 80 80 80 00 01 60 01 7F 01 7F 03 82 80 80 80 00 01 00 06 81 80 80 80 00 00 0A 9D 80 80 80 00 01 97 80 80 80 00 00 20 00 41 00 46 04 40 41 01 0F 0B 20 00 41 01 6B 10 00 20 00 6C 0B

slide-73
SLIDE 73

00 61 73 6D 01 00 00 00 01 86 80 80 80 00 01 60 01 7F 01 7F 03 82 80 80 80 00 01 00 06 81 80 80 80 00 00 0A 9D 80 80 80 00 01 97 80 80 80 00 00 20 00 41 00 46 04 40 41 01 0F 0B 20 00 41 01 6B 10 00 20 00 6C 0B

slide-74
SLIDE 74

00 61 73 6D 01 00 00 00 01 86 80 80 80 00 01 60 01 7F 01 7F 03 82 80 80 80 00 01 00 06 81 80 80 80 00 00 0A 9D 80 80 80 00 01 97 80 80 80 00 00 20 00 41 00 46 04 40 41 01 0F 0B 20 00 41 01 6B 10 00 20 00 6C 0B

slide-75
SLIDE 75

00 61 73 6D 01 00 00 00 01 86 80 80 80 00 01 60 01 7F 01 7F 03 82 80 80 80 00 01 00 06 81 80 80 80 00 00 0A 9D 80 80 80 00 01 97 80 80 80 00 00 20 00 41 00 46 04 40 41 01 0F 0B 20 00 41 01 6B 10 00 20 00 6C 0B

slide-76
SLIDE 76

86 80 80 80 00 01 60 01 7F 01 7F 03 82 80 80 80 00 01 00 06 81 80 80 80 00 00 0A 9D 80 80 80 00 01 97 80 80 80 00 00 20 00 41 00 46 04 40 41 01 0F 0B 20 00 41 01

slide-77
SLIDE 77

86 80 80 80 00 01 60 01 7F 01 7F 03 82 80 80 80 00 01 00 06 81 80 80 80 00 00 0A 9D 80 80 80 00 01 97 80 80 80 00 00 20 00 41 00 46 04 40 41 01 0F 0B 20 00 41 01

slide-78
SLIDE 78

86 80 80 80 00 01 60 01 7F 01 7F 03 82 80 80 80 00 01 00 06 81 80 80 80 00 00 0A 9D 80 80 80 00 01 97 80 80 80 00 00 20 00 41 00 46 04 40 41 01 0F 0B 20 00 41 01

slide-79
SLIDE 79

Jay Phelps | @_jayphelps

Binary can be a little intimidating

slide-80
SLIDE 80

Jay Phelps | @_jayphelps

Protip: don't worry about it

(unless of course, you want to)

slide-81
SLIDE 81

Jay Phelps | @_jayphelps

Tooling will eventually make it a non-issue

slide-82
SLIDE 82

Jay Phelps | @_jayphelps

Textual representation to the rescue!

slide-83
SLIDE 83

Jay Phelps | @_jayphelps

(func $factorial (param $n i32) (result i32) get_local $n i32.const 0 i32.eq if $if0 i32.const 1 return end $if0 get_local $n i32.const 1 i32.sub call $factorial get_local $n i32.mul )

slide-84
SLIDE 84

Jay Phelps | @_jayphelps

(func $factorial (param $n i32) (result i32) get_local $n i32.const 0 i32.eq if $if0 i32.const 1 return end $if0 get_local $n i32.const 1 i32.sub call $factorial get_local $n i32.mul )

slide-85
SLIDE 85

Jay Phelps | @_jayphelps

Let's learn the fundamentals

slide-86
SLIDE 86

Jay Phelps | @_jayphelps

WebAssembly is a stack machine

slide-87
SLIDE 87

Jay Phelps | @_jayphelps

...what's a stack machine?

slide-88
SLIDE 88

Jay Phelps | @_jayphelps

a data structure with two operations:

push and pop

Stack

slide-89
SLIDE 89

Jay Phelps | @_jayphelps

stack machine: instructions on a stack

slide-90
SLIDE 90

Jay Phelps | @_jayphelps

Why a stack machine?

instead of AST, SSA, or register machine

slide-91
SLIDE 91

Jay Phelps | @_jayphelps

Smaller binary encoding, easier and faster single pass verification and VM implementation

slide-92
SLIDE 92

1 + 2

slide-93
SLIDE 93

i32.add 0x6a

  • pcode mnemonics

01101010

slide-94
SLIDE 94

i32.const 1 i32.const 2 i32.add

slide-95
SLIDE 95

stack

i32.const 1 i32.const 2 i32.add

slide-96
SLIDE 96

i32.const 1 i32.const 2 i32.add i32.const 1

stack

1

slide-97
SLIDE 97

i32.const 1 i32.const 2 i32.add i32.const 1

stack

1

slide-98
SLIDE 98

i32.const 1 i32.const 2 i32.add i32.const 2

stack

2 1

slide-99
SLIDE 99

i32.const 1 i32.const 2 i32.add i32.const 2

stack

2 1

slide-100
SLIDE 100

i32.const 1 i32.const 2 i32.add i32.add

stack

1 2

slide-101
SLIDE 101

i32.const 1 i32.const 2 i32.add i32.add

stack

1 2

slide-102
SLIDE 102

i32.const 1 i32.const 2 i32.add i32.add

stack

3

slide-103
SLIDE 103

i32.const 1 i32.const 2 i32.add i32.add

stack

3

slide-104
SLIDE 104

i32.const 1 i32.const 2 i32.add

Jay Phelps | @_jayphelps

slide-105
SLIDE 105

i32.const 1 i32.const 2 i32.add call $log

Jay Phelps | @_jayphelps

slide-106
SLIDE 106

Jay Phelps | @_jayphelps

What's missing?

slide-107
SLIDE 107

Jay Phelps | @_jayphelps

Direct access to Host APIs (e.g. the DOM)

no direct access to sys calls, you have to call into JavaScript

slide-108
SLIDE 108

Jay Phelps | @_jayphelps

Garbage collection

necessary for better interop with JavaScript and WebIDL (e.g. the DOM)

slide-109
SLIDE 109

Jay Phelps | @_jayphelps

Multi-threading

SharedArrayBuffer re-enabled in Chrome 68

slide-110
SLIDE 110

Jay Phelps | @_jayphelps

Single Instruction Multiple Data (SIMD)

Hardware parallelization of vector computations

slide-111
SLIDE 111

Jay Phelps | @_jayphelps

Zero-cost exceptions

someday maybe even Algebraic Effects (!!!)

slide-112
SLIDE 112

Jay Phelps | @_jayphelps

There's more, but advancing quickly!

slide-113
SLIDE 113

Jay Phelps | @_jayphelps

How do I get started?

slide-114
SLIDE 114

Jay Phelps | @_jayphelps

webassembly.org

slide-115
SLIDE 115

Jay Phelps | @_jayphelps

https://github.com/mbasso/awesome-wasm

slide-116
SLIDE 116

Supported in all modern browsers

slide-117
SLIDE 117

Jay Phelps | @_jayphelps

The revolution is just beginning

slide-118
SLIDE 118

Jay Phelps | @_jayphelps

Efficient, safe, low-level bytecode for the Web

slide-119
SLIDE 119

Jay Phelps | @_jayphelps

Efficient, safe, low-level bytecode for the Web?

slide-120
SLIDE 120

Jay Phelps | @_jayphelps

The first open and standardized bytecode

slide-121
SLIDE 121
slide-122
SLIDE 122
slide-123
SLIDE 123

Jay Phelps | @_jayphelps

WebAssembly is not just for the Web!

slide-124
SLIDE 124
slide-125
SLIDE 125

ewasm

Etherium-flavored WebAssembly VM for running distributed smart contracts

slide-126
SLIDE 126

rianhunter/wasmjit

VM and Linux kernel module for running WebAssembly in “ring 0”

slide-127
SLIDE 127

nebulet

microkernel that runs WebAssembly exclusively

slide-128
SLIDE 128

Jay Phelps | @_jayphelps

Efficient, safe, low-level bytecode for the Web

slide-129
SLIDE 129

Jay Phelps | @_jayphelps

Efficient, safe, low-level bytecode for the Web

slide-130
SLIDE 130

Jay Phelps | @_jayphelps

Thanks!

@_jayphelps