Trabalhando com WebAssembly e Java: executando código Java no navegador

Introdução: Por que Java no WebAssembly?

WebAssembly (WASM) é um formato binário de instruções de baixo nível, projetado para execução no navegador com desempenho quase nativo. Por muito tempo, Java permaneceu fora desse ecossistema devido à sua máquina virtual (JVM). No entanto, ferramentas modernas como TeaVM e CheerpJ permitem compilar código Java em WebAssembly, abrindo novas possibilidades para o desenvolvimento web.

Neste artigo, vamos analisar como funciona a combinação Java + WebAssembly, explorar exemplos práticos e avaliar o desempenho. Você aprenderá como migrar código Java existente para o navegador sem reescrevê-lo em JavaScript.

Principais abordagens para integrar Java e WebAssembly

Existem duas maneiras principais de executar código Java no WebAssembly:

• Compilação de bytecode para WASM — usa-se TeaVM, que traduz bytecode Java para WebAssembly.
• Execução da JVM no navegador — CheerpJ emula a JVM no WebAssembly, permitindo executar aplicações Java inalteradas.

A primeira abordagem é preferível para novos projetos, pois resulta em um tamanho de pacote menor e melhor desempenho. A segunda é adequada para portar aplicações legadas.

Configuração do projeto com TeaVM

Para começar a trabalhar com TeaVM, adicione a dependência no pom.xml (Maven):

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

Crie uma classe Java simples para compilação:

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

A anotação @JSExport torna os métodos acessíveis a partir do JavaScript. Após a compilação, você obterá um módulo WASM e um wrapper JavaScript.

Exemplo prático: Compilação e chamada a partir do JavaScript

Vamos analisar o ciclo completo, desde a compilação até a chamada no navegador. Primeiro, compile o código Java usando o plugin 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>

Após a construção (mvn package), na pasta target aparecerão os arquivos: calculator.wasm e calculator.js. Agora, crie uma página HTML:

<!DOCTYPE html><html><head>    <title>Java + WebAssembly Demo</title></head><body>    <h1>Calculadora Java em WASM</h1>    <p>Resultado: <span id="result"></span></p>        <script src="calculator.js"></script>    <script>        // Função de callback após carregar o 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 a página