This presentation gives an introduction and high level overview to web development with WebAssembly (WASM). At the time of this presentation WebAssembly had been recently released in all the major browsers for production. The presentation was given during a Chicago Ruby session for developers.

1. WebAssembly (WASM)
An Introduction
April 1, 2017
Brad Beiermann

2. The winner is... #3
The new logo was selected in February 2017 in a design contest
https://github.com/WebAssembly/design/issues/980

3. What is WebAssembly?
WebAssembly is a portable byte code format that has become available to the major
browsers by Google, Microsoft, Mozilla and Apple.

4. History
June 2015 - WebAssembly was first announced.
March 2016 - Google, Microsoft, Mozilla preview WebAssembly in their
browsers.
October 2016 – WebAssembly becomes a binary release candidate.
March 2017 – Begins to be shipped on-by-default in browsers.
Links of Interest:
http://webassembly.org/
https://github.com/WebAssembly
https://www.w3.org/community/webassembly/

5. Why would I need WebAssembly?
• For those of you have been looking to get binary level
support across the entire web platform stack,
WebAssembly is your ticket.
• WebAssembly is actually a binary AST format by
default.
• It is quite a departure from the payload restraints of
JavaScript.

6. The Binary Beat
• AST- Abstract Syntax Tree.
• In a compiler the AST keeps source location information
and some typing information.
• WebAssembly code essentially gets compiled to binary
AST from languages like C, Haskell, or C++ in the
browser.

7. The Advantage
• The power is being able to use other languages to compile a binary file to be
handled within the browser.
• In WASM, you can author and debug in a text format so it’s readable. We are
talking a new low-level language in the spirit of something like assembly
language.

8. Assembly Language?...Ugh! :-(

9. ...but, doesn't asm.js do this today?
• A snippet of some asm.js code.
• asm.js is a low-level subset of javascript. It appears to be direct memory register
access, but it is still being parsed by JavaScript.
• You still have all that payload overhead
• WebAssembly is bypassing all that by directly using the AST in a binary format.

10. JavaScript's Bottleneck
• JavaScript has quite a few restrictions in it’s flexibility (ie. Payload,..etc.)
• WASM works at the bare metal memory layer in the browser.
• Think about expressing things directly to threads and SIMD.
• WASM is filling in the holes left by JavaScript in terms of controlling bit/byte level
memory register control.
• You simply cannot get to that low-level with JavaScript or any other popular
library/framework in JavaScript like REACT, Angular, Embers, Vue,...etc.
BUT, one excitement around WASM is...

11. Other languages running in the browser!
"A user can compile a program of a high-level language to WebAssembly and run it
in a browser. As a first step, in the minimal viable product, the goal was to ensure
that a C/C++ program could be compiled to WebAssembly and run within the
browser."
B. Abhijith Chatra,
Sr. Software Engineer at Microsoft
Co-chairman of WASM community group

12. Up Next: Browser Compilers & Browser VMs
• They also want it to enable other programming
languages to compile efficiently to the Web.
• Again, WASM is giving you a binary executable format to
make this happen
• WebAssembly will feature a memory-safe, sandboxed
execution environment. It would access browser
functionality through the same Web APIs accessible
from JavaScript.

13. For WebAssembly to succeed we need two things:
1. Browsers to support WebAssembly natively
2. Compilers that emit WebAssembly. There are
already several out: LLVM, ilwasm, Binaryen
(written in C++), asm2wasm, Emscripten

14. Compiling a WASM Program
Step #1: Get the Emscripten Compiler and Emscripten SDK
Step #2: Enter the Emscripten compiler environment in the current
command line prompt type

15. Compiling a WASM Program (continued)
Step #3: Create a simple “hello world” program and compile it. The
compilation step is the last line.
Step #4: We can use the emrun web server provided with the
Emscripten SDK:

16. Online demo of a WASM compiler
Cross Browser Demo of Tanks (FUN!)
Some Online Demos of WASM Running
https://kripken.github.io/talks/wasm.html#/11
http://webassembly.org/demo/

17. What about mobile with WASM?

18. Where is WASM first headed?
"Rather than kill JavaScript, which is not feasible, what [we're] trying to do is respond to
real engineering problems that we’ve had with ASM.js. Loading a big game from Epic or
Unity can take 20 - 30 seconds. That’s too long. With a compressed abstract syntax tree
encoding that’s 20 times faster, just a couple seconds, that’s what you want. So there’s a
real reason for WASM, and it is a valid reason."
Brendan Eich
Author of JavaScript