Java to JavaScript with TeaVM in Java

Introduction

TeaVM is an ahead-of-time compiler for Java bytecode that converts Java applications to JavaScript, allowing Java code to run in web browsers. It provides a way to write web applications in Java while maintaining good performance and compatibility.

TeaVM Setup and Configuration

Maven Configuration

<!-- pom.xml -->
<project>
<properties>
<teavm.version>0.8.0</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>
<!-- 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>web-client</id>
<goals>
<goal>compile</goal>
</goals>
<configuration>
<targetDirectory>${project.build.directory}/teavm</targetDirectory>
<mainClass>com.example.Main</mainClass>
<minifying>true</minifying>
<sourceMapsGenerated>true</sourceMapsGenerated>
<sourceFilesCopied>true</sourceFilesCopied>
<debugInformationGenerated>true</debugInformationGenerated>
<optimization>FULL</optimization>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>

Gradle Configuration

// build.gradle
plugins {
id 'java'
id 'org.teavm' version '0.8.0'
}
teavm {
version = '0.8.0'
all {
mainClass = 'com.example.Main'
targetDirectory = file('build/teavm')
minifying = true
sourceMapsGenerated = true
sourceFilesCopied = true
debugInformationGenerated = true
optimization = 'FULL'
}
}
dependencies {
implementation 'org.teavm:teavm-classlib:0.8.0'
implementation 'org.teavm:teavm-platform:0.8.0'
implementation 'org.teavm:teavm-jso:0.8.0'
implementation 'org.teavm:teavm-jso-apis:0.8.0'
}

Basic TeaVM Application

Simple Web Application

package com.example;
import org.teavm.jso.JSBody;
import org.teavm.jso.dom.html.HTMLDocument;
import org.teavm.jso.dom.html.HTMLElement;
import org.teavm.jso.dom.html.Text;
public class Main {
public static void main(String[] args) {
// Get the document
HTMLDocument document = HTMLDocument.current();
// Create a heading
HTMLElement heading = document.createElement("h1");
heading.appendChild(document.createTextNode("Hello from Java!"));
// Create a button
HTMLElement button = document.createElement("button");
button.appendChild(document.createTextNode("Click me!"));
// Add click handler
button.addEventListener("click", event -> {
showAlert("Button clicked from Java!");
updateCounter();
});
// Create counter display
HTMLElement counter = document.createElement("div");
counter.setAttribute("id", "counter");
counter.appendChild(document.createTextNode("Count: 0"));
// Add everything to body
HTMLElement body = document.getBody();
body.appendChild(heading);
body.appendChild(button);
body.appendChild(counter);
}
private static int clickCount = 0;
private static void updateCounter() {
clickCount++;
HTMLElement counter = HTMLDocument.current().getElementById("counter");
if (counter != null) {
counter.setInnerHTML("Count: " + clickCount);
}
}
@JSBody(params = {"message"}, script = "alert(message);")
private static native void showAlert(String message);
}

JavaScript Interoperability

Working with JavaScript Objects

package com.example.js;
import org.teavm.jso.JSBody;
import org.teavm.jso.JSObject;
import org.teavm.jso.JSProperty;
import org.teavm.jso.core.JSString;
public class JavaScriptInterop {
// Interface for JavaScript objects
public interface User extends JSObject {
@JSProperty
String getName();
@JSProperty
void setName(String name);
@JSProperty
int getAge();
@JSProperty
void setAge(int age);
}
// Creating JavaScript objects from Java
@JSBody(script = "return {};")
public static native User createUser();
// Calling JavaScript functions
@JSBody(params = {"user"}, script = "console.log(user);")
public static native void logUser(User user);
// Working with JSON
@JSBody(params = {"json"}, script = "return JSON.parse(json);")
public static native User parseUser(String json);
@JSBody(params = {"user"}, script = "return JSON.stringify(user);")
public static native String stringifyUser(User user);
public static void demonstrateInterop() {
// Create a JavaScript object
User user = createUser();
user.setName("John Doe");
user.setAge(30);
// Log to console
logUser(user);
// Convert to JSON and back
String json = stringifyUser(user);
System.out.println("JSON: " + json);
User parsedUser = parseUser(json);
System.out.println("Parsed name: " + parsedUser.getName());
}
}

DOM Manipulation

