Download to read offline
![const = [ , ,...{} ]](https://image.slidesharecdn.com/wayweyweb2023nvendittoportablesecurelightweightjavascriptwasmruntimes-231213175852-070a927d/75/Portable-secure-and-lightweight-Wasm-runtimes-and-their-use-cases-Natalia-Venditto-9-2048.jpg)
![...shared memories, that can be transfered
between the Window and the worker with
...[].
postMessage()](https://image.slidesharecdn.com/wayweyweb2023nvendittoportablesecurelightweightjavascriptwasmruntimes-231213175852-070a927d/75/Portable-secure-and-lightweight-Wasm-runtimes-and-their-use-cases-Natalia-Venditto-33-2048.jpg)
More Related Content
Similar to Portable, secure, and lightweight: Wasm runtimes and their use-cases - Natalia Venditto
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 islike 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 PrincipalJavaScript 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.
- 8. 010101 101010 010101 AST ByteCode Machine code Script 010101 101010 PARSER INTERPRETERCOMPILER microfrontend.dev - @anfibiacreativa
- 9. const = [, ,...{} ]
- 10. High performance. At lowlevel, 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? Wedon'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 arebuilt 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) Typicallyimplement aggressive server-side caching techniques and selective progressive hydration for dynamic areas of content in the HTML. ¿Where? ¿When?
- 16. Combining or composingstatically 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, aWasm search component. microfrontend.dev - @anfibiacreativa
- 19.
- 20. Designed as aportable 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.
- 22.
- 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 executioncontexts. microfrontend.dev - @anfibiacreativa
- 26. Even in the lightbulbs. ©Anthony Indraus | Unsplash.com
- 28.
- 29. 010101 101010 010101 TOOLCHAIN Wasm Wasm imported to JavaScript Program microfrontend.dev- @anfibiacreativa ADDITIONAL INTERFACES
- 30. Modular system intefacebuilt 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 allowthe execution of the same code, in different environments. JavaScript enables both isomorphism and trisomorphism, leveraging browser and remote workers. microfrontend.dev - @anfibiacreativa
- 32.
- 33. ...shared memories, thatcan be transfered between the Window and the worker with ...[]. postMessage()
- 34. Composable user interfacesof 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 andmemory-safe. microfrontend.dev - @anfibiacreativa
- 36. © Piron Guillaume| Unsplash.com
- 37.
- 38. There are morelayers 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.
- 40. Thank you! @anfibiacreativa -https://www.microfrontend.dev Bytecode Alliance Javy WebAssembly.org Microfrontend.dev Bjorn3 WASI shim Wasmtime Demo Learn more