Cómo llamar a un método Java desde una función JavaScript en el navegador

Nota: Traducido de la versión original en Inglés.

En este video demuestro cómo llamar a un método Java que se ejecuta en el servidor desde una función JavaScript que se ejecuta en el navegador web:

En resumen, necesitas una aplicación web Java con las dependencias de Vaadin (puedes crear rápidamente una aquí), un archivo de script en el directorio webapp/frontend/ y una clase Java con un método anotado con @ClientCallable que envía un Element a la función JavaScript. La función JavaScript puede usar el objeto $server en la instancia Element para llamar al método Java anotado.

Aquí está el código:

MainView.java:

@JavaScript("frontend://script.js")
@Route
public class MainView extends Div {
    public MainView() {
        getElement().executeJavaScript(
                "someJavaScriptFunction($0)", getElement());
    }

    @ClientCallable
    public someJavaMethod(String message) {
        System.out.println(message);
    }
}

script.js:

function someJavaScriptFunction(element) {
    element.$server.someJavaMethod("¡Hola servidor!");
}

Puedes leer el tutorial completo con cada paso aquí.