package com.example.dom;
import org.teavm.jso.dom.html.HTMLDocument;
import org.teavm.jso.dom.html.HTMLElement;
import org.teavm.jso.dom.html.HTMLInputElement;
import org.teavm.jso.dom.html.HTMLButtonElement;
import org.teavm.jso.dom.events.EventListener;
import org.teavm.jso.dom.events.Event;
public class DOMExample {
public static void createTodoApp() {
HTMLDocument document = HTMLDocument.current();
HTMLElement body = document.getBody();
// Create container
HTMLElement container = document.createElement("div");
container.setAttribute("class", "container");
// Create input field
HTMLInputElement input = (HTMLInputElement) document.createElement("input");
input.setType("text");
input.setAttribute("placeholder", "Enter a todo item");
input.setAttribute("id", "todoInput");
// Create add button
HTMLButtonElement addButton = (HTMLButtonElement) document.createElement("button");
addButton.setInnerHTML("Add Todo");
// Create todo list
HTMLElement todoList = document.createElement("ul");
todoList.setAttribute("id", "todoList");
// Add event listener
addButton.addEventListener("click", event -> {
String todoText = input.getValue().trim();
if (!todoText.isEmpty()) {
addTodoItem(todoList, todoText);
input.setValue(""); // Clear input
}
});
// Also allow Enter key
input.addEventListener("keypress", event -> {
if ("Enter".equals(event.getKey())) {
String todoText = input.getValue().trim();
if (!todoText.isEmpty()) {
addTodoItem(todoList, todoText);
input.setValue("");
}
}
});
// Add everything to container
container.appendChild(input);
container.appendChild(addButton);
container.appendChild(todoList);
body.appendChild(container);
}
private static void addTodoItem(HTMLElement todoList, String text) {
HTMLDocument document = HTMLDocument.current();
// Create list item
HTMLElement li = document.createElement("li");
li.setAttribute("class", "todo-item");
// Create text span
HTMLElement span = document.createElement("span");
span.setInnerHTML(text);
// Create delete button
HTMLButtonElement deleteBtn = (HTMLButtonElement) document.createElement("button");
deleteBtn.setInnerHTML("Delete");
deleteBtn.setAttribute("class", "delete-btn");
deleteBtn.addEventListener("click", event -> {
todoList.removeChild(li);
});
// Add elements to list item
li.appendChild(span);
li.appendChild(deleteBtn);
// Add to list
todoList.appendChild(li);
}
}

Advanced TeaVM Features

Working with JavaScript Libraries

package com.example.chart;
import org.teavm.jso.JSBody;
import org.teavm.jso.JSObject;
import org.teavm.jso.JSProperty;
import org.teavm.jso.dom.html.HTMLDocument;
import org.teavm.jso.dom.html.HTMLElement;
public class ChartJSIntegration {
// Chart.js configuration interface
public interface ChartConfig extends JSObject {
@JSProperty
String getType();
@JSProperty
void setType(String type);
@JSProperty
ChartData getData();
@JSProperty
void setData(ChartData data);
@JSProperty
ChartOptions getOptions();
@JSProperty
void setOptions(ChartOptions options);
}
public interface ChartData extends JSObject {
@JSProperty
JSString[] getLabels();
@JSProperty
void setLabels(JSString[] labels);
@JSProperty
Dataset[] getDatasets();
@JSProperty
void setDatasets(Dataset[] datasets);
}
public interface Dataset extends JSObject {
@JSProperty
String getLabel();
@JSProperty
void setLabel(String label);
@JSProperty
int[] getData();
@JSProperty
void setData(int[] data);
@JSProperty
String[] getBackgroundColor();
@JSProperty
void setBackgroundColor(String[] backgroundColor);
}
public interface ChartOptions extends JSObject {
@JSProperty
boolean isResponsive();
@JSProperty
void setResponsive(boolean responsive);
}
public interface Chart extends JSObject {
void destroy();
}
// Native JavaScript methods for Chart.js
@JSBody(script = "return typeof Chart !== 'undefined';")
public static native boolean isChartJSAvailable();
@JSBody(params = {"canvas", "config"}, script = "return new Chart(canvas, config);")
public static native Chart createChart(HTMLElement canvas, ChartConfig config);
public static void createSampleChart() {
if (!isChartJSAvailable()) {
System.err.println("Chart.js is not available");
return;
}
HTMLDocument document = HTMLDocument.current();
// Create canvas element
HTMLElement canvas = document.createElement("canvas");
canvas.setAttribute("id", "myChart");
canvas.setAttribute("width", "400");
canvas.setAttribute("height", "400");
// Create chart configuration
ChartConfig config = createChartConfig();
// Create chart
Chart chart = createChart(canvas, config);
// Add to document
document.getBody().appendChild(canvas);
}
private static ChartConfig createChartConfig() {
ChartConfig config = (ChartConfig) JSObject.create();
config.setType("bar");
ChartData data = (ChartData) JSObject.create();
data.setLabels(new JSString[]{
JSString.valueOf("January"),
JSString.valueOf("February"), 
JSString.valueOf("March"),
JSString.valueOf("April"),
JSString.valueOf("May")
});
Dataset dataset = (Dataset) JSObject.create();
dataset.setLabel("Sales");
dataset.setData(new int[]{65, 59, 80, 81, 56});
dataset.setBackgroundColor(new String[]{
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)"
});
data.setDatasets(new Dataset[]{dataset});
config.setData(data);
ChartOptions options = (ChartOptions) JSObject.create();
options.setResponsive(true);
config.setOptions(options);
return config;
}
}

