how_to( );

Ernesto Bascón Pantoja

http://oopscenities.net
 In memoriam
Salomé Pantoja Zambrana
1945 - 2019
Agenda

• What is WebAssembly?
• Some history
• Motivation
• Tools
• Emscripten, how_to
• Current developments
• Conclusions
WHAT IS WebAssembly?
 Do you know how does Java work?

.java javac .class

JVM

OS
Browser execution engine

HTML renderer

JavaScript engine

DOM

Indexed Web Web

WebRTC Web GL
DB sockets workers

Sandboxed environment
How does WebAssembly work?

Native Compiler wasm

code to wasm bytecodes

WebAssembly VM HTML renderer

JavaScript engine DOM

Indexed Web Web Web

Web GL
DB RTC sockets workers

Sandboxed environment OS
What is WebAssembly?

• Low level instruction set (bytecodes).

• Stack-based virtual machine.
• Runs inside the same sandbox used by
the JavaScript engine.
• Hardware agnostic.
• No garbage collection.
What is WebAssembly?

• Portable.
• Fast.
• Low level.
• Compilation target for several languages.
• Designed to run native code inside the
browser.
What is WebAssembly?
Benefits

• It can run programs written in native

languages inside the browser.
• Binary format ➔ small.
• Fast loading because no parsing.
• Efficient execution because of native
programming languages being used.
• Deployment easiness.
SOME HISTORY
Some history

• Kripken (Alon Zakai)

• 2013
• asm.js
asm.js
• Low-level JavaScript
subset.
• Easily optimizable.
• Simulates native memory
heap using a huge byte
array in JavaScript.
gigante de bytes.
 asm.js

Native asm.js
code compiler asm.js file

asm.js
HTML renderer
engine

DOM
JavaScript engine

Indexed Web Web Web

Web GL
DB RTC sockets workers

Sandboxed environment OS
 Google Native Client (NaCl)
• Google technology to run
native code inside the
browser in a sandboxed
environment.

PNaCl, portable through LLVM IR

bytecodes.
WebAssembly
• Same idea of asm.js, but using bytecodes
instead of JavaScript.

• Announced in 2015 by the W3C.

• Standard maintained by Mozilla, Google,

Microsoft and Apple.
MOTIVATION
 Why do we need this
Motivation thing if we already
have those “millions”
of JavaScript
frameworks that
already do anything?
Motivation
o Higher performance than JavaScript.

o Freedom of programming language choice.

o It makes porting existing libraries and legacy softare

to the web easier.

o Complex user interfaces inside the browser.

o AAA games.
TOOLS
TOOLS
• WebAssembly is not designed to be coded by humans.

• It needs to be a “compilation target” of higher level

programming languages.

• Currently supported languages:

❑ C, C++, Rust, D, Go, Kotlin

❑ Java, C#, Scala, Ruby, Perl, Python, PHP,
❑ TypeScript, Haxe, Swift
❑ This list keeps growing!
TOOLS

SUPPORTED BROWSERS
TOOLS
• Emscripten
• Toolchain and several APIs to compile software written in
C and C++ to wasm.
• Binaryen
• Transpiles asm.js to wasm.
• AssemblyScript
• Compiles TypeScript to wasm through Binaryen
• Blazor
• Converts C# and Razor to wasm.
• TeaVM
• Compiles Java to wasm
EMSCRIPTEN, how_tos
EMSCRIPTEN
• Toolchain to compile C and C++ to asm.js and wasm.
• Primary tool to develop for wasm.

• https://emscripten.org
• https://github.com/emscripten-core/emsdk
• https://webassembly.org/
EMSCRIPTEN
• Ports:
• SDL2, SDL2_ttf, SDL2_mixer, SDL2_image, freetype, icu,
zlib, bzip2, libjpeg, libpng, ogg, vorbis, cocos2d,
regal, pthreads, etc.
• Toolchain:
• Clang (LLVM C and C++ compiler) modified to use wasm as
compilation target.
EMSCRIPTEN
• APIs that provide:
• Interop between JavaScript and C++
• Interop between HTML5 events and C++
• Filesystem API
• Preamble API
• Fetch API
how_tos (with Emscripten)
• “Hello world”
• Introducing: amatista
• https://bitbucket.org/ebasconp/amatista
• Using SDL2
• Preloading files
• Audio with SDL2_mixer
how_tos (with Emscripten)
• Virtual filesystem
• Interop with JavaScript
• Persistence using IndexedDB
• Threads
• Sockets (websockets) -> Fetch API
CURRENT DEVELOPMENTS
CURRENT DEVELOPMENTS
• Adding support for more programming languages. LLVM
makes this easier.
• Microsoft “Blazor” lets to use C# in desktop apps “à
la Razor”.
• Several games already ported to WebAssembly.
• PC games ported to DOSBox and available in
archive.org.
• AutoCAD ported to wasm.
ROADMAP
• Garbage collector support for “managed” programming
languages.
• DOM access.
• WASI: wasm out of the browser, IoT!
• Simpler native modules.
• Running inside a sandbox.
• Native code shared amongst platforms-
CONCLUSIONS
CONCLUSIONS
• JavaScript replacement? NO!
• Brilliant future!
• Programmers have a lot of possibilities, in
programming language choice as well as in execution
capabilities.
• Needs libraries hiding interop complexity.
• WASI promises to fulfill the Java premises: “Compile
once, run anywhere”.
¡Gracias!