Working with WebAssembly and Java: Advanced Level

Working with WebAssembly and Java: Advanced Level

WebAssembly (Wasm) is a low-level binary instruction format executed in a browser's virtual machine. For a Java developer, Wasm opens new horizons: moving computational modules to the client side, accelerating critical code sections, and creating cross-platform libraries. In this article, we will explore advanced techniques for integrating Java with WebAssembly: from compilation to passing complex data structures and performance profiling.

1. Compiling Java Code to WebAssembly: Tools and Setup

Direct compilation of JVM bytecode to Wasm is a non-trivial task. The main tools are:

• TeaVM — a compiler from Java to JavaScript and WebAssembly. Supports most of Java SE.
• JWebAssembly — an experimental compiler that generates Wasm directly from Java bytecode.
• GraalVM (wasm backend) — allows compiling Java to Wasm via Native Image, but requires manual configuration.

Example of setting up a Maven project with TeaVM:

<dependency>    <groupId>org.teavm</groupId>    <artifactId>teavm-core</artifactId>    <version>0.9.2</version></dependency><dependency>    <groupId>org.teavm</groupId>    <artifactId>teavm-classlib</artifactId>    <version>0.9.2</version></dependency>

Build plugin:

<plugin>    <groupId>org.teavm</groupId>    <artifactId>teavm-maven-plugin</artifactId>    <version>0.9.2</version>    <configuration>        <targetDirectory>${project.build.directory}/wasm</targetDirectory>        <mainClass>com.example.MyWasmApp</mainClass>    </configuration></plugin>

After the build, the target/wasm folder will contain .wasm and .js files — a wrapper for loading.

2. Calling Java Functions from JavaScript via Wasm

The compiled module exports public static methods. Consider a simple class:

public class WasmMath {    public static int add(int a, int b) {        return a + b;    }

    public static double multiply(double a, double b) {        return a * b;    }}

After compilation, TeaVM generates the add and multiply functions. Calling from JavaScript:

// Loading the moduleconst wasmModule = await teaVM.wasm.load('MyWasmApp.wasm');

// Direct callconst result = wasmModule.add(5, 7);console.log(result); // 12

const product = wasmModule.multiply(3.14, 2.0);console.log(product); // 6.28

Important: TeaVM automatically converts Java primitive types to corresponding Wasm types (i32, f64). For strings and arrays, manual marshalling is required.

3. Passing Complex Data: Strings and Arrays

Wasm only operates with numbers. To pass strings and arrays, the module's linear memory is used. TeaVM provides an API for working with it.

Example: A Java method that takes a string and returns its length:

public class StringProcessor {    public static int stringLength(String s) {        return s.length();    }}

Calling from JavaScript with string encoding into memory:

const wasmModule = await teaVM.wasm.load('StringProcessor.wasm');

function callStringLength(str) {    // Get a pointer to the string in Wasm memory    const ptr = wasmModule.allocateString(str);    const len = wasmModule.stringLength(ptr);    wasmModule.freeString(ptr); // free memory    return len;}

console.log(callStringLength("Hello, Wasm!")); // 12

For primitive arrays, use allocateArr