# An introduction to WebAssembly <img src="./imgs/WebAssembly_Logo.svg" height="20%" width="20%" style="height: 20%; width: 20%;"></img>

Andrea Peruffo

X: @and_prf

GitHub: #andreaTP

# What is WebAssembly WebAssembly (sometimes abbreviated Wasm) defines a portable binary-code format and a corresponding text format for executable programs as well as software interfaces for facilitating interactions between such programs and their host environment. [https://en.wikipedia.org/wiki/WebAssembly](https://en.wikipedia.org/wiki/WebAssembly) - Announced: 2015<!-- .element: class="fragment" --> - Released: 2017<!-- .element: class="fragment" -->

WebAssembly (sometimes abbreviated Wasm) defines <span style="color:rgb(240, 41, 154)">**a portable binary-code format**</span> and a corresponding text format for executable programs as well as software interfaces for facilitating interactions between such programs and their host environment. [https://en.wikipedia.org/wiki/WebAssembly](https://en.wikipedia.org/wiki/WebAssembly)

# Binary Format ``` 00000000 00 61 73 6d 0b 00 00 00 04 74 79 70 65 87 80 80 |.asm.....type...| 00000010 80 00 01 40 02 01 01 01 01 08 66 75 6e 63 74 69 |...@......functi| 00000020 6f 6e 82 80 80 80 00 01 00 06 6d 65 6d 6f 72 79 |on........memory| 00000030 85 80 80 80 00 80 02 80 02 01 06 65 78 70 6f 72 |...........expor| 00000040 74 86 80 80 80 00 01 00 03 61 64 64 04 63 6f 64 |t........add.cod| 00000050 65 8c 80 80 80 00 01 86 80 80 80 00 00 14 00 14 |e...............| 00000060 01 40 04 6e 61 6d 65 86 80 80 80 00 01 03 61 64 |.@.name.......ad| 00000070 64 00 __ __ __ __ __ __ __ __ __ __ __ __ __ __ |d.| ```

WebAssembly (sometimes abbreviated Wasm) defines a portable binary-code format and a corresponding <span style="color:rgb(240, 41, 154)">**text format**</span> for executable programs as well as software interfaces for facilitating interactions between such programs and their host environment. [https://en.wikipedia.org/wiki/WebAssembly](https://en.wikipedia.org/wiki/WebAssembly)

# Text Format ``` (module (type $0 (func (param i32 i32) (result i32))) (export "add" $add) (func $add (type $0) (param $var$0 i32) (param $var$1 i32) (result i32) (i32.add (get_local $var$0) (get_local $var$1) ) ) ) ```

WebAssembly (sometimes abbreviated Wasm) defines a portable binary-code format and a corresponding text format for <span style="color:rgb(240, 41, 154)">**executable programs**</span> as well as software interfaces for facilitating interactions between such programs and their host environment. [https://en.wikipedia.org/wiki/WebAssembly](https://en.wikipedia.org/wiki/WebAssembly)

# Executable programs ``` execute add 1 2 > 3 ```

# What is WebAssembly WebAssembly (sometimes abbreviated Wasm) defines a portable binary-code format and a corresponding text format for executable programs as well as software interfaces for <span style="color:rgb(240, 41, 154)">**facilitating interactions**</span> between such programs and their host environment. [https://en.wikipedia.org/wiki/WebAssembly](https://en.wikipedia.org/wiki/WebAssembly)

# Facilitating interactions <img style="width: 20%;" src="imgs/interacting.jpeg">

WebAssembly is a new fundamental abstraction boundary. https://wingolog.org/archives/2024/01/08/missing-the-point-of-webassembly

# The two sides of it <img style="width: 20%;" src="imgs/doubleface.jpeg"> <br/> - compile to Wasm<!-- .element: class="fragment" --> - execute Wasm code<!-- .element: class="fragment" -->

# The problems it solves - sandboxed execution<!-- .element: class="fragment" --> - memory control<!-- .element: class="fragment" --> - speed<!-- .element: class="fragment" --> - standard (W3C)<!-- .element: class="fragment" -->

# Where is it used? - Web Browsers<!-- .element: class="fragment" --> - FaaS<!-- .element: class="fragment" --> - Extensions<!-- .element: class="fragment" -->

# Demo <!-- Show what it means to compile a WASM module and use it -->

# Where to find me?

# Apicurio <img style="width: 10%;" src="imgs/apicurio.png"> <br/> https://github.com/apicurio API tooling

# Fabric8 Kubernetes Client <img style="width: 10%;" src="imgs/fabric8.png"> <br/> https://github.com/fabric8io/kubernetes-client - Java to Kubernetes Resources - Kubernetes resources to Java

# Kiota <img style="width: 10%;" src="imgs/kiota.png"> <br/> https://github.com/microsoft/kiota OpenAPI client SDK generation

# Chicory <img style="width: 10%;" src="imgs/chicory1.png"> <br/> https://github.com/dylibso/chicory Wasm runtime in pure Java

# Why The JVM: 30 Years of Value Creation <div class="row"> <div class="col" style="background: inherit;"> <ul> <li>Enterprise</li> <li>Cloud</li> <li>Mobile</li> <li>Tools and Services</li> <li>Manufacturers</li> <li>Banks and Finance</li> <li>Healthcare</li> <li>Insurance</li> </ul> </div> <div class="col"> <img style="width: 70%;" src="imgs/java-servers.jpeg"> <br /> </div> </div> Note: - Second, and most important to this project, Is the mountain of value that has been created by the JVM. - Stop for a second and reflect on how deeply the JVM is emebedded into the modern economy. - There's 30 years of JVM software in the world creating hundreds of billions of dollars in value across nearly all business verticals. (conservative estimate) - Think about all the massive public companies that are built on the JVM. - Think about the ecosystems as well, like Android that, power billions of devices across the world.

# Staying within the JVM Boundaries - Guaranteed Memory Safety - Fault Isolation - Super advanced JIT - Self contained programs - WORA: (Write once run anywhere) Platform independent bytecode - ... more!

# Compilers as transformations <img style="width: 20%;" src="imgs/transform.jpeg">

# nonorthodox compilers - Linters<!-- .element: class="fragment" --> - Code Generators<!-- .element: class="fragment" --> - ETL pipelines<!-- .element: class="fragment" --> - UI<!-- .element: class="fragment" --> - ...<!-- .element: class="fragment" -->

# Compilers in a developer journey - shared mental/execution model<!-- .element: class="fragment" --> - structured<!-- .element: class="fragment" --> - collaboration<!-- .element: class="fragment" -->

# Thanks and Q&A <a href="https://github.com/andreaTP/uni-wasm-deck">https://github.com/andreaTP/uni-wasm-deck</a> <br />

# Extra and optional slides

# Chicory Use cases Note:

<img src="./imgs/jruby.png" height="20%" width="20%" style="height: 20%; width: 20%;"></img> ## + <img src="./imgs/ruby-prism.png" height="20%" width="20%" style="height: 20%; width: 20%;"></img> ## An Unexpected Journey Note:

## An Unexpected Journey - Prism: C Parser for Ruby - JRuby: Ruby on the JVM - Bootstrap: FFI to cross compiled C libs Note:

<img src="./imgs/keycloak.svg" height="30%" width="30%" style="height: 30%; width: 30%;"></img> <br /> [Keycloak](https://github.com/pedroigor/keycloak-wasm-policy-provider) policy provider Note: Keycloak is a popular Identity Management software, allowing features like Single Sign On to be easily implemented within corporate services. It's widely used in the Enterprise and it has a wide range of functionalities, for example it allows you to authenticate your accounts with a variety of services, even the old one like Kerberos. Sometimes, the configuration is not enough and you need to write a little plugin to fully customize the behavior of the authentication logic. In this example we integrated a Keycloak Policy Provider able to load and execute wasm functions to verify the user authentication, the wasm module have access to the user context using Host Functions.

# More use-cases - [Apache Camel](https://camel.apache.org/components/4.4.x/wasm-component.html) producer - [Kafka Connect](https://lburgazzoli.github.io/posts/2024-02-01_apache_kafka_connect_meets_wasm_part_1/) transformation - [Apache Pulsar](https://lburgazzoli.github.io/posts/2023-06-13-apache-camel-pulsar-function-pt_1/) function - [Kroxylicious](https://github.com/andreaTP/kroxylicious-wasm) filter Note: By using extension mechanisms we are scaling the complexity of the applications.