Arbeiten mit WebAssembly und Java: Ausführen von Java-Code im Browser

Einleitung: Warum Java in WebAssembly?

WebAssembly (WASM) ist ein binäres Low-Level-Anweisungsformat, das für die Ausführung im Browser mit nahezu nativer Leistung entwickelt wurde. Lange Zeit blieb Java aufgrund seiner virtuellen Maschine (JVM) außerhalb dieses Ökosystems. Moderne Werkzeuge wie TeaVM und CheerpJ ermöglichen jedoch die Kompilierung von Java-Code in WebAssembly und eröffnen neue Möglichkeiten für die Webentwicklung.

In diesem Artikel analysieren wir, wie das Zusammenspiel von Java + WebAssembly funktioniert, betrachten praktische Beispiele und bewerten die Leistung. Sie erfahren, wie Sie vorhandenen Java-Code ohne Umschreiben in JavaScript in den Browser übertragen können.

Grundlegende Ansätze zur Integration von Java und WebAssembly

Es gibt zwei Hauptmethoden, um Java-Code in WebAssembly auszuführen:

• Kompilierung von Bytecode in WASM – TeaVM wird verwendet, das Java-Bytecode in WebAssembly übersetzt.
• Ausführung der JVM im Browser – CheerpJ emuliert die JVM in WebAssembly und ermöglicht die Ausführung unveränderter Java-Anwendungen.

Der erste Ansatz ist für neue Projekte vorzuziehen, da er eine kleinere Bündelgröße und eine bessere Leistung bietet. Der zweite Ansatz eignet sich für die Portierung von Legacy-Anwendungen.

Projekteinrichtung mit TeaVM

Um mit TeaVM zu beginnen, fügen Sie die Abhängigkeit in pom.xml (Maven) hinzu:

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

Erstellen Sie eine einfache Java-Klasse zur Kompilierung:

import org.teavm.jso.JSBody;import org.teavm.jso.JSExport;

public class Calculator {        @JSExport    public static int add(int a, int b) {        return a + b;    }        @JSExport    public static int factorial(int n) {        if (n <= 1) return 1;        return n * factorial(n - 1);    }}

Die Annotation @JSExport macht die Methoden aus JavaScript zugänglich. Nach der Kompilierung erhalten Sie ein WASM-Modul und einen JavaScript-Wrapper.

Praktisches Beispiel: Kompilierung und Aufruf aus JavaScript

Betrachten wir den vollständigen Zyklus von der Kompilierung bis zum Aufruf im Browser. Zuerst kompilieren wir den Java-Code mit dem TeaVM-Plugin:

<plugin>    <groupId>org.teavm</groupId>    <artifactId>teavm-maven-plugin</artifactId>    <version>0.9.0</version>    <configuration>        <targetType>WEBASSEMBLY</targetType>        <mainClass>com.example.Calculator</mainClass>    </configuration>    <executions>        <execution>            <goals>                <goal>compile</goal>            </goals>        </execution>    </executions></plugin>

Nach dem Build (mvn package) erscheinen im Ordner target die Dateien: calculator.wasm und calculator.js. Jetzt erstellen wir eine HTML-Seite:

<!DOCTYPE html><html><head>    <title>Java + WebAssembly Demo</title></head><body>    <h1>Taschenrechner auf Java in WASM</h1>    <p>Ergebnis: <span id="result"></span></p>        <script src="calculator.js"></script>    <script>        // Callback-Funktion nach dem Laden von WASM        teavmMain().then(function(api) {            var sum = api.com.example.Calculator.add(15, 27);            var fact = api.com.example.Calculator.factorial(5);            document.getElementById('result').innerHTML =                 '15 + 27 = ' + sum + '<br>' +                '5! = ' + fact;        });    </script></body></html>

Öffnen Sie die Seite