Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natalia Venditto

1. Portable, secure and
lightweight: Wasm
runtimes and use-
cases
Wey Wey Web - Málaga | November 2023
Natalia Venditto
microfrontend.dev - @anfibiacreativa
Image credit DALL-E3

2. What makes
JavaScript that
popular?
© Austin Neil | Unsplash.com

3. The JavaScript
ecosystem is like the
Universe...
© Ivana Cajina | Unsplash.com

4. ...hosting 16M
developers
worldwide.
© NASA | Unsplash.com
From 1.9 billion websites, 98% use
JavaScript.

5. https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/
microfrontend.dev - @anfibiacreativa
const = 49%;
const = 63%;
pythonDevsWorldwide
javaScriptDevsWorldwide

6. Natalia Venditto
aka anfibiacreativa
Principal JavaScript DX Lead Microsoft Azure
Google Developer Expert for Angular and Web Technologies (Runtime Performance)
Author of https://microfrontend.dev
2021 Microsoft Most Valuable Professional

7. PARSER
INTERPRETER
COMPILER
AST
Bytes
Optimized
Code
010101
101010
010101
Script
microfrontend.dev - @anfibiacreativa

8. 010101
101010
010101
AST ByteCode
Machine
code
Script
010101
101010
PARSER INTERPRETER COMPILER
microfrontend.dev - @anfibiacreativa

9. const = [ , ,...{} ]

10. High performance.
At low level, we perform better.
microfrontend.dev - @anfibiacreativa

11. © SpaceX | Unsplash.com
8" attention span

12. just a little
patience!
(function() {
let patience = 8;
function runOutofPatience() {
patience--;
if (patience <= 0) {
clearInterval(secondGone);
console.log("This site is slow. Bye.");
} else {
console.log(`I got this ${patience} left`);
}
}
const secondGone = setInterval(runOutofPatience, 1000);
})();

13. Runtime
CLIENT
Clientside Rendering
¿Where? ¿When?
We don't know the system
capacity or
connection capabilities, of
the user at any time, which
can impact latency and
code execution at runtime.

14. Metaframeworks
Frameworks that are built on top of
other JavaScript frameworks or
libraries, typically offering additional
capabilities, like static generation, server
side rendering, progressive hydration,
etc.
microfrontend.dev - @anfibiacreativa

15. Runtime
SERVER
Serverside Rendering (SSR)
Typically implement
aggressive server-side
caching techniques and
selective progressive
hydration for dynamic
areas of content in the
HTML.
¿Where? ¿When?

16. Combining or composing statically
generated pages or server-side
rendered HTML snippets, with
dynamic and serialized elements,
like state and other computed
data.
Can run on the JavaScript main
thread or a worker, also with
Wasm.
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa

17. Use case.
Pagefind, a Wasm search component.
microfrontend.dev - @anfibiacreativa

19. https://starlight.astro.build/

20. Designed as a portable binary
target, fully sand-boxed...it is a web
platform standard.
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
010101
101010
010101
010101
101010
010101
010101
101010
010101
010101
101010
010101
010101
101010
010101
010101
101010
010101
010101
101010
010101
010101
101010
010101

21. microfrontend.dev - @anfibiacreativa
010101
101010
010101
TOOLCHAIN
Wasm
Wasm
imported to
JavaScript
Program

22. 010101
101010
010101
TOOLCHAIN Wasm
Wasm
imported to
JavaScript
Program
microfrontend.dev - @anfibiacreativa

23. Imports/Exports
microfrontend.dev - @anfibiacreativa
fetch("hello_world.wasm")
.then(response => response.arrayBuffer())
.then(bytes => {
const wasmModule = WebAssembly.compile(bytes);
const instance = new WebAssembly.Instance(wasmModule, {
env: {
println: console.log
}
});
instance.exports.hello_world();
});
1
2
3
4
5
6
7
8
9
10
11
(module
(import 'env' 'println'func $println (param i32)))
(func $hello_world (export 'hello_world')
(block $block
(call $println
(i32.const 0))
))
(memory 1)
(data (i32.const 0)'Hello, Wey Wey Web for UI Lovers') ))
1
2
3
4
5
6
7
8
9

