MACRO NEPAL
Java to WebAssembly with TeaVM in Java: Modern Web Development
awiskar acharya
November 15, 2025
3:34 am

Introduction

WebAssembly (Wasm) has revolutionized web development by enabling high-performance applications to run in browsers. TeaVM (Tea Virtual Machine) is a Java bytecode to JavaScript/WebAssembly compiler that allows Java developers to leverage their skills for web development. This article explores how to compile Java to WebAssembly using TeaVM, creating high-performance web applications.

What is TeaVM?

TeaVM is an ahead-of-time (AOT) compiler for Java bytecode that can target:

  • JavaScript - For broad browser compatibility
  • WebAssembly - For near-native performance
  • WebGPU - For graphics-intensive applications

Key features:

  • No runtime dependencies
  • Small output size
  • Fast execution
  • Good Java language support
  • Interoperability with JavaScript

Setting Up TeaVM

Maven Configuration

<!-- pom.xml -->
<properties>
<teavm.version>0.8.2</teavm.version>
</properties>
<dependencies>
<!-- TeaVM core -->
<dependency>
<groupId>org.teavm</groupId>
<artifactId>teavm-classlib</artifactId>
<version>${teavm.version}</version>
</dependency>
<dependency>
<groupId>org.teavm</groupId>
<artifactId>teavm-platform</artifactId>
<version>${teavm.version}</version>
</dependency>
<!-- TeaVM JavaScript interoperability -->
<dependency>
<groupId>org.teavm</groupId>
<artifactId>teavm-jso</artifactId>
<version>${teavm.version}</version>
</dependency>
<dependency>
<groupId>org.teavm</groupId>
<artifactId>teavm-jso-apis</artifactId>
<version>${teavm.version}</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.teavm</groupId>
<artifactId>teavm-maven-plugin</artifactId>
<version>${teavm.version}</version>
<executions>
<execution>
<id>webassembly</id>
<goals>
<goal>compile</goal>
</goals>
<phase>package</phase>
<configuration>
<targetType>WEBASSEMBLY</targetType>
<mainClass>com.example.Main</mainClass>
<minifying>true</minifying>
<optimization>FULL</optimization>
<outFile>app.wasm</outFile>
<sourceMapsFile>app.wasm.map</sourceMapsFiles>
<sourceFilesCopied>true</sourceFilesCopied>
<debugInformationGenerated>true</debugInformationGenerated>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>

Gradle Configuration

// build.gradle
plugins {
id 'java'
id 'org.teavm' version '0.8.2'
}
teavm {
version = '0.8.2'
all {
mainClass = 'com.example.Main'
targetType = 'WEBASSEMBLY'
minifying = true
optimization = 'FULL'
outputDir = file('build/wasm')
sourceMapsFiles = true
debugInformation = true
}
}

Basic WebAssembly Application

Simple Calculator Example

package com.example;
import org.teavm.interop.Export;
public class Calculator {
@Export(name = "add")
public static int add(int a, int b) {
return a + b;
}
@Export(name = "subtract")
public static int subtract(int a, int b) {
return a - b;
}
@Export(name = "multiply")
public static int multiply(int a, int b) {
return a * b;
}
@Export(name = "divide")
public static int divide(int a, int b) {
if (b == 0) return 0;
return a / b;
}
@Export(name = "factorial")
public static int factorial(int n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}
@Export(name = "fibonacci")
public static int fibonacci(int n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
}

HTML Integration

<!DOCTYPE html>
<html>
<head>
<title>Java WebAssembly Calculator</title>
<style>
.calculator {
max-width: 300px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: Arial, sans-serif;
}
.calculator input {
width: 100%;
padding: 8px;
margin: 5px 0;
box-sizing: border-box;
}
.calculator button {
width: 100%;
padding: 10px;
margin: 5px 0;
background: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.calculator button:hover {
background: #0056b3;
}
.result {
margin-top: 10px;
padding: 10px;
background: #f8f9fa;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="calculator">
<h2>Java WebAssembly Calculator</h2>
<input type="number" id="a" placeholder="Enter number A" value="10">
<input type="number" id="b" placeholder="Enter number B" value="5">
<button onclick="calculate('add')">Add</button>
<button onclick="calculate('subtract')">Subtract</button>
<button onclick="calculate('multiply')">Multiply</button>
<button onclick="calculate('divide')">Divide</button>
<button onclick="calculateFactorial()">Factorial of A</button>
<button onclick="calculateFibonacci()">Fibonacci of A</button>
<div class="result" id="result">Result will appear here</div>
</div>
<script>
let wasmModule;
// Load WebAssembly module
async function loadWasm() {
try {
const response = await fetch('app.wasm');
const bytes = await response.arrayBuffer();
const module = await WebAssembly.instantiate(bytes, {
env: {
// Memory management functions
memory: new WebAssembly.Memory({ initial: 256 }),
table: new WebAssembly.Table({ initial: 0, element: 'anyfunc' })
}
});
wasmModule = module.instance.exports;
console.log('WebAssembly module loaded successfully');
} catch (error) {
console.error('Failed to load WebAssembly module:', error);
}
}
function calculate(operation) {
if (!wasmModule) {
alert('WebAssembly module not loaded yet');
return;
}
const a = parseInt(document.getElementById('a').value) || 0;
const b = parseInt(document.getElementById('b').value) || 0;
let result;
switch(operation) {
case 'add':
result = wasmModule.add(a, b);
break;
case 'subtract':
result = wasmModule.subtract(a, b);
break;
case 'multiply':
result = wasmModule.multiply(a, b);
break;
case 'divide':
result = wasmModule.divide(a, b);
break;
}
document.getElementById('result').textContent = 
`${a} ${getOperationSymbol(operation)} ${b} = ${result}`;
}
function calculateFactorial() {
if (!wasmModule) return;
const n = parseInt(document.getElementById('a').value) || 0;
const result = wasmModule.factorial(n);
document.getElementById('result').textContent = 
`Factorial(${n}) = ${result}`;
}
function calculateFibonacci() {
if (!wasmModule) return;
const n = parseInt(document.getElementById('a').value) || 0;
const result = wasmModule.fibonacci(n);
document.getElementById('result').textContent = 
`Fibonacci(${n}) = ${result}`;
}
function getOperationSymbol(operation) {
switch(operation) {
case 'add': return '+';
case 'subtract': return '-';
case 'multiply': return '×';
case 'divide': return '÷';
default: return '?';
}
}
// Load WebAssembly on page load
loadWasm();
</script>
</body>
</html>

Advanced WebAssembly Applications

Image Processing Application

package com.example.image;
import org.teavm.interop.Export;
import org.teavm.interop.NoSideEffects;
public class ImageProcessor {
@Export(name = "grayscale")
public static void grayscale(int[] pixels, int width, int height) {
for (int i = 0; i < pixels.length; i++) {
int pixel = pixels[i];
int a = (pixel >> 24) & 0xff;
int r = (pixel >> 16) & 0xff;
int g = (pixel >> 8) & 0xff;
int b = pixel & 0xff;
// Calculate luminance
int luminance = (int)(0.299 * r + 0.587 * g + 0.114 * b);
pixels[i] = (a << 24) | (luminance << 16) | (luminance << 8) | luminance;
}
}
@Export(name = "invert")
public static void invert(int[] pixels, int width, int height) {
for (int i = 0; i < pixels.length; i++) {
int pixel = pixels[i];
int a = (pixel >> 24) & 0xff;
int r = 255 - ((pixel >> 16) & 0xff);
int g = 255 - ((pixel >> 8) & 0xff);
int b = 255 - (pixel & 0xff);
pixels[i] = (a << 24) | (r << 16) | (g << 8) | b;
}
}
@Export(name = "brightness")
public static void brightness(int[] pixels, int width, int height, int value) {
for (int i = 0; i < pixels.length; i++) {
int pixel = pixels[i];
int a = (pixel >> 24) & 0xff;
int r = clamp(((pixel >> 16) & 0xff) + value);
int g = clamp(((pixel >> 8) & 0xff) + value);
int b = clamp((pixel & 0xff) + value);
pixels[i] = (a << 24) | (r << 16) | (g << 8) | b;
}
}
@Export(name = "contrast")
public static void contrast(int[] pixels, int width, int height, double factor) {
double contrastFactor = (259 * (factor + 255)) / (255 * (259 - factor));
for (int i = 0; i < pixels.length; i++) {
int pixel = pixels[i];
int a = (pixel >> 24) & 0xff;
int r = clamp((int)(contrastFactor * (((pixel >> 16) & 0xff) - 128) + 128));
int g = clamp((int)(contrastFactor * (((pixel >> 8) & 0xff) - 128) + 128));
int b = clamp((int)(contrastFactor * ((pixel & 0xff) - 128) + 128));
pixels[i] = (a << 24) | (r << 16) | (g << 8) | b;
}
}
@Export(name = "blur")
public static void blur(int[] pixels, int width, int height, int radius) {
int[] result = new int[pixels.length];
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
int r = 0, g = 0, b = 0, count = 0;
for (int dy = -radius; dy <= radius; dy++) {
for (int dx = -radius; dx <= radius; dx++) {
int nx = x + dx;
int ny = y + dy;
if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
int pixel = pixels[ny * width + nx];
r += (pixel >> 16) & 0xff;
g += (pixel >> 8) & 0xff;
b += pixel & 0xff;
count++;
}
}
}
int a = (pixels[y * width + x] >> 24) & 0xff;
result[y * width + x] = (a << 24) | 
((r / count) << 16) | 
((g / count) << 8) | 
(b / count);
}
}
System.arraycopy(result, 0, pixels, 0, pixels.length);
}
@NoSideEffects
private static int clamp(int value) {
return Math.max(0, Math.min(255, value));
}
}

