Wasm Workshop: Part 1

class: center, middle

![wasm+rust](img/rustwebassembly.png)
# From Rust to Webpack: .bold[WebAssembly Fundamentals]

### Steve Klabnik, @steveklabnik

---
class: left, top

# .slide-header[Agenda]

* 09:05 - 09:30: WASM overview
* 09:30 - 10:00: a WASM "hello world"
* 10:00 - 10:30: explain previous in depth

Feel free to jump in with questions at any point!

---
class: center, middle

# .slide-header[Part I]

## LET'S GET HYPE

---
class: center, middle
# .slide-header[About platforms]

## The web platform is unusual in that it was developed out of order and it historically has had missing pieces

---
class: left, top
# .slide-header[About platforms]

## Other platforms were local, then networked.

## The web platform is networked, and only now becoming local.

---
class: left, top
# .slide-header[About platforms]

# The browser was a *viewport* into an *application on the server*.

---
class: left, top
# .slide-header[About platforms]

# This limits the kind of applications that we can build on the web platform.

---
class: left, top
# .slide-header[Next steps for the web platform]

# Where are we going?

---
class: left, top
# .slide-header[Next steps for the web platform]

## Further developing the web platform's capabilities requires filling in the missing pieces.

---
class: left, top
# .slide-header[Next steps for the web platform]

# JavaScript for the low level stuff?

## Sort of, but not *really*.

---
class: left, top
# .slide-header[Next steps for the web platform]

# JavaScript was not designed for this task.

## "Compile to JS" works, but has significant drawbacks.

---
class: left, top
# .slide-header[Next steps for the web platform]

* Overhead: Download, Parse, Compile, Execute
* No integers?
* Too complex (885 pages)

---
class: left, top
# .slide-header[Enter WebAssembly]

# Enter WebAssembly

* Built exactly for this task.
* Tiny binaries. Integers.
* Spec: 165 pages

---
class: left, top
# .slide-header[Enter WebAssembly]

## Previously, the web could only handle *high level* tasks.

## With wasm, the web platform can handle *low level* tasks.

---
class: left, top
# .slide-header[Enter WebAssembly]

## The Web Platform is closing in on application spaces previously only possible on other platforms.

---
class: left, top
# .slide-header[Enter WebAssembly]

# Aside: isn't this Java Applets? NaCL?

## NO

* One VM
* Not tied to one language
* Proper platform integration

---
class: left, top
# .slide-header[Enter WebAssembly]

## SPAs shifted *some* of the application to the client.

## This work enables *all* of the application to be on the client.

---
class: left, top
# .slide-header[About WebAssembly]

# What *is* WebAssembly, anyway?

## Extremely misunderstood 🙁

---
class: left, top
# .slide-header[About WebAssembly]

# Factorial

## Wasm is a compact, binary format:

```
20 00 42 00 51 04 7e 42 01 05 20
00 20 00 42 01 7d 10 00 7e 0b
```

---
class: left, top
# .slide-header[About WebAssembly]

## It also has a text format, so you can "view source" easily.

![textual representation](img/text.png)

---
class: left, top
# .slide-header[About WebAssembly]

## It's designed to be small, efficient, and integrate with existing JS VMs.

---
class: left, top
# .slide-header[About WebAssembly]

## It's *not* designed to replace JavaScript

---
class: left, top
# .slide-header[About WebAssembly]

## It has limitations, such as not being able to access the DOM

---
class: left, top
# .slide-header[About WebAssembly]

## It has no GC integration

### This means, C, C++, and Rust

#### JavaScript does *not* compile to wasm

---
class: left, top
# .slide-header[About WebAssembly]

## You can do cool things!

![Rust in the browser](img/rustinthebrowser.png)

---
class: left, top
# .slide-header[About WebAssembly]

## You can do cool things!

![buddhabrot](img/buddha.png)

---
class: left, top
# .slide-header[About WebAssembly]

## Traditional web applications will always be a thing.

### This is about *expansion*, not *replacement*.

---
class: left, top
# .slide-header[About WebAssembly]

# The Birth & Death of JavaScript

## [A talk by Gary Bernhardt from PyCon 2014](https://www.destroyallsoftware.com/talks/the-birth-and-death-of-javascript)

---
class: center, middle

# .slide-header[Part II]

## Your first wasm

---
class: left, top
# .slide-header[Your first wasm]

## Let's add one to a number!

#### https://github.com/WebAssembly/wabt

#### https://cdn.rawgit.com/WebAssembly/wabt/aae5a4b7/demo/wat2wasm/index.html

---
class: center, middle

# .slide-header[Part III]

## Let's dig in!

---
class: left, top
# .slide-header[Digging in]

# Explore

#### https://wasdk.github.io/wasmcodeexplorer/

---
class: left, top
# .slide-header[Digging in]

# Text vs Binary format

### There are two!

---
class: left, top
# .slide-header[Digging in]

# ✨ The magic number ✨

## <code>00 61 73 6D</code>

---
class: left, top
# .slide-header[Digging in]

# Sections (non-exhaustive)

* Function Section
* Type Section
* Code Section
* Start Section
* Import Section
* Export Section

---
class: left, top
# .slide-header[Digging in]

# Defining functions

### The function, type, and code sections define functions

### type sections list type signatures

### code sections list code

### function sections tie them together

---
class: left, top
# .slide-header[Digging in]

# Running something at the start

### The start section runs a function when the module is loaded

---
class: left, top
# .slide-header[Digging in]

# Wasm <-> JS

### The import sections declare functions you need

### The export sections declare functions you give

---
class: left, top
# .slide-header[Digging in]

# Instructions

#### https://github.com/sunfishcode/wasm-reference-manual/blob/master/WebAssembly.md#instructions

---
class: left, top
# .slide-header[Digging in]

# Memory

### A "byte" means 8 bits

### Memory is like a giant array

---
class: left, top
# .slide-header[Digging in]

# Embedding Environment

### More than just browsers!