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 2000 20 00 42 01 7d 10 00 7e 0b19 / 41
About WebAssembly
It also has a text format, so you can "view source" easily.
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!
25 / 41
About WebAssembly
You can do cool things!
26 / 41
About WebAssembly
Traditional web applications will always be a thing.
This is about expansion, not replacement.
27 / 41
Part II
Your first wasm
29 / 41
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
30 / 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
Instructions
https://github.com/sunfishcode/wasm-reference-manual/blob/master/WebAssembly.md#instructions
39 / 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