+ - 0:00:00
Notes for current slide
Notes for next slide

wasm+rust

From Rust to Webpack: WebAssembly Fundamentals

Steve Klabnik, @steveklabnik

1 / 41

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!

2 / 41

Part I

LET'S GET HYPE

3 / 41

About platforms

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

4 / 41

About platforms

Other platforms were local, then networked.

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

5 / 41

About platforms

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

6 / 41

About platforms

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

7 / 41

Next steps for the web platform

Where are we going?

8 / 41

Next steps for the web platform

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

9 / 41

Next steps for the web platform

JavaScript for the low level stuff?

Sort of, but not really.

10 / 41

Next steps for the web platform

JavaScript was not designed for this task.

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

11 / 41

Next steps for the web platform

  • Overhead: Download, Parse, Compile, Execute
  • No integers?
  • Too complex (885 pages)
12 / 41

Enter WebAssembly

Enter WebAssembly

  • Built exactly for this task.
  • Tiny binaries. Integers.
  • Spec: 165 pages
13 / 41

Enter WebAssembly

Previously, the web could only handle high level tasks.

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

14 / 41

Enter WebAssembly

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

15 / 41

Enter WebAssembly

Aside: isn't this Java Applets? NaCL?

NO

  • One VM
  • Not tied to one language
  • Proper platform integration
16 / 41

Enter WebAssembly

SPAs shifted some of the application to the client.

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

17 / 41

About WebAssembly

What is WebAssembly, anyway?

Extremely misunderstood 🙁

18 / 41

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
19 / 41

About WebAssembly

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

textual representation

20 / 41

About WebAssembly

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

21 / 41

About WebAssembly

It's not designed to replace JavaScript

22 / 41

About WebAssembly

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

23 / 41

About WebAssembly

It has no GC integration

This means, C, C++, and Rust

JavaScript does not compile to wasm

24 / 41

About WebAssembly

You can do cool things!

Rust in the browser

25 / 41

About WebAssembly

You can do cool things!

buddhabrot

26 / 41

About WebAssembly

Traditional web applications will always be a thing.

This is about expansion, not replacement.

27 / 41

About WebAssembly

The Birth & Death of JavaScript

A talk by Gary Bernhardt from PyCon 2014

28 / 41

Part II

Your first wasm

29 / 41

Part III

Let's dig in!

31 / 41

Digging in

Text vs Binary format

There are two!

33 / 41

Digging in

✨ The magic number ✨

00 61 73 6D

34 / 41

Digging in

Sections (non-exhaustive)

  • Function Section
  • Type Section
  • Code Section
  • Start Section
  • Import Section
  • Export Section
35 / 41

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

36 / 41

Digging in

Running something at the start

The start section runs a function when the module is loaded

37 / 41

Digging in

Wasm <-> JS

The import sections declare functions you need

The export sections declare functions you give

38 / 41

Digging in

Memory

A "byte" means 8 bits

Memory is like a giant array

40 / 41

Digging in

Embedding Environment

More than just browsers!

41 / 41

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!

2 / 41
Paused

Help

Keyboard shortcuts

, , Pg Up, k Go to previous slide
, , Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow