1. WebAssembly
E V E R Y T H I N G Y O U W A N T E D T O K N O W A B O U T W A S M B U T W E R E A F R A I D T O A S K
< / >

2. •
•
•
•
•
•
AssemblyScript to WASM
Rust to WASM
GO to WASM
Hello World demo time
Questions?
Links
Agenda
•
•
•
•
•
•
•
•
•
•
WASM in definition
A brief history of Javascript - how do we get there?
JavaScript engine
A story about warm and hot code

ASM.js
Compilator tales
In what exactly is WASM "better"?
What is WASM for?

WASM use context in 2021
WASM missing parts & future
•
•
•
•
•
•
•
• WASM based
Figma
TensorFlow
esbuild
Clipchamp
Photoshop
AutoCad
Unity
C H A P T E R 2
C H A P T E R 3
C H A P T E R 1

3. WASM in definition
WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like
language with a compact binary format that runs with near-native performance and provides languages such
as C/C++, C#, and Rust (and Golang) with a compilation target so that they can run on the web. It is also
designed to run alongside JavaScript, allowing both to work together.
https://developer.mozilla.org/en-US/docs/WebAssembly

4. 1995
Brendan Eich creates JavaScript
Within 10-days deadline
2008
V8
JIT compilation introduced
2015 | 2017 | 2019
•
•
•
WASM introduced
support in "all major browsers"
W3C recommendation
2022
•
•
•
GC
SIMD
Threads
A brief history of Javascript - how do we get there?

5. JavaScript engine
< / >
Inside the JavaScript engine

6. A story about warm and hot code
M O D E R N J S E N G I N E
< / >
O L D E N G I N E
W A S M
https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly/

7. ASM.js
W H A T I S I T ?
It is a very small, strict subset of JavaScript that only allows things like `while`, `if`, numbers, top-level named
functions, and other simple constructs. It does not allow objects, strings, closures, and basically anything that
requires heap allocation
Don't.
This feature is no longer recommended. Though some browsers might still support it, it may have already been
removed from the relevant web standards, may be in the process of being dropped, or may only be kept for
compatibility purposes. Avoid using it, and update existing code if possible
W H E N T O U S E I T ?
MDN ASM.js

8. Compilator tales
< / >
https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly/
Naive approach:
create a whole bunch of different translators that can go
from each language to each assembly
IR approach:
compiler will take this high-level programming language
and translate it into an intermediate representation (IR)

9. In what exactly is WASM "better"?
Native support for 64-bit integers

JavaScript only has 64-bit floating-point numbers so it only supports 53-bit integers. 64-bit integers have to be
emulated in JavaScript, which can be much slower
Binary format
More compact than JS and already delivered as bytecode. Can be streamed and no parsing to AST is required.
Also, results in a smaller file size.
Static typing
WASM static typing allows compilation time optimization and requires no profiling and further optimizations
during code execution, comparing to JS. As a compilation target, it won't be read by humans which leaves room
for extremely optimized code