Async Operations with Promises

package com.example.async;
import org.teavm.jso.JSBody;
import org.teavm.jso.JSObject;
import org.teavm.jso.core.JSPromise;
import org.teavm.jso.typedarrays.ArrayBuffer;
public class AsyncOperations {
public interface FetchResponse extends JSObject {
JSPromise<ArrayBuffer> arrayBuffer();
JSPromise<String> text();
JSPromise<JSObject> json();
}
// Fetch API integration
@JSBody(params = {"url"}, script = "return fetch(url);")
public static native JSPromise<FetchResponse> fetch(String url);
public static void demonstrateAsyncOperations() {
// Fetch data from API
fetch("https://api.example.com/data")
.then(response -> response.json())
.then(data -> {
System.out.println("Data received: " + data);
processData(data);
return null;
})
.catch(error -> {
System.err.println("Error fetching data: " + error);
return null;
});
}
private static void processData(JSObject data) {
// Process the received data
HTMLDocument document = HTMLDocument.current();
HTMLElement div = document.createElement("div");
div.setInnerHTML("Data processed successfully");
document.getBody().appendChild(div);
}
// Custom async operations
public static JSPromise<String> delayedOperation(String input, int delayMs) {
return new JSPromise<>((resolve, reject) -> {
setTimeout(() -> {
resolve.execute("Processed: " + input);
}, delayMs);
});
}
@JSBody(params = {"callback", "delay"}, script = "setTimeout(callback, delay);")
private static native void setTimeout(Runnable callback, int delay);
public static void useCustomAsync() {
delayedOperation("Hello", 2000)
.then(result -> {
System.out.println("Async result: " + result);
return null;
});
}
}

Building a Complete Application

Single Page Application (SPA)

package com.example.spa;
import org.teavm.jso.dom.html.HTMLDocument;
import org.teavm.jso.dom.html.HTMLElement;
import org.teavm.jso.dom.html.HTMLAnchorElement;
import org.teavm.jso.dom.html.HTMLDivElement;
public class SinglePageApplication {
private static HTMLDivElement contentArea;
public static void main(String[] args) {
HTMLDocument document = HTMLDocument.current();
// Create navigation
createNavigation();
// Create content area
contentArea = (HTMLDivElement) document.createElement("div");
contentArea.setAttribute("id", "content");
document.getBody().appendChild(contentArea);
// Show home page by default
showHomePage();
}
private static void createNavigation() {
HTMLDocument document = HTMLDocument.current();
HTMLElement nav = document.createElement("nav");
nav.setAttribute("class", "navbar");
String[] pages = {"Home", "About", "Contact", "Products"};
for (String page : pages) {
HTMLAnchorElement link = (HTMLAnchorElement) document.createElement("a");
link.setInnerHTML(page);
link.setAttribute("href", "#");
link.setAttribute("class", "nav-link");
link.addEventListener("click", event -> {
event.preventDefault();
showPage(page.toLowerCase());
});
nav.appendChild(link);
}
document.getBody().appendChild(nav);
}
private static void showPage(String pageName) {
switch (pageName) {
case "home":
showHomePage();
break;
case "about":
showAboutPage();
break;
case "contact":
showContactPage();
break;
case "products":
showProductsPage();
break;
default:
showHomePage();
}
}
private static void showHomePage() {
contentArea.setInnerHTML("""
<div class="page">
<h1>Welcome to Our SPA</h1>
<p>This is a single page application built with Java and TeaVM.</p>
<button id="homeBtn">Click Me!</button>
</div>
""");
HTMLElement button = HTMLDocument.current().getElementById("homeBtn");
if (button != null) {
button.addEventListener("click", event -> {
showAlert("Hello from Home Page!");
});
}
}
private static void showAboutPage() {
contentArea.setInnerHTML("""
<div class="page">
<h1>About Us</h1>
<p>We are a company that uses Java to build web applications.</p>
<p>TeaVM allows us to write frontend code in Java.</p>
</div>
""");
}
private static void showContactPage() {
contentArea.setInnerHTML("""
<div class="page">
<h1>Contact Us</h1>
<form id="contactForm">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<div>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
</div>
<button type="submit">Send Message</button>
</form>
</div>
""");
HTMLElement form = HTMLDocument.current().getElementById("contactForm");
if (form != null) {
form.addEventListener("submit", event -> {
event.preventDefault();
handleContactForm();
});
}
}
private static void showProductsPage() {
contentArea.setInnerHTML("""
<div class="page">
<h1>Our Products</h1>
<div id="productsList">
<p>Loading products...</p>
</div>
</div>
""");
// Simulate loading products
loadProducts();
}
private static void handleContactForm() {
String name = getInputValue("name");
String email = getInputValue("email");
String message = getInputValue("message");
if (name.isEmpty() || email.isEmpty() || message.isEmpty()) {
showAlert("Please fill in all fields");
return;
}
showAlert("Thank you for your message, " + name + "!");
clearForm();
}
private static String getInputValue(String id) {
HTMLElement element = HTMLDocument.current().getElementById(id);
return element != null ? element.getAttribute("value") : "";
}
private static void clearForm() {
setInputValue("name", "");
setInputValue("email", "");
setInputValue("message", "");
}
private static void setInputValue(String id, String value) {
HTMLElement element = HTMLDocument.current().getElementById(id);
if (element != null) {
element.setAttribute("value", value);
}
}
private static void loadProducts() {
// Simulate API call
setTimeout(() -> {
String[] products = {"Product A", "Product B", "Product C", "Product D"};
StringBuilder html = new StringBuilder();
html.append("<ul>");
for (String product : products) {
html.append("<li>").append(product).append("</li>");
}
html.append("</ul>");
HTMLElement productsList = HTMLDocument.current().getElementById("productsList");
if (productsList != null) {
productsList.setInnerHTML(html.toString());
}
}, 1000);
}
@org.teavm.jso.JSBody(params = {"callback", "delay"}, script = "setTimeout(callback, delay);")
private static native void setTimeout(Runnable callback, int delay);
@org.teavm.jso.JSBody(params = {"message"}, script = "alert(message);")
private static native void showAlert(String message);
}

Testing and Debugging

Unit Testing with TeaVM

package com.example.test;
import org.teavm.junit.TeaVMTestRunner;
import org.junit.Test;
import org.junit.runner.RunWith;
import static org.junit.Assert.*;
@RunWith(TeaVMTestRunner.class)
public class BusinessLogicTest {
@Test
public void testCalculator() {
Calculator calc = new Calculator();
assertEquals(5, calc.add(2, 3));
assertEquals(1, calc.subtract(4, 3));
assertEquals(6, calc.multiply(2, 3));
assertEquals(2, calc.divide(6, 3));
}
@Test
public void testStringUtils() {
assertTrue(StringUtils.isNullOrEmpty(null));
assertTrue(StringUtils.isNullOrEmpty(""));
assertFalse(StringUtils.isNullOrEmpty("Hello"));
assertEquals("HELLO", StringUtils.toUpper("hello"));
}
}
class Calculator {
public int add(int a, int b) { return a + b; }
public int subtract(int a, int b) { return a - b; }
public int multiply(int a, int b) { return a * b; }
public int divide(int a, int b) { return a / b; }
}
class StringUtils {
public static boolean isNullOrEmpty(String str) {
return str == null || str.isEmpty();
}
public static String toUpper(String str) {
return str != null ? str.toUpperCase() : null;
}
}

Debugging Configuration

package com.example.debug;
import org.teavm.jso.JSBody;
import org.teavm.jso.console.Console;
public class DebuggingUtils {
// Console logging
public static void log(String message) {
Console.log("LOG: " + message);
}
public static void warn(String message) {
Console.warn("WARN: " + message);
}
public static void error(String message) {
Console.error("ERROR: " + message);
}
// Performance measurement
public static void measureTime(String operationName, Runnable operation) {
long start = currentTimeMillis();
operation.run();
long end = currentTimeMillis();
log(operationName + " took " + (end - start) + "ms");
}
@JSBody(script = "return Date.now();")
private static native long currentTimeMillis();
// Assertions for development
public static void assertThat(boolean condition, String message) {
if (!condition) {
throw new AssertionError("Assertion failed: " + message);
}
}
// Debug information display
public static void showDebugInfo() {
log("User Agent: " + getUserAgent());
log("Viewport: " + getViewportSize());
}
@JSBody(script = "return navigator.userAgent;")
private static native String getUserAgent();
@JSBody(script = "return window.innerWidth + 'x' + window.innerHeight;")
private static native String getViewportSize();
}

Build and Deployment

HTML Wrapper Template

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Java TeaVM Application</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
.navbar {
background-color: #333;
padding: 10px;
margin-bottom: 20px;
}
.nav-link {
color: white;
text-decoration: none;
margin-right: 15px;
padding: 5px 10px;
}
.nav-link:hover {
background-color: #555;
}
.page {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
.delete-btn {
background-color: #ff4444;
color: white;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="loading">Loading Java application...</div>
<!-- TeaVM will replace this with compiled JavaScript -->
<script type="text/javascript" src="teavm.js"></script>
<script>
// Show loading message until Java app is ready
window.addEventListener('load', function() {
document.getElementById('loading').style.display = 'none';
});
</script>
</body>
</html>

Build Script for Production

package com.example.build;
public class BuildConfiguration {
/*
* TeaVM Maven plugin configuration for production:
* 
* <configuration>
*   <mainClass>com.example.Main</mainClass>
*   <targetDirectory>target/teavm</targetDirectory>
*   <minifying>true</minifying>
*   <sourceMapsGenerated>false</sourceMapsGenerated> <!-- Disable for production -->
*   <debugInformationGenerated>false</debugInformationGenerated>
*   <optimization>ADVANCED</optimization>
*   <targetType>JAVASCRIPT</targetType>
*   <classesToPreserve>
*     <class>com.example.Main</class>
*     <class>com.example.**</class>
*   </classesToPreserve>
*   <entryPointName>myJavaApp</entryPointName>
* </configuration>
*/
}

Best Practices

Performance Optimization

package com.example.optimization;
import org.teavm.jso.JSBody;
public class PerformanceTips {
// 1. Minimize JSO calls
public static class EfficientDOMOperations {
// Inefficient: multiple DOM calls
public static void inefficientUpdate() {
for (int i = 0; i < 100; i++) {
appendItem("Item " + i); // 100 DOM calls
}
}
// Efficient: batch DOM operations
public static void efficientUpdate() {
StringBuilder html = new StringBuilder();
for (int i = 0; i < 100; i++) {
html.append("<li>Item ").append(i).append("</li>");
}
setInnerHTML("list", html.toString()); // 1 DOM call
}
@JSBody(params = {"text"}, script = """
var li = document.createElement('li');
li.textContent = text;
document.getElementById('list').appendChild(li);
""")
private static native void appendItem(String text);
@JSBody(params = {"id", "html"}, script = """
document.getElementById(id).innerHTML = html;
""")
private static native void setInnerHTML(String id, String html);
}
// 2. Use efficient data structures
public static class DataOptimization {
// Prefer primitive arrays over collections for performance
public static int[] processNumbers(int[] input) {
int[] result = new int[input.length];
for (int i = 0; i < input.length; i++) {
result[i] = input[i] * 2;
}
return result;
}
}
// 3. Lazy loading for large applications
public static class LazyLoading {
private static boolean featureLoaded = false;
public static void loadFeatureOnDemand() {
if (!featureLoaded) {
loadFeature();
featureLoaded = true;
}
}
@JSBody(script = """
// Dynamically load additional JavaScript
var script = document.createElement('script');
script.src = 'feature.js';
document.head.appendChild(script);
""")
private static native void loadFeature();
}
}

Conclusion

TeaVM provides a powerful way to compile Java to JavaScript, enabling:

Full-stack Java development - Use Java for both backend and frontend
Type safety - Leverage Java's strong typing in the browser
Code reuse - Share business logic between server and client
JavaScript interoperability - Seamlessly work with existing JavaScript libraries
Good performance - Ahead-of-time compilation produces efficient JavaScript

Key considerations when using TeaVM:

Some Java libraries may not be compatible
Reflection usage is limited
File I/O operations are simulated
Focus on business logic and use JSO for DOM manipulation

TeaVM is particularly suitable for:

Enterprise web applications
Applications with complex business logic
Teams with strong Java expertise
Projects requiring code sharing between client and server