24. fetch/instaciate
microfrontend.dev - @anfibiacreativa
fetch("hello_world.wasm")
1
.then(response => response.arrayBuffer())
2
.then(bytes => {
3
const wasmModule = WebAssembly.compile(bytes);
4
const instance = new WebAssembly.Instance(wasmModule, {
5
env: {
6
println: console.log
7
}
8
});
9
instance.exports.hello_world();
10
});
11
.then(response => response.arrayBuffer())
fetch("hello_world.wasm")
1
2
.then(bytes => {
3
const wasmModule = WebAssembly.compile(bytes);
4
const instance = new WebAssembly.Instance(wasmModule, {
5
env: {
6
println: console.log
7
}
8
});
9
instance.exports.hello_world();
10
});
11
const wasmModule = WebAssembly.compile(bytes);
const instance = new WebAssembly.Instance(wasmModule, {
fetch("hello_world.wasm")
1
.then(response => response.arrayBuffer())
2
.then(bytes => {
3
4
5
env: {
6
println: console.log
7
}
8
});
9
instance.exports.hello_world();
10
});
11
instance.exports.hello_world();
fetch("hello_world.wasm")
1
.then(response => response.arrayBuffer())
2
.then(bytes => {
3
const wasmModule = WebAssembly.compile(bytes);
4
const instance = new WebAssembly.Instance(wasmModule, {
5
env: {
6
println: console.log
7
}
8
});
9
10
});
11

25. Portability.
Parity between execution contexts.
microfrontend.dev - @anfibiacreativa

26. Even in the
lightbulbs.
© Anthony Indraus | Unsplash.com

28. ADDITIONAL
INTERFACES
microfrontend.dev - @anfibiacreativa
010101
101010
010101
TOOLCHAIN
Wasm
Wasm
imported to
JavaScript
Program

29. 010101
101010
010101
TOOLCHAIN Wasm
Wasm
imported to
JavaScript
Program
microfrontend.dev - @anfibiacreativa
ADDITIONAL
INTERFACES

30. Modular system inteface built for
WebAssembly, outside of the
browser, fully compatible with
POSIX systems.
It is a standard IN PREVIEW.
microfrontend.dev - @anfibiacreativa
microfrontend.dev - @anfibiacreativa
010101
101010
010101
010101
101010
010101
010101
101010
010101
010101
101010
010101
010101
101010
010101
010101
101010
010101
010101
101010
010101
010101
101010
010101
It is run in specific runtimes, like
Wasmtime.

31. Isomorphism
Isomorphic apps allow the execution of
the same code, in different
environments.
JavaScript enables both isomorphism
and trisomorphism, leveraging browser
and remote workers.
microfrontend.dev - @anfibiacreativa

32. Demo

33. ...shared memories, that can be transfered
between the Window and the worker with
...[].
postMessage()

34. Composable user interfaces of this
type, are built or composed
remotely, typically in a worker
running at the edge of the
network (mostly on CDN PoPs very
close to the end-user).
microfrontend.dev - @anfibiacreativa

35. Security.
Fully sand-boxed and memory-safe.
microfrontend.dev - @anfibiacreativa

36. © Piron Guillaume | Unsplash.com

37. Trade-offs?
Sure.
microfrontend.dev - @anfibiacreativa

38. There are more layers
to debug to
understand the source
of an issue.
This new
technologies are in
preview and hence
unstable and prone
to change API defs.
Not all the interfaces are
available for every
language.
microfrontend.dev - @anfibiacreativa

39. DEV OPS
ARQ
Development
Specification
Setup
Design
Integration
Delivery
Operations
D
E
P
L
O
Y
M
E
N
T
DESIGN
D
E
V
E
L
O
P
M
E
N
T
microfrontend.dev - @anfibiacreativa

40. Thank you!
@anfibiacreativa - https://www.microfrontend.dev
Bytecode Alliance Javy WebAssembly.org
Microfrontend.dev Bjorn3 WASI shim Wasmtime Demo
Learn more