WebAssembly: In a Nutshell

WebAssembly
WASM — In a Nutshell

about this guy
● Juhun “RangHo” Lee
● Sogang University Undergraduate
○ Dept. of Computer Science and Engineering
● Professional Procrastinator
● Commits bullshits for living
● Things I am interested in:
○ Programming Language Design
○ Computational Linguistics
○ System Programming
○ Game Programming
○ ...and many more
Find me at:
- Twitter @RangHo_777
- GitHub @RangHo

WebAssembly a.k.a. wasm
● WebAssembly = Web + Assembly
○ Web = Browser-based
○ Assembly = Low-level machine code
● Therefore, WebAssembly is a browser-based low-level machine code.

hold up right there
something’s not right
Machine code + Web browser = WTF
Assembly is notorious for having:
Unintelligible mess of instructions 🠞
Code too raw to understand 🠞
Weird data storage called registers 🠞
Instruction pointer that jumps around
like a 5-year-old child 🠞

ok, what about wasm?
● WebAssembly is a specification of a virtual machine (VM)
○ JVM for Java, Kotlin, Scala, Groovy, etc.
○ CLR for C#, Visual Basic .NET, F#, etc.
○ And many many more (LLVM, Parrot, BEAM, Dalvik…)
● Maintained by W3C WebAssembly Working Group
● Compiled “assembly codes” are run in a sandbox of web browser
● Requires a “glue code” written in JavaScript
○ WebAssembly ⟺ JavaScript (DOM) ⟺ View

how wasm works
● WebAssembly is a stack-based virtual machine
○ Everything is put into a stack
○ cf. register-based virtual machine
○ e.g. JVM, CLR, Python VM, etc.
● 4 fundamental primitive types available
○ i32 - 32-bit integer
○ i64 - 64-bit integer
○ f32 - 32-bit floating point decimal
○ f64 - 64-bit floating point decimal
● Uses S-expressions to represent a code (like Lisp) (not really)
Pretty boring stuff…

web asm vs. real asm
(func $fibonacci (param $n i32) (result i32)
(if (i32.eq (get_local $n) (i32.const 1))
(then (return (i32.const 1))))
(if (i32.eq (get_local $n) (i32.const 2))
(then (return (i32.const 1))))
(i32.add
(call $fibonacci
(i32.sub (get_local $n) (i32.const 1)))
(call $fibonacci
(i32.sub (get_local $n) (i32.const 2)))))
fibonacci:
mov eax, [esp+4]
cmp eax, 1
ja fibonacci_recurse
mov eax, 1
ret
fibonacci_recurse:
push ebx
dec eax
push eax
call fibonacci
mov ebx, eax
dec [esp]
add eax, ebx
add esp, 4
pop ebx

once upon a time…
● JavaScript is the only language that all
major browsers support
○ JavaScript existed since Netscape
○ V8, SpiderMonkey, JavaScriptCore…
● Interpreted, dynamically typed language
○ Portability is awesome!
○ Yet there is a massive problem…
JavaScript is slow as hell.

if interpretation is too slow…
Ignition and TurboFan JIT Pipeline of Chrome’s V8 Engine.
● “If interpretation is too slow, we can
compile the code!”
● Just-in-time Compilation:
Translation of frequently used code
segment to machine code in order to
improve performance
● JIT compiler makes many assumptions
● Here arises a new problem…
There are so many exceptions that
JIT compiler becomes useless!

Humans cause
inefficiencies.
Thus, we don’t
write JavaScript.

two ways to solve this problem
The Firefox Way The Chrome Way

we don’t write JavaScript, we target it.
● Runtime type inference for JavaScript
getting harder and harder
“What if we target JavaScript from other
statically typed languages…?”
Project Emscripten and asm.js
● asm.js – a strict subset of JavaScript,
where browsers can optimize before
running
● Emscripten – LLVM backend that
compiles C source code to asm.js

● The fact that JavaScript is not compiled is
an unfixable performance sacrifice
“What if we run native code on web
browsers…?”
aw shit here we go again
we don’t write JavaScript, we go native.
Native Client a.k.a. NaCl
● NaCl – a set of C/C++ libraries that allows
Chrome to run native binaries
● Failed spectacularly, switched to asm.js

not writing JS is good and all, but…
● We are at a point where compiling C code to JavaScript is seriously
considered as a viable option
○ System engineers: what the fuck
“What if we define a virtual machine, and compile programming languages
for that machine?”
WebAssembly
● Basically a computer, but on a web browser
● Performance is on par with native binaries (!!!)

wasm is now stable!
● All major browsers now support WebAssembly out of the box
○ Reached cross-browser consensus on March 2017
○ Microsoft Edge since Version 16 (October 2017)
○ Mozilla Firefox since Version 52 (March 2017)
○ Google Chrome since Version 57 (March 2017)
○ Apple Safari since Version 11 (September 2017)
○ Opera Browser since Version 44 (March 2017)
○ Internet Explorer Not supported. What did you expect?

