1. What is WebAssembly?
2. How Does it Work?
3. Why is WebAssembly so Fast?
4. Where is it being Used?
5. How do I get Started?
Agenda:
Slide 4
Slide 4 text
What is WebAssembly?
Slide 5
Slide 5 text
WebAssembly is a new
low-level binary compile format
for programs on the web
Slide 6
Slide 6 text
Running Code
on the Web!
(Performing
Complex
Operations)
Js
C/
C++/
Rust
- WebAssembly brings
other programming
languages than Js to
the Web!
- Bringing Native
performance to Web
Slide 7
Slide 7 text
Javascript wasn’t designed to be Fast!
Problems:
- Dynamic Nature of Js in Runtime
- Code runs slow
Parsing Compile & Optimize re-optimize Execute GC
Js Engine
Profiler/
Monitor
Working of a JIT Compiler
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
WebAssembly brings new opportunities
in the space of
Portability & Performance!
Slide 10
Slide 10 text
How Does it Work?
Slide 11
Slide 11 text
Rust
C++
C IR
ARM
x86
Front-end Back-end
Running system programming code on Web!
Slide 12
Slide 12 text
WebAssembly is a
General purpose virtual architecture
(Machine Language for a conceptual machine)
Slide 13
Slide 13 text
Rust
C++
C IR
ARM
x86
Wasm
Running system programming code on Web!
clang
Rustc
Optimizer:
LLVM
LLVM Wasm
Backend
Decode Compile & Optimize Execute
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
WebAssembly is an
open standard supported
by all major browsers.
Slide 16
Slide 16 text
Why is WASM so Fast?
Slide 17
Slide 17 text
Advantages:
- Less time to download | Smaller in size &
Compact
- Decoding is faster than Parsing
- Optimized Code | Compiled ahead of time
- Better memory mgmt.
Reasons to Use WebAssembly:
Wasm provides:
1. Great Runtime Performance
2. Code Reusability
3. Portability
4. Enables new designs (WASM + Js)
Slide 24
Slide 24 text
Going to Production? Supporting Older browsers?
C/C++ ---> asm.js ---> .Wasm
(Binaryen tool)
- LLVM bytecode to Js
- Compiling Heavy Code
Slide 25
Slide 25 text
What is WebAssembly, again?
A compiler target for the Web:
1. Low-level, binary format for programs
2. Open standard with cross-browser support
3. Direct successor of asm.js
4. General purpose virtual architecture
Slide 26
Slide 26 text
Wasm
Trailheads
Great Blogs & Demos:
Zen Garden: https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.html
WebSight: https://www.websightjs.com/index.html
Unity Game: http://webassembly.org/demo/
Wasm Explorer: https://mbebenita.github.io/WasmExplorer/
Emscripten: http://kripken.github.io/emscripten-site/
Intro to WASM: https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/
Join Wasm IRC & Community Channels:
irc://irc.w3.org:6667/#webassembly
https://www.w3.org/community/webassembly/
Join Wasm Websites:
http://webassembly.org/
26