10. What is WASM for?
•
•
•
•
•
•
Applications can be written entirely in WASM but the most usual approach is to write JS/HTML for interface and
delegating heavy tasks to WASM. Generated WASM is also naturally obfuscated.
What can be delegated?
reusing existing C/C++/Rust/Go codebase when building web or NodeJS based solutions
general heavy computations (graphing, simulation, media processing, compression) offloading
SIMD support (standardizing Fixed-Width 128-bit SIMD vector) operations
server-side interoperability (invoke JavaScript functions from .NET methods and vice-versa)
—
edge computing (https://thenewstack.io/how-webassembly-could-streamline-cloud-native-computing/)
Docker replacement (https://thenewstack.io/when-webassembly-replaces-docker/)
H T T P S : / / T H E N E W S T A C K . I O / W H A T - B U S I N E S S - P R O B L E M S - D O E S - W E B A S S E M B L Y - S O L V E

11. WASM use context in 2021

12. WASM missing parts and future
Threads Post MVP proposal
This proposal adds a new shared linear memory type and some new operations for atomic memory access.
WebAssembly System Interface (WASI) proposal
It's an API that provides access to several operating-system-like features, including files and filesystems,
Berkeley sockets, clocks, and random numbers for standardization.
Garbage Collection
The proposal is in version 4, prototype implementation for V8 is in progress. This is a significant change, leading
to many additions to the .wasm type system, including simple tuples, structs, and arrays. The complexity of this
proposal is why we’ve seen the problem broken down into smaller pieces.
https://blog.scottlogic.com/2021/06/21/state-of-wasm.html
T H I S I S S T I L L V A L I D I N 2 0 2 2 : (

13. Figma before, it’s a browser-based interface design
tool with a powerful 2D WebGL rendering engine that
supports very large documents.
WASM based: Figma
H T T P S : / / W W W . F I G M A . C O M / B L O G / W E B A S S E M B L Y - C U T - F I G M A S -
L O A D - T I M E - B Y - 3 X /

14. The WebAssembly version is much, much slower than the native
version. In many cases it is an order of magnitude (i.e. 10x) slower.
This is for various reasons including
a) node re-compiles the WebAssembly code from scratch on every
run
b) Go's WebAssembly compilation approach is single-threaded
c) node has WebAssembly bugs that can delay the exiting of the
process by many seconds.
The WebAssembly version also excludes some features such as the
local file server. You should only use the WebAssembly package
like this if there is no other option, such as when you want to use
esbuild on an unsupported platform. The WebAssembly package is
primarily intended to only be used in the browser.
WASM based: esbuild
H T T P S : / / E S B U I L D . G I T H U B . I O / G E T T I N G -
S T A R T E D / # W A S M

15. Clipchamp is the in-browser online video editor that empowers anyone to tell stories worth
sharing through video. Around the world, over 12 million creators use Clipchamp to easily edit
videos. We offer simple solutions for making videos, from intuitive tools like crop and trim, to
practical features like our screen recorder, and even a meme maker.

Our installable Chrome PWA has been doing really well. We've been so pleased to see 9% higher
retention with PWA users than with our standard desktop users. Installation of the PWA has been
massive, increasing at a rate of 97% a month since we launched five months ago. And, as
mentioned before, the WebAssembly SIMD enhancements improved performance 2.3x.
WASM based:
Clipchamp
HTTPS://WEB.DEV/CLIPCHAMP/

16. Blazor can run your client-side C# code
directly in the browser, using
WebAssembly. Because it's real .NET
running on WebAssembly, you can re-
use code and libraries from server-
side parts of your application.
Blazor apps can use existing .NET
libraries, thanks to .NET Standard—a
formal specification of .NET APIs that
are common across all .NET
implementations.
WASM based: Blazor
H T T P S : / / D O T N E T . M I C R O S O F T . C O M / A P P S / A S P N E T / W E B - A P P S / B L A Z O R

17. The AutoCAD web app uses emscripten to
port pieces from the > 35 years old native
application for AutoCAD, to the web! This is
quite notable, as it proves that
WebAssembly can bring these large C/C++
codebases using Emscripten to the web, to
run large computationally intensive desktop
applications on the web.
WASM based: AutoCad
H T T P S : / / B L O G S . A U T O D E S K . C O M / A U T O C A D / A U T O C A D - W E B - A P P - G O O G L E - I O - 2 0 1 8 /

18. Unity is finally making the switch to
WebAssembly as their output format for the
Unity WebGL build target. WebAssembly
support was first teased in Unity 5.6 as an
experimental feature. Unity 2018.1 marked the
removal of the experimental label. And finally
in 2018.2, Web Assembly replaces asm.js as
the default linker target.
WebAssembly replaced asm.js because it is
faster, smaller and more memory-efficient,
which are all pain points of the Unity WebGL
export.
WASM based:
Unity
H T T P S : / / B L O G . U N I T Y . C O M / T E C H N O L
O G Y / W E B A S S E M B L Y - I S - H E R E