wasm, the brand-new and hipster version of Java
● Not only browsers, Node.js started supporting WebAssembly
○ Current method of importing WebAssembly
■ Read .wasm file
■ Instantiate WebAssembly VM
■ Create and populate shared memory
○ Experimental method of importing WebAssembly
■ import <component> as <name> from "/path/to/wasm";
● Cross-platform, JavaScript-based programming is possible

name your favourite; it’s probably supported
Some of languages that can be used with (or compiled to) WebAssembly
● C/C++ with Emscripten
● Kotlin with Kotlin/Native
● Swift with SwiftWasm
● C# with Mono or Uno Platform or Blazor
● Java TeaVM
● Python Pyodide
● PHP PIB
● Rust with the official compiler (rustc)
🠞 More about this later

say goodbye to flash games
● WebAssembly is already performant enough to run games
○ Although internet speed plays a huge role in game playability
○ Poor internet connection = it takes eternity to load a game
● In case of Unity:
○ Started supporting browser-based games via external program
○ Migrated to JavaScript-based WebGL player
○ Currently in progress of migrating to WebAssembly player
● In case of Unreal Engine
○ UE4 started supporting HTML5 build since March 2017
○ Showcased Zen Garden demo, originally developed for Metal API

let’s try out some demos
WebAssembly port of Doom, friend of all
programmers in the world.
Funky Karts, a kart game build ground-up from
C++, targeting WebAssembly.

When ask about
wasm, they
always talk about
Rust.
What about it?

what is rust?
● New programming language!
○ First version appeared on July of 2010
● Actively developed by Mozilla Foundation
● StackOverflow’s “most loved programming language” winner since 2016
● Object-oriented + Functional paradigm
● Designed to replace C/C++
● Guarantees memory safety at compile time (= no segmentation fault)

guarantee of raw memory safety???
● Explicit “ownership” of values
● Extensive “Borrow Checker™”
that manages ownership
“I will make sure that no one
touches your values!”
● This eliminates most memory
errors caused by ownership
mismatch
● No need to malloc() and free()
memories!

what about performance?
🠞 Python 3
25ms to process
100,000 numbers
🠞 C/C++
700µs to process
100,000 numbers
🠞 Rust
670µs to process
100,000 numbers

why rust is a big deal for wasm
● Rust is one of the first languages to support WebAssembly
● Existing Rust programs can be easily compiled to WebAssembly
○ wasm_bindgen crate generates JavaScript bind source code
● LLVM-based compiler toolchain
● Currently, best languages to create WebAssembly binaries are:
○ C/C++
○ AssemblyScript (subset of TypeScript)
○ Rust

why don’t we try out right now?
https://webassembly.studio/

wasm is not complete by any means
● Although WebAssembly is stable, it requires many improvements
● Current limitations:
○ Standards are fragmented into two different branches
○ Only types with fixed length can be sent as function parameters
○ Nonexistent threading
○ Exception Handler
○ Reference type is missing
○ Garbage Collection might be needed for higher-level operations
○ SIMD causes unnecessary overhead
○ WebAssembly DOM API

still it is usable, right?
● WebAssembly Binary Version is frozen at 0x01
○ Current specification is final
○ Other features are added in a backwards-compatible manner
● Fast enough to run 3D games that draw scenes in <canvas>
● More and more languages start targeting WebAssembly
○ https://github.com/appcypher/awesome-wasm-langs
● Web programming is slowly diverting from JavaScript
○ Microsoft’s Blazor makes C# as the main scripting engine
○ JavaScript virtual DOM + C++/gccx = WebAssembly single-page web app (?!)

if I dare make speculations…
● WebAssembly will be the new Java
○ Cross-platform
○ Extendable
○ I mean Java already runs on WebAssembly…
● Browser-based gaming is possible
○ Streaming is yet inaccessible to most people (e.g. Google Stadia)
○ With new APIs like WebGPU coming soon, WebAssembly will create new markets

project
make pini great again
● PiniEngine is was a visual novel engine
based on cocos2d-x
○ The company developing this
went bankrupt
○ “We leave PiniEngine to the
Open Source community” what
● Korean-based scripting DSL
○ Pretty revolutionary
● Codebase is fascinating
● Complete C++ reimplementation
● Web player with WebAssembly
https://github.com/RangHo/pini-engine

project
scratch2wasm
● Scratch is a block-based educational
programming language
● Powerful enough to implement a parser
“What if I make a Scratch compiler that
targets real ELF binary…?”
● It’s more like LLVM’s scratch frontend
● LLVM-based? WebAssembly!
● It’s a joke project but hey it’s funny
https://github.com/RangHo/scratchc

Thank you.Additional questions?
hello@rangho.me

WebAssembly: In a Nutshell

Recommended

More Related Content

What's hot (20)

Similar to WebAssembly: In a Nutshell (20)

Recently uploaded (20)

WebAssembly: In a Nutshell