React, Powered by WebAssembly

React,
Powered by
WebAssembly
Jay Phelps | @_jayphelps

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

Jay Phelps
Chief Software Architect |

Support, Training, Mentorship, and More
https://www.thisdot.co/

So...what is WebAssembly? aka wasm

Efﬁcient, low-level bytecode for the Web

Fast to load and execute

0x6a01101010

Intended (mostly) as a compilation target

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

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

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 be all around slower

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

But other languages soon!
Things like Java, OCaml, and even new ones

TurboScript

class Coordinates {
x: float32;
y: float32;
z: float32;
constructor(x: float32, y: float32, z: float32): Vect3 {
this.x = x;
this.y = y;
this.z = z;
}
}
export function example() {
let position = new Coordinates(x, y, z);
// later
delete position;
}

When should I target WebAssembly?

Heavily CPU-bound number computations

Games

You'll likely consume compiled
WebAssembly binaries even sooner

Oxidizing Source Maps with Rust and WebAssembly
https://hacks.mozilla.org/2018/01/oxidizing-source-maps-with-rust-and-webassembly/
5.89 times faster!

d3-wasm-force
https://github.com/ColinEberhardt/d3-wasm-force
const simulation = d3wasm.forceSimulation(graph.nodes, true)
.force('charge', d3wasm.forceManyBody())
.force('center', d3wasm.forceCenter(width / 2, height / 2))
.force('link', d3wasm.forceLink().links(graph.links).id(d => d.id))
.stop();

Other use cases are imminent

What was that binary stuff?

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

03 82 80 80 80 0
81 80 80 80 00 0
80 80 00 01 97 8
00 20 00 41 00 4

Binary can be a little intimidating

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

Tooling will eventually make it a non-issue

Textual representation to the rescue!

(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
)

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
Stack

last in, ﬁrst out order (LIFO)

stack machine: instructions on a stack

i32.add 0x6a
opcode mnemonics
01101010

i32.const 1
i32.const 2
i32.add

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

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

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

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

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

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

i32.const 1
i32.const 2
i32.addi32.add
stack
1
2

i32.const 1
i32.const 2
i32.addi32.add
stack
3

i32.const 1
i32.const 2
i32.add

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

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

i32.const 3
call $log

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

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

(call $log
(i32.add
(i32.const 1)
(i32.const 2)
)
)
s-expressions

(call $log
(i32.add
(i32.const 1)
(i32.const 2)
)
)
s-expressions
Yep, looks like Lisp

What's missing?

Direct access to Web APIs

Direct access to Web APIs
You have call into JavaScript, right now

Garbage collection

Garbage collection
necessary for better interop with JavaScript and WebIDL

Multi-threading

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

There's more, but advancing very quickly!

How is this going to impact React?

React could create a WebAssembly reconciler for Fiber

Fiber

• pause work and come back to it later
Fiber

• assign priority to different types of work
Fiber

• reuse previously completed work
Fiber

• reuse previously completed work
• abort work if it's no longer needed
Fiber

Lin Clark - A Cartoon Intro to Fiber
https://goo.gl/bXsYhY

Ember’s “Glimmer” VM is being written in Rust
compiled to WebAssembly

React components could run in WebAssembly
e.g. writing them in Reason

This is possible right now, but not yet ideal
missing direct access to the DOM

React.js?

How do I get started now?

webassembly.org

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

emcc main.c -s WASM=1 -o app.html

Webpack is adding support (!!!)

Webpack is adding support (!!!)
They received a $125,000 grant from MOSS

import('./add.wasm').then(module => {
const result = module.add(1, 2);
console.log(result);
});

Imagine an rust-loader / reason-loader

Supported in all modern browsers

The revolution is just beginning

Thanks!
@_jayphelps

React, Powered by WebAssembly

More Related Content

Similar to React, Powered by WebAssembly (20)

More from Jay Phelps (7)

Recently uploaded (20)

React, Powered by WebAssembly