Trabajo con WebAssembly y Java: ejecución de código Java en el navegador

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Introducción: ¿Por qué Java en WebAssembly?

WebAssembly (WASM) es un formato binario de instrucciones de bajo nivel, diseñado para ejecutarse en el navegador con un rendimiento casi nativo. Durante mucho tiempo, Java permaneció fuera de este ecosistema debido a su máquina virtual (JVM). Sin embargo, herramientas modernas como TeaVM y CheerpJ permiten compilar código Java a WebAssembly, abriendo nuevas posibilidades para el desarrollo web.

En este artículo, analizaremos cómo funciona la combinación Java + WebAssembly, veremos ejemplos prácticos y evaluaremos el rendimiento. Aprenderá cómo migrar código Java existente al navegador sin tener que reescribirlo en JavaScript.

Enfoques principales para la integración de Java y WebAssembly

Existen dos formas principales de ejecutar código Java en WebAssembly:

Compilación de bytecode a WASM — se utiliza TeaVM, que traduce el bytecode de Java a WebAssembly.
Ejecución de la JVM en el navegador — CheerpJ emula la JVM en WebAssembly, permitiendo ejecutar aplicaciones Java sin modificar.

El primer enfoque es preferible para proyectos nuevos, ya que ofrece un tamaño de paquete más pequeño y un mejor rendimiento. El segundo es adecuado para portar aplicaciones heredadas (legacy).

Configuración del proyecto con TeaVM

Para comenzar a trabajar con TeaVM, agregue la dependencia en pom.xml (Maven):

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

Cree una clase Java simple para compilar:

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);    }}

La anotación @JSExport hace que los métodos sean accesibles desde JavaScript. Después de la compilación, obtendrá un módulo WASM y un envoltorio JavaScript.

Ejemplo práctico: Compilación y llamada desde JavaScript

Veamos el ciclo completo desde la compilación hasta la llamada en el navegador. Primero, compilemos el código Java usando el plugin de TeaVM:

<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>

Después de la compilación (mvn package), en la carpeta target aparecerán los archivos: calculator.wasm y calculator.js. Ahora, creemos una página HTML:

<!DOCTYPE html><html><head>    <title>Java + WebAssembly Demo</title></head><body>    <h1>Calculadora Java en WASM</h1>    <p>Resultado: <span id="result"></span></p>        <script src="calculator.js"></script>    <script>        // Función de devolución de llamada después de cargar 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>

Abra la página