SlideShare a Scribd company logo

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

•
•
W
Wey Wey Web

This document discusses WebAssembly (Wasm) runtimes and use cases. It provides an overview of Wasm, including how it is compiled from source code to binary format and imported into JavaScript. It describes how Wasm provides portability across execution contexts and systems through standards like WASI. Examples of using Wasm include a search component and demonstrating isomorphism. Potential tradeoffs discussed include additional debugging layers and unstable preview interfaces.

1 of 40
Download to read offline
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
What makes JavaScript that popular? © Austin Neil | Unsplash.com
The JavaScript ecosystem is like the Universe... © Ivana Cajina | Unsplash.com
...hosting 16M developers worldwide. © NASA | Unsplash.com From 1.9 billion websites, 98% use JavaScript.
https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/ microfrontend.dev - @anfibiacreativa const = 49%; const = 63%; pythonDevsWorldwide javaScriptDevsWorldwide
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
PARSER INTERPRETER COMPILER AST Bytes Optimized Code 010101 101010 010101 Script microfrontend.dev - @anfibiacreativa
010101 101010 010101 AST ByteCode Machine code Script 010101 101010 PARSER INTERPRETER COMPILER microfrontend.dev - @anfibiacreativa
const = [ , ,...{} ]
High performance. At low level, we perform better. microfrontend.dev - @anfibiacreativa
© SpaceX | Unsplash.com 8" attention span
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); })();
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.
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
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?
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
Use case. Pagefind, a Wasm search component. microfrontend.dev - @anfibiacreativa
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natalia Venditto
https://starlight.astro.build/
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
microfrontend.dev - @anfibiacreativa 010101 101010 010101 TOOLCHAIN Wasm Wasm imported to JavaScript Program
010101 101010 010101 TOOLCHAIN Wasm Wasm imported to JavaScript Program microfrontend.dev - @anfibiacreativa
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
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
Portability. Parity between execution contexts. microfrontend.dev - @anfibiacreativa
Even in the lightbulbs. © Anthony Indraus | Unsplash.com
Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natalia Venditto
ADDITIONAL INTERFACES microfrontend.dev - @anfibiacreativa 010101 101010 010101 TOOLCHAIN Wasm Wasm imported to JavaScript Program
010101 101010 010101 TOOLCHAIN Wasm Wasm imported to JavaScript Program microfrontend.dev - @anfibiacreativa ADDITIONAL INTERFACES
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.
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
Demo
...shared memories, that can be transfered between the Window and the worker with ...[]. postMessage()
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
Security. Fully sand-boxed and memory-safe. microfrontend.dev - @anfibiacreativa
© Piron Guillaume | Unsplash.com
Trade-offs? Sure. microfrontend.dev - @anfibiacreativa
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
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
Thank you! @anfibiacreativa - https://www.microfrontend.dev Bytecode Alliance Javy WebAssembly.org Microfrontend.dev Bjorn3 WASI shim Wasmtime Demo Learn more

More Related Content

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