Game Development with WebAssembly

package com.example.game;
import org.teavm.interop.Export;
public class GameEngine {
private static final int WIDTH = 800;
private static final int HEIGHT = 600;
private static double playerX = 400;
private static double playerY = 300;
private static double playerSpeed = 5;
private static double[] enemies = new double[100]; // x,y pairs
private static int score = 0;
private static boolean gameRunning = false;
@Export(name = "initGame")
public static void initGame() {
playerX = 400;
playerY = 300;
score = 0;
gameRunning = true;
// Initialize enemies
for (int i = 0; i < enemies.length; i += 2) {
enemies[i] = Math.random() * WIDTH;
enemies[i + 1] = Math.random() * HEIGHT;
}
}
@Export(name = "updateGame")
public static void updateGame(double deltaTime, int inputX, int inputY) {
if (!gameRunning) return;
// Update player position
playerX += inputX * playerSpeed * deltaTime;
playerY += inputY * playerSpeed * deltaTime;
// Keep player in bounds
playerX = Math.max(0, Math.min(WIDTH - 20, playerX));
playerY = Math.max(0, Math.min(HEIGHT - 20, playerY));
// Update enemies and check collisions
for (int i = 0; i < enemies.length; i += 2) {
// Simple enemy movement toward player
double dx = playerX - enemies[i];
double dy = playerY - enemies[i + 1];
double dist = Math.sqrt(dx * dx + dy * dy);
if (dist > 0) {
enemies[i] += (dx / dist) * 2 * deltaTime;
enemies[i + 1] += (dy / dist) * 2 * deltaTime;
}
// Check collision
if (Math.abs(playerX - enemies[i]) < 20 && 
Math.abs(playerY - enemies[i + 1]) < 20) {
gameRunning = false;
return;
}
}
score += (int)(deltaTime * 10);
}
@Export(name = "getGameState")
public static int getGameState() {
return gameRunning ? 1 : 0;
}
@Export(name = "getPlayerPosition")
public static void getPlayerPosition(double[] result) {
result[0] = playerX;
result[1] = playerY;
}
@Export(name = "getEnemies")
public static void getEnemies(double[] enemyArray) {
System.arraycopy(enemies, 0, enemyArray, 0, enemies.length);
}
@Export(name = "getScore")
public static int getScore() {
return score;
}
}