19. TensorFlow.js provides a WASM backend for
both the browser and for Node.js. This
backend is an alternative to the WebGL
backend.
SIMD and multithreading bring major
performance improvements to our Wasm
backend.
WASM based: TensorFlow
H T T P S : / / B L O G . T E N S O R F L O W . O R G / 2 0 2 0 / 0 3 / I N T R O D U C I N G - W E B A S S E M B L Y -
B A C K E N D - F O R - T E N S O R F L O W - J S . H T M L

20. WebContainers enables developers to create
full-stack Node.js environments within the
browser which loads instantly and comes
bundled with VS Code, a full terminal, NPM,
and more
WebContainers include a virtualized TCP
network stack that's mapped to your
browser's ServiceWorker API, enabling you
to instantly create live Node.js servers on-
demand that continue to work even when
you go offline.
WASM based: WebContainers
H T T P S : / / B L O G . S T A C K B L I T Z . C O M / P O S T S / I N T R O D U C I N G - W E B C O N T A I N E R S /

21. In contrast to native Photoshop, you do not
have to download several hundred
megabytes, but only around 20 MB. The
source files are cached offline with the help
of a service worker so that only around 150
kilobytes have to be transferred when they
are called up again.
Set the applications Web Components
developed with Lit for their user interface:
Adobe provides Spectrum developed its
own design system based on Web
Components.
WASM based: Adobe Photoshop
H T T P S : / / W E B . D E V / P S - O N - T H E - W E B /

22. Compiles a variant of TypeScript using Binaryen.
Unlike TypeScript (...), AssemblyScript targets WebAssembly with all of its
static guarantees, hence intentionally avoids the dynamicness of
JavaScript where it cannot be compiled ahead of time efficiently.
No union types, any, unknown, and objects must be strictly typed.
AssemblyScript GH

23. •
•
•
•
Automatically generate binding code between Rust, WebAssembly, and JavaScript APIs. Take advantage of libraries
like web-sys that provide pre-packaged bindings for the entire web platform.
window.fetch
Node.prototype.appendChild
WebGL
WebAudio
It does not include the JavaScript APIs that are guaranteed to exist in all standards-compliant ECMAScript
environments, such as Array, Date, and eval. Bindings for these APIs can be found in the js-sys crate.
AssemblyScript GH
Rust to WASM

24. The syscall/js is an EXPERIMENTAL package. Its current scope is only to allow tests to run, but not yet to provide
a comprehensive API for users. It is exempt from the Go compatibility promise.
There are two main ways you can compile Go into Wasm modules — through the regular Go compiler and through
TinyGo.
Go can’t produce a Wasm module that complies with the Wascap spec (which requires clean Wasm 1.0 compliance).
Go also produces enormous WASM modules. There are tools to trim them, but it’s nothing like what you get with C++
or Rust
AssemblyScript GH
GO to WASM

25. With all those new integrations, Chrome
DevTools becomes a viable, powerful,
debugger not only for JavaScript, but also
for C and C++ apps, making it easier than
ever to take apps, built in a variety of
technologies and bring them to a shared,
cross-platform Web.
WASM debugging
H T T P S : / / D E V E L O P E R . C H R O M E . C O M / B L O G / W A S M - D E B U G G I N G - 2 0 2 0 /

26. Hello World demo time
< / >
1.
2.
a.
b.
3.
Simple Go package - expose function to add 2 numbers
HTML entry file: to include some JS files
Main JavaScript file:
implement WASM instantiation
bootstrap JS with WASM logic

27. QUESTIONS?

28. Links
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Cartoon introduction to Webassembly
Creating and working with WebAssembly modules
Rust WASM book
WASI
Where is WebAssembly now and what’s next?
@WasmWeekly
Awesome WASM
A crash course in just-in-time (JIT) compilers
Get started with WebAssembly
Made with WebAssembly
WASM SIMD
WASM proposals
LOW level WASM Intro
State of WASM 2021
WASM By Example
WebAssembly in the JavaScript Ecosystem

29. Twitter
@benedyktdryl
Linkedin
https://www.linkedin.com/in/
benedykt-dryl/
Email
benedykt@brainhub.pl
T H A N K Y O U !
C O N T A C T