WebAssembly Demystified

Jay Phelps | @_jayphelps

We're on the brink of a revolution

WebAssembly will change the way we think of "web apps"

Senior Software Engineer |

@_jayphelps

Jay Phelps

So...what is WebAssembly? aka wasm

Efficient, low-level bytecode for the Web

Fast to load and execute

0x6a01101010

Intended (mostly) as a compilation target

intfactorial(intn){if(n==0){return1;}else{returnn*factorial(n-1);}}

0061736D010000000186808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B200041016B100020006C0B

Safe and portable just like JavaScript

“shortcut to your JavaScript engine's optimizer” Ben Smith, Chrome team

Is it going to kill JavaScript?

Nope!says browser vendors

*well...maybe...some day...a really long time from now(my own opinion)

Will we compile JavaScript to WebAssembly?

JavaScript is an extremely dynamic language

Compiling JavaScript to WebAssembly would almost certainly run slower

WebAssembly is still missing things

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

But other languages soon!

TurboScript

classCoordinates{x:float32;y:float32;z:float32;

constructor(x:float32,y:float32,z:float32):Vect3{this.x=x;this.y=y;this.z=z;}}

exportfunctionexample(){letposition=newCoordinates(x,y,z);//laterdeleteposition;}

When should I target WebAssembly?

Heavily CPU-bound number computations

https://s3.amazonaws.com/mozilla-games/tmp/2017-02-21-SunTemple/SunTemple.html

Other use cases coming sooner than you might think!

You'll likely consume compiled WebAssembly binaries even sooner

What was that binary stuff?

intfactorial(intn){if(n==0){return1;}else{returnn*factorial(n-1);}}

0061736D010000000186808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B200041016B100020006C0B

86808080000160017F017F0382808080000100068180808000000A9D80808000019780808000002000410046044041010F0B20004101

Binary can be "a little" intimidating

Protip: don't worry about it(unless of course, you want to)

Textual representation to the rescue!

(func$factorial(param$ni32)(resulti32)get_local$ni32.const0i32.eqif$if0i32.const1returnend$if0get_local$ni32.const1i32.subcall$factorialget_local$ni32.mul)

Let's learn the fundamentals

WebAssembly is a stack machine language

...what's a stack machine?

a data structure with two operations:

push and pop

last in, first out order (LIFO)

stack machine: instructions on a stack

i32.add 0x6a

opcode mnemonics

01101010

i32.const1i32.const2i32.add

i32.const1

i32.const1i32.const2i32.addi32.const2

i32.const1i32.const2i32.addi32.add

i32.const1

i32.const1i32.const2i32.addi32.const2

i32.const1i32.const2i32.addi32.add

i32.const1i32.const2i32.addcall$log

Compilers usually apply optimizationsreal-world output is often less understandable to humans

i32.const3call$log

Most tooling supports an Abstract Syntax Tree (AST)still compiled and evaluated as a stack machine

(call$log(i32.add(i32.const1)(i32.const2)))

s-expressionsYep, looks like Lisp

Source map support is likely coming, eventually.

How do I get started?

https://mbebenita.github.io/WasmExplorer/

webassembly.org

emccmain.c-sWASM=1-oapp.html

Firefox / Chrome support since March

Webpack is planning to add support (!!!)

Imagine a cpp-loader / rust-loader

What's missing?

Direct access to Web APIsYou have call into JavaScript, right now

Garbage collectionnecessary for better interop with JavaScript and WebIDL

Multi-threadingSounds likely we'll get very close to "real" threads

There's more, but advancing very quickly!

The revolution is just beginning

Join the discussions!https://github.com/WebAssembly/design

Thanks!

@_jayphelps

WebAssembly Demystified

Software

Transcript of WebAssembly Demystified

WebAssembly - LLVMllvm.org/devmtg/...WebAssembly-HereBeDragons.pdf · Presentation given at the 2015 LLVM Developer’s Meeting on October ... WebAssembly also wants to adventure

Destructuring demystified

Using WebAssembly to render medical images

TRAVELING BLAZOR WEBASSEMBLY - rnielikki.github.io

Swivel: Hardening WebAssembly against Spectre

Dissection of WebAssembly module - Patrick Ventuzelopatrickventuzelo.com/wp-content/...Dissection_WebAssembly_modul… · What is WebAssembly? “Binary instruction format for a stack-based

WebAssembly - Or: How I tried to write a web app without ... › moodle › ... · What is WebAssembly? History How it works Intermezzo: Rust Rust Ecosystem What is WebAssembly? From

ɷIv therapy demystified (demystified nursing)

Programming WebAssembly with Rustmedia.pragprog.com/titles/khrust/fundamentals.pdf · For WebAssembly, you’re going to jump into the ball pit by using an online tool called WebAssembly

WebAssembly Specification · Introduction 1.1Introduction WebAssembly (abbreviated Wasm2) is a safe, portable, low-level code format designed for efﬁcient execution and compact

Supersymmetry Demystified: A Self-Teaching Guide (Demystified Series)

WebAssembly - QConSPqconsp.com/.../rodrigo-kumpera-webassembly.pdfMono e C# • Runtime existente agora em WebAssembly • Interpretador para dev-loop rápido • Compilador estático

WEBASSEMBLY illustrated - GitHub Pages...WebAssembly encodes a low-level, assembly-like programming language. WebAssembly has multiple concrete representations. (its text format and

Trigonometry Demystified

Programming WebAssembly with Rustmedia.pragprog.com › titles › khrust › things.pdf · CHAPTER 7 Exploring the Internet of WebAssembly Things The Internet of Things (IoT) is

Entropy Demystified

Towards Adaptive WebAssembly Applications: Leveraging ...

Thermodynamics - Free160592857366.free.fr/joe/ebooks/Mechanical Engineering Books... · Corporate Finance Demystified Databases Demystified Diabetes Demystified ... Thermodynamics

German Conversation DemystifiedPharmacology Demystified Physics Demystified Physiology Demystified Pre-Algebra Demystified Precalculus Demystified Probability Demystified Project Management

WebAssembly - qconsp.com · WebAssembly… • Máquina virtual de baixo nível • Executa dentro do browser • Acesso bidirecional a JS • Formato binário eﬁciente • Precompilação