JavaScript Interoperability

Working with JavaScript Objects

package com.example.interop;
import org.teavm.jso.JSBody;
import org.teavm.jso.JSObject;
import org.teavm.jso.core.JSString;
import org.teavm.jso.dom.html.HTMLDocument;
import org.teavm.jso.dom.html.HTMLElement;
public class JavaScriptInterop {
// Direct JavaScript evaluation
@JSBody(params = {"message"}, script = "console.log(message);")
public static native void logToConsole(String message);
@JSBody(params = {"a", "b"}, script = "return a + b;")
public static native int addInJavaScript(int a, int b);
// Working with DOM
public static void updateDOM() {
HTMLDocument document = HTMLDocument.current();
HTMLElement element = document.getElementById("output");
if (element != null) {
element.setInnerHTML("Hello from Java WebAssembly!");
}
}
// Calling JavaScript functions
@JSBody(params = {"url"}, script = 
"return fetch(url).then(response => response.text());")
public static native JSObject fetchText(String url);
// Working with JSON
@JSBody(params = {"jsonString"}, script = "return JSON.parse(jsonString);")
public static native JSObject parseJSON(String jsonString);
@JSBody(params = {"obj"}, script = "return JSON.stringify(obj);")
public static native String stringifyJSON(JSObject obj);
}
// Custom JavaScript interface
interface Console extends JSObject {
void log(String message);
void error(String message);
void warn(String message);
}
interface MathJS extends JSObject {
double sin(double x);
double cos(double x);
double random();
}

Advanced Interop Example

package com.example.interop;
import org.teavm.interop.Export;
import org.teavm.jso.JSBody;
import org.teavm.jso.JSObject;
import org.teavm.jso.typedarrays.Int8Array;
public class DataProcessor {
@Export(name = "processData")
public static void processData(JSObject dataBuffer, int length) {
// Convert JavaScript ArrayBuffer to Java array
Int8Array jsArray = Int8Array.create(dataBuffer);
byte[] javaArray = new byte[length];
for (int i = 0; i < length; i++) {
javaArray[i] = (byte) jsArray.get(i);
}
// Process data in Java
processByteArray(javaArray);
// Send results back to JavaScript
sendResultToJavaScript(javaArray);
}
private static void processByteArray(byte[] data) {
// Example processing: XOR encryption
byte key = 0x55;
for (int i = 0; i < data.length; i++) {
data[i] = (byte) (data[i] ^ key);
}
}
@JSBody(params = {"data"}, script = 
"if (window.onDataProcessed) window.onDataProcessed(new Int8Array(data));")
private static native void sendResultToJavaScript(byte[] data);
}

Building Complex Applications

Modular Application Structure

// Main application class
package com.example.app;
import org.teavm.interop.Export;
import org.teavm.jso.JSBody;
public class WebAssemblyApp {
private static AppState state = new AppState();
@Export(name = "initialize")
public static void initialize() {
state.setInitialized(true);
log("WebAssembly application initialized");
}
@Export(name = "processData")
public static String processData(String input) {
if (!state.isInitialized()) {
return "Error: Application not initialized";
}
try {
// Complex data processing
DataProcessor processor = new DataProcessor();
String result = processor.process(input);
state.incrementProcessedCount();
return "Processed: " + result;
} catch (Exception e) {
return "Error: " + e.getMessage();
}
}
@Export(name = "getStatistics")
public static String getStatistics() {
return String.format(
"Processed items: %d, Initialized: %b",
state.getProcessedCount(),
state.isInitialized()
);
}
@JSBody(params = {"message"}, script = "console.log('[WASM] ' + message);")
private static native void log(String message);
}
// Supporting classes
class AppState {
private boolean initialized;
private int processedCount;
public boolean isInitialized() { return initialized; }
public void setInitialized(boolean initialized) { this.initialized = initialized; }
public int getProcessedCount() { return processedCount; }
public void incrementProcessedCount() { processedCount++; }
}
class DataProcessor {
public String process(String input) {
// Example processing pipeline
String step1 = validateInput(input);
String step2 = transformData(step1);
String step3 = applyBusinessLogic(step2);
return step3;
}
private String validateInput(String input) {
if (input == null || input.trim().isEmpty()) {
throw new IllegalArgumentException("Input cannot be empty");
}
return input.trim();
}
private String transformData(String input) {
// Example transformation
return input.toUpperCase();
}
private String applyBusinessLogic(String input) {
// Example business logic
StringBuilder result = new StringBuilder();
for (char c : input.toCharArray()) {
if (Character.isLetter(c)) {
result.append(c);
}
}
return result.toString();
}
}

Performance Optimization

Memory Management

package com.example.optimization;
import org.teavm.interop.Export;
import org.teavm.interop.NoSideEffects;
public class OptimizedAlgorithms {
@Export(name = "matrixMultiply")
public static void matrixMultiply(
double[] a, double[] b, double[] result, 
int aRows, int aCols, int bCols) {
for (int i = 0; i < aRows; i++) {
for (int j = 0; j < bCols; j++) {
double sum = 0;
for (int k = 0; k < aCols; k++) {
sum += a[i * aCols + k] * b[k * bCols + j];
}
result[i * bCols + j] = sum;
}
}
}
@Export(name = "quickSort")
public static void quickSort(int[] array, int low, int high) {
if (low < high) {
int pi = partition(array, low, high);
quickSort(array, low, pi - 1);
quickSort(array, pi + 1, high);
}
}
@NoSideEffects
private static int partition(int[] array, int low, int high) {
int pivot = array[high];
int i = low - 1;
for (int j = low; j < high; j++) {
if (array[j] <= pivot) {
i++;
swap(array, i, j);
}
}
swap(array, i + 1, high);
return i + 1;
}
private static void swap(int[] array, int i, int j) {
int temp = array[i];
array[i] = array[j];
array[j] = temp;
}
@Export(name = "primeSieve")
public static int primeSieve(int limit) {
boolean[] isPrime = new boolean[limit + 1];
for (int i = 2; i <= limit; i++) {
isPrime[i] = true;
}
for (int p = 2; p * p <= limit; p++) {
if (isPrime[p]) {
for (int i = p * p; i <= limit; i += p) {
isPrime[i] = false;
}
}
}
int count = 0;
for (int i = 2; i <= limit; i++) {
if (isPrime[i]) count++;
}
return count;
}
}

Build and Deployment

Maven Build Configuration

<profile>
<id>webassembly</id>
<build>
<plugins>
<plugin>
<groupId>org.teavm</groupId>
<artifactId>teavm-maven-plugin</artifactId>
<version>${teavm.version}</version>
<executions>
<execution>
<goals>
<goal>compile</goal>
</goals>
</execution>
</executions>
<configuration>
<targetType>WEBASSEMBLY</targetType>
<mainClass>com.example.Main</mainClass>
<minifying>true</minifying>
<optimization>FULL</optimization>
<outFile>app.wasm</outFile>
<sourceMapsFile>app.wasm.map</sourceMapsFile>
<debugInformationGenerated>true</debugInformationGenerated>
<cacheDirectory>${project.build.directory}/teavm-cache</cacheDirectory>
<classesDirectory>${project.build.outputDirectory}</classesDirectory>
<targetDirectory>${project.build.directory}/wasm</targetDirectory>
<inline>true</inline>
<longjmp>true</longjmp>
<maxTopLevelNames>1000</maxTopLevelNames>
<properties>
<property>
<name>teavm.worker</name>
<value>true</value>
</property>
</properties>
</configuration>
</plugin>
<!-- Copy resources -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>3.2.0</version>
<executions>
<execution>
<id>copy-resources</id>
<phase>package</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>${project.build.directory}/wasm</outputDirectory>
<resources>
<resource>
<directory>src/main/webapp</directory>
<filtering>true</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>

Deployment Script

#!/bin/bash
# deploy.sh
echo "Building Java WebAssembly application..."
# Clean previous build
mvn clean
# Build WebAssembly target
mvn package -Pwebassembly
echo "Build complete!"
echo "Generated files in target/wasm/:"
ls -la target/wasm/
# Optional: Start a local server for testing
echo "Starting local server on http://localhost:8080"
cd target/wasm/
python3 -m http.server 8080

Testing and Debugging

Unit Testing for WebAssembly

package com.example.test;
import org.junit.Test;
import static org.junit.Assert.*;
public class WebAssemblyTest {
@Test
public void testCalculatorOperations() {
assertEquals(15, Calculator.add(10, 5));
assertEquals(5, Calculator.subtract(10, 5));
assertEquals(50, Calculator.multiply(10, 5));
assertEquals(2, Calculator.divide(10, 5));
}
@Test
public void testImageProcessing() {
int[] pixels = {0xFF0000, 0x00FF00, 0x0000FF};
int[] original = pixels.clone();
ImageProcessor.grayscale(pixels, 1, 3);
// After grayscale, all pixels should have equal RGB components
for (int i = 0; i < pixels.length; i++) {
int pixel = pixels[i];
int r = (pixel >> 16) & 0xff;
int g = (pixel >> 8) & 0xff;
int b = pixel & 0xff;
assertEquals(r, g);
assertEquals(g, b);
}
}
@Test
public void testGameLogic() {
GameEngine.initGame();
assertTrue(GameEngine.getGameState() == 1);
// Test initial conditions
double[] playerPos = new double[2];
GameEngine.getPlayerPosition(playerPos);
assertEquals(400.0, playerPos[0], 0.01);
assertEquals(300.0, playerPos[1], 0.01);
}
}

Best Practices

1. Memory Efficiency

public class MemoryEfficient {
// Reuse arrays instead of creating new ones
private static final ThreadLocal<int[]> scratchBuffer = 
ThreadLocal.withInitial(() -> new int[1024]);
@Export(name = "efficientProcessing")
public static void efficientProcessing(int[] data) {
int[] buffer = scratchBuffer.get();
if (buffer.length < data.length) {
buffer = new int[data.length];
scratchBuffer.set(buffer);
}
// Process using reusable buffer
System.arraycopy(data, 0, buffer, 0, data.length);
processBuffer(buffer, data.length);
System.arraycopy(buffer, 0, data, 0, data.length);
}
private static void processBuffer(int[] buffer, int length) {
// Processing logic here
for (int i = 0; i < length; i++) {
buffer[i] = buffer[i] * 2;
}
}
}

2. Error Handling

public class RobustWebAssembly {
@Export(name = "safeOperation")
public static int safeOperation(int a, int b) {
try {
return performOperation(a, b);
} catch (Exception e) {
logError(e.getMessage());
return -1; // Error indicator
}
}
private static int performOperation(int a, int b) {
if (b == 0) {
throw new IllegalArgumentException("Division by zero");
}
return a / b;
}
@JSBody(params = {"message"}, script = "console.error('WASM Error: ' + message);")
private static native void logError(String message);
}

Conclusion

Java to WebAssembly compilation with TeaVM opens up exciting possibilities:

  1. High-Performance Web Applications - Leverage Java's performance in browsers
  2. Code Reuse - Share business logic between server and client
  3. Rich Ecosystem - Access Java's extensive libraries
  4. Type Safety - Maintain Java's compile-time safety guarantees
  5. Modern Web Development - Integrate with existing JavaScript frameworks

Key Benefits:

  • Near-native performance for computational tasks
  • Access to Java's mature ecosystem
  • Strong typing and tooling support
  • Gradual migration path for existing Java applications

Use Cases:

  • Scientific computing and simulations
  • Image and video processing
  • Games and interactive applications
  • Data visualization and analysis
  • Cryptographic operations

TeaVM provides a robust pathway for Java developers to enter the WebAssembly ecosystem while leveraging their existing skills and codebases.

Category : JAVA

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper