J2CL (Java to Closure Compiler) is a modern source-to-source transpiler that converts Java bytecode to optimized JavaScript, serving as the spiritual successor to Google Web Toolkit (GWT). This guide explores J2CL's architecture, features, and how it improves upon GWT.

J2CL Overview and Architecture

What is J2CL?

J2CL is a transpiler that converts Java bytecode to Closure-style JavaScript, which can then be optimized by the Closure Compiler for production deployment.

Key Architecture Differences

// GWT Approach: Java source → JavaScript
// J2CL Approach: Java bytecode → Closure JS → Optimized JS

Setting Up J2CL

Maven Configuration

<!-- pom.xml -->
<project>
<properties>
<j2cl.version>0.21.0</j2cl.version>
</properties>
<dependencies>
<dependency>
<groupId>com.google.j2cl</groupId>
<artifactId>j2cl-base</artifactId>
<version>${j2cl.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.google.elemental2</groupId>
<artifactId>elemental2-core</artifactId>
<version>1.1.0</version>
</dependency>
<dependency>
<groupId>com.google.elemental2</groupId>
<artifactId>elemental2-dom</artifactId>
<version>1.1.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>com.google.j2cl</groupId>
<artifactId>j2cl-maven-plugin</artifactId>
<version>${j2cl.version}</version>
<executions>
<execution>
<goals>
<goal>compile</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>

Bazel Build Configuration

# BUILD.bazel
load("@com_google_j2cl//build_defs:rules.bzl", "j2cl_library", "j2cl_application")
j2cl_library(
name = "myapp_lib",
srcs = ["MyApp.java"],
deps = [
"@com_google_elemental2//elemental2/core:core",
"@com_google_elemental2//elemental2/dom:dom",
],
)
j2cl_application(
name = "myapp",
entry_points = ["com.example.MyApp"],
deps = [":myapp_lib"],
)

Basic J2CL Application

Simple Web Application

// MyApp.java
package com.example;
import elemental2.dom.DomGlobal;
import elemental2.dom.HTMLButtonElement;
import elemental2.dom.HTMLDivElement;
import elemental2.dom.HTMLElement;
import elemental2.dom.Event;
public class MyApp {
public static void main(String[] args) {
DomGlobal.document.body.innerHTML = "";
// Create UI elements
HTMLDivElement container = (HTMLDivElement) DomGlobal.document.createElement("div");
HTMLButtonElement button = (HTMLButtonElement) DomGlobal.document.createElement("button");
HTMLDivElement output = (HTMLDivElement) DomGlobal.document.createElement("div");
// Configure elements
button.textContent = "Click me!";
button.style.cssText = """
padding: 10px 20px;
font-size: 16px;
margin: 10px;
""";
output.style.cssText = """
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
""";
// Add event listener
button.addEventListener("click", (Event evt) -> {
int count = (int) (Math.random() * 100);
output.textContent = "Random number: " + count;
DomGlobal.console.log("Button clicked, generated: " + count);
});
// Build UI
container.appendChild(button);
container.appendChild(output);
DomGlobal.document.body.appendChild(container);
DomGlobal.console.log("J2CL application started successfully!");
}
}

DOM Manipulation with Elemental2

Working with Browser APIs

package com.example.dom;
import elemental2.dom.*;
import jsinterop.annotations.JsType;
public class TodoApp {
private final HTMLUListElement todoList;
private final HTMLInputElement input;
private int todoCount = 0;
public TodoApp() {
// Create main container
HTMLDivElement container = (HTMLDivElement) DomGlobal.document.createElement("div");
container.className = "todo-container";
// Create input and button
input = (HTMLInputElement) DomGlobal.document.createElement("input");
input.type = "text";
input.placeholder = "Enter a todo item...";
HTMLButtonElement addButton = (HTMLButtonElement) DomGlobal.document.createElement("button");
addButton.textContent = "Add Todo";
// Create todo list
todoList = (HTMLUListElement) DomGlobal.document.createElement("ul");
todoList.className = "todo-list";
// Add event listeners
addButton.addEventListener("click", evt -> addTodo());
input.addEventListener("keypress", evt -> {
if ("Enter".equals(((KeyboardEvent) evt).key)) {
addTodo();
}
});
// Build UI
container.appendChild(input);
container.appendChild(addButton);
container.appendChild(todoList);
DomGlobal.document.body.appendChild(container);
applyStyles();
}
private void addTodo() {
String text = input.value.trim();
if (!text.isEmpty()) {
createTodoItem(text);
input.value = "";
input.focus();
}
}
private void createTodoItem(String text) {
HTMLLIElement li = (HTMLLIElement) DomGlobal.document.createElement("li");
li.className = "todo-item";
HTMLSpanElement textSpan = (HTMLSpanElement) DomGlobal.document.createElement("span");
textSpan.textContent = ++todoCount + ". " + text;
HTMLButtonElement deleteBtn = (HTMLButtonElement) DomGlobal.document.createElement("button");
deleteBtn.textContent = "Delete";
deleteBtn.className = "delete-btn";
deleteBtn.addEventListener("click", evt -> {
todoList.removeChild(li);
DomGlobal.console.log("Removed todo: " + text);
});
li.appendChild(textSpan);
li.appendChild(deleteBtn);
todoList.appendChild(li);
}
private void applyStyles() {
HTMLElement style = (HTMLElement) DomGlobal.document.createElement("style");
style.textContent = """
.todo-container {
max-width: 500px;
margin: 20px auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.todo-container input {
width: 70%;
padding: 8px;
margin-right: 10px;
}
.todo-container button {
padding: 8px 16px;
background: #007cba;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.todo-list {
list-style: none;
padding: 0;
margin-top: 20px;
}
.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin: 5px 0;
background: #f5f5f5;
border-radius: 4px;
}
.delete-btn {
background: #dc3545 !important;
padding: 4px 8px !important;
font-size: 12px;
}
""";
DomGlobal.document.head.appendChild(style);
}
public static void main(String[] args) {
new TodoApp();
}
}

JavaScript Interoperability

JsInterop Annotations

package com.example.interop;
import jsinterop.annotations.JsConstructor;
import jsinterop.annotations.JsMethod;
import jsinterop.annotations.JsPackage;
import jsinterop.annotations.JsProperty;
import jsinterop.annotations.JsType;
// Using existing JavaScript libraries
@JsType(isNative = true, namespace = JsPackage.GLOBAL)
public class JavaScriptIntegration {
// Native JavaScript Math.random()
public static native double random();
// Using window.console
@JsMethod(namespace = JsPackage.GLOBAL)
public static native void alert(String message);
// Working with JSON
@JsMethod(namespace = JsPackage.GLOBAL)
public static native String JSONStringify(Object obj);
@JsMethod(namespace = JsPackage.GLOBAL) 
public static native Object JSONParse(String json);
}
// Custom JavaScript-interoperable type
@JsType
public class UserData {
@JsProperty
public String name;
@JsProperty
public int age;
@JsProperty
public String email;
@JsConstructor
public UserData() {}
@JsMethod
public String toJson() {
return JavaScriptIntegration.JSONStringify(this);
}
public static UserData fromJson(String json) {
return (UserData) JavaScriptIntegration.JSONParse(json);
}
}
// Using the interoperable types
public class InteropExample {
public static void main(String[] args) {
// Call native JavaScript functions
double randomValue = JavaScriptIntegration.random();
JavaScriptIntegration.alert("Random value: " + randomValue);
// Work with JSON
UserData user = new UserData();
user.name = "John Doe";
user.age = 30;
user.email = "[email protected]";
String json = user.toJson();
DomGlobal.console.log("User JSON: " + json);
UserData parsedUser = UserData.fromJson(json);
DomGlobal.console.log("Parsed user: " + parsedUser.name);
}
}

Advanced J2CL Features

Async/Await Support

package com.example.async;
import elemental2.promise.Promise;
import jsinterop.annotations.JsMethod;
import jsinterop.annotations.JsPackage;
import jsinterop.annotations.JsType;
@JsType(isNative = true, namespace = JsPackage.GLOBAL)
public class FetchApi {
public static native Promise<Response> fetch(String url);
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL)
class Response {
public native Promise<String> text();
public native Promise<JavaScriptObject> json();
}
public class AsyncExample {
public Promise<String> fetchData(String url) {
return FetchApi.fetch(url)
.then(response -> {
if (!response.ok) {
throw new RuntimeException("HTTP error: " + response.status);
}
return response.text();
})
.then(text -> {
DomGlobal.console.log("Fetched data: " + text);
return Promise.resolve(text);
})
.catch_(error -> {
DomGlobal.console.error("Fetch error: " + error);
return Promise.reject(error);
});
}
public Promise<User[]> fetchUsers() {
return FetchApi.fetch("https://jsonplaceholder.typicode.com/users")
.then(Response::json)
.then(json -> {
// Process JSON data
User[] users = processUserData(json);
return Promise.resolve(users);
});
}
private native User[] processUserData(JavaScriptObject json);
public static void main(String[] args) {
AsyncExample example = new AsyncExample();
example.fetchData("https://api.example.com/data")
.then(data -> {
DomGlobal.console.log("Data received: " + data);
return null;
});
}
}
// User record for data binding
record User(int id, String name, String email) {}

Web Components with J2CL

package com.example.components;
import elemental2.dom.*;
import jsinterop.annotations.JsType;
@JsType
public class CustomButton extends HTMLElement {
private HTMLButtonElement button;
private int clickCount = 0;
public CustomButton() {
// Create shadow DOM
ShadowRoot shadow = this.attachShadow(new ShadowRootInit.Builder()
.setMode("open")
.build());
// Create button element
button = (HTMLButtonElement) DomGlobal.document.createElement("button");
button.style.cssText = """
padding: 12px 24px;
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
transition: transform 0.2s;
""";
updateButtonText();
// Add hover effects
button.addEventListener("mouseenter", evt -> {
button.style.transform = "scale(1.05)";
});
button.addEventListener("mouseleave", evt -> {
button.style.transform = "scale(1)";
});
// Add click handler
button.addEventListener("click", evt -> {
clickCount++;
updateButtonText();
// Dispatch custom event
CustomEvent customEvent = new CustomEvent("buttonClicked");
customEvent.setDetail(new ClickDetail(clickCount, System.currentTimeMillis()));
this.dispatchEvent(customEvent);
});
shadow.appendChild(button);
}
private void updateButtonText() {
button.textContent = "Clicked: " + clickCount + " times";
}
// Attribute change handling
public static void observedAttributes() {
return new String[]{"color-scheme"};
}
public void attributeChangedCallback(String name, String oldValue, String newValue) {
if ("color-scheme".equals(name)) {
applyColorScheme(newValue);
}
}
private void applyColorScheme(String scheme) {
switch (scheme) {
case "dark":
button.style.background = "linear-gradient(45deg, #2c3e50, #34495e)";
break;
case "light":
button.style.background = "linear-gradient(45deg, #667eea, #764ba2)";
break;
}
}
// Custom event detail class
@JsType
public static class ClickDetail {
public final int count;
public final double timestamp;
public ClickDetail(int count, double timestamp) {
this.count = count;
this.timestamp = timestamp;
}
}
}
// Component registry
public class WebComponentRegistry {
public static void registerComponents() {
DomGlobal.customElements.define("custom-button", CustomButton.class);
}
public static void main(String[] args) {
registerComponents();
// Create and use custom element
CustomButton button = (CustomButton) DomGlobal.document.createElement("custom-button");
button.setAttribute("color-scheme", "dark");
button.addEventListener("buttonClicked", evt -> {
CustomButton.ClickDetail detail = (CustomButton.ClickDetail) ((CustomEvent) evt).detail;
DomGlobal.console.log("Button clicked " + detail.count + " times at " + detail.timestamp);
});
DomGlobal.document.body.appendChild(button);
}
}

State Management Patterns

Reactive State Management

package com.example.state;
import java.util.ArrayList;
import java.util.List;
import java.util.function.Consumer;
public class Store<T> {
private T state;
private final List<Consumer<T>> listeners = new ArrayList<>();
public Store(T initialState) {
this.state = initialState;
}
public T getState() {
return state;
}
public void setState(T newState) {
this.state = newState;
notifyListeners();
}
public void updateState(Consumer<T> updater) {
updater.accept(state);
notifyListeners();
}
public void subscribe(Consumer<T> listener) {
listeners.add(listener);
}
public void unsubscribe(Consumer<T> listener) {
listeners.remove(listener);
}
private void notifyListeners() {
for (Consumer<T> listener : listeners) {
listener.accept(state);
}
}
}
// Application state
record AppState(int counter, String message, boolean loading) {
public AppState withCounter(int newCounter) {
return new AppState(newCounter, this.message, this.loading);
}
public AppState withMessage(String newMessage) {
return new AppState(this.counter, newMessage, this.loading);
}
public AppState withLoading(boolean newLoading) {
return new AppState(this.counter, this.message, newLoading);
}
}
// Stateful component
public class CounterApp {
private final Store<AppState> store;
private final HTMLDivElement container;
public CounterApp() {
this.store = new Store<>(new AppState(0, "Ready", false));
this.container = (HTMLDivElement) DomGlobal.document.createElement("div");
initializeUI();
setupSubscriptions();
}
private void initializeUI() {
container.innerHTML = """
<div class="counter-app">
<h1>Counter: <span id="counter-value">0</span></h1>
<p id="status-message">Ready</p>
<button id="increment-btn">Increment</button>
<button id="decrement-btn">Decrement</button>
<button id="reset-btn">Reset</button>
</div>
""";
// Add event listeners
container.querySelector("#increment-btn")
.addEventListener("click", evt -> increment());
container.querySelector("#decrement-btn")
.addEventListener("click", evt -> decrement());
container.querySelector("#reset-btn")
.addEventListener("click", evt -> reset());
DomGlobal.document.body.appendChild(container);
}
private void setupSubscriptions() {
store.subscribe(state -> {
updateCounterDisplay(state.counter());
updateStatusMessage(state.message());
});
}
private void increment() {
store.updateState(state -> {
int newCounter = state.counter() + 1;
String message = "Counter incremented to " + newCounter;
return state.withCounter(newCounter).withMessage(message);
});
}
private void decrement() {
store.updateState(state -> {
int newCounter = state.counter() - 1;
String message = "Counter decremented to " + newCounter;
return state.withCounter(newCounter).withMessage(message);
});
}
private void reset() {
store.setState(new AppState(0, "Counter reset", false));
}
private void updateCounterDisplay(int value) {
HTMLElement counterElement = (HTMLElement) container.querySelector("#counter-value");
counterElement.textContent = String.valueOf(value);
}
private void updateStatusMessage(String message) {
HTMLElement messageElement = (HTMLElement) container.querySelector("#status-message");
messageElement.textContent = message;
}
public static void main(String[] args) {
new CounterApp();
}
}

Testing J2CL Applications

Unit Testing Setup

// Test configuration for J2CL
package com.example.test;
import com.google.j2cl.junit.apt.J2clTestInput;
import org.junit.Test;
import org.junit.runner.RunWith;
import static org.junit.Assert.*;
@RunWith(com.google.j2cl.junit.J2clTestRunner.class)
@J2clTestInput(TodoAppTest.class)
public class TodoAppTest {
@Test
public void testTodoItemCreation() {
// Test business logic without DOM dependencies
TodoApp app = new TodoApp();
// Test methods that don't require browser environment
}
@Test 
public void testStateManagement() {
Store<AppState> store = new Store<>(new AppState(0, "Test", false));
store.subscribe(state -> {
assertEquals(0, state.counter());
});
store.setState(new AppState(1, "Updated", false));
}
}

Build and Deployment

Optimized Production Build

# With Bazel
bazel build //src/main/java/com/example:myapp
# With Maven  
mvn clean compile j2cl:compile
# Output will be in target/j2cl-out/ for Maven
# or bazel-bin/ for Bazel

Integration with Modern Bundlers

// webpack.config.js for J2CL output
module.exports = {
entry: './target/j2cl-out/myapp.js',
output: {
filename: 'app.bundle.js',
path: __dirname + '/dist'
},
optimization: {
minimizer: [
new (require('closure-compiler'))({
compilation_level: 'ADVANCED',
language_in: 'ECMASCRIPT_2019',
language_out: 'ECMASCRIPT_2019'
})
]
}
};

Comparison: J2CL vs GWT

Conclusion

J2CL represents the modern evolution of Java-to-JavaScript compilation with significant advantages over GWT:

Key Benefits:

• Better optimization through Closure Compiler
• Superior interoperability with modern JavaScript
• Modern tooling integration with Bazel, Maven, and Gradle
• Smaller output sizes with advanced optimizations
• Type-safe JavaScript interop via JsInterop

Use Cases:

• Large-scale web applications requiring type safety
• Code sharing between server and client
• Teams with strong Java expertise building web apps
• Applications requiring advanced JavaScript optimization

Migration Path from GWT:

1. Start with shared business logic
2. Gradually replace UI components with Elemental2
3. Convert JSNI to JsInterop
4. Update build configuration
5. Leverage modern JavaScript tooling

J2CL provides a robust, future-proof path for Java developers to build high-performance web applications while leveraging the entire Java ecosystem and tooling.