Build native apps with GraalVM

GraalVM is a polyglot virtual machine that provides a shared runtime to execute applications written in multiple languages like Java, C, Python, and JavaScript. GraalVM also provides a Native Image Generator utility that allows you to compile Java code ahead-of-time (AOT) into a standalone executable, called a native image. A native image typically achieves faster startup time and smaller footprint. GraalVM and its native image generation is well suited to build native applications and command line interfaces (CLIs).

This post walks you through the main building blocks used to build a native application using GraalVM. The application is a rudimentary text editor that can only handle JSON files. The text editor’s user interface (UI) is a web page that can be opened using a browser.

The text editor needs to load files from the local filesystem and it should be able to save the edited files back to the filesystem. One way to achieve this is through the use of an HTTP server. Helidon, an open source collection of Java libraries for building lightweight microservices, can be leveraged for this purpose. Here’s a code snippet that creates a few HTTP endpoints and starts a server on port 8080:

public static void main(String... pArgs) {
  var config = ServerConfiguration
        .builder()
        .port(8080)
        .build();
  var routing = Routing
        .builder()
        .register(JsonSupport.create())
        .register("/download",
            StaticContentSupport.create(Paths.get("/")))
        .register("/editor", new EditorService())
        .register("/", new UIService())
        .build();
  var server = WebServer.create(config, routing);
  server.start();
}

The editor’s UI can be built using HTML, CSS, and JavaScript. Since the editor’s UI is expected to be run in a browser, HTML, CSS, and JavaScript can be used to build the UI. Furthermore, the excellent JavaScript based code editor, Ace, can be used for loading and editing the JSON files. The following code snippet shows how to initialize and configure Ace, and load files.

<script>
  var editor = ace.edit("pnlEditor");
  editor.setTheme("ace/theme/monokai");
  editor.session.setMode("ace/mode/json");
function fetchJsonFile() {
    var filePath = document
          .getElementById('txtFilePath')
          .value;
    var request = new Request('/download' + filePath);
    fetch(request).then(function(response) {
      return response.text().then(function(text) {
        editor.session.setValue(text);
      });
    });
  }
</script>

Helidon supports GraalVM and native image generation. Use the provided maven plugin to build the text editor application as a native application. Here’s the maven command:

mvn package -Pnative-image

The generated native application can be moved to a desired location and added to your PATH variable. Invoke the application and open http://localhost:8080 to edit any JSON file on your filesystem. Here’s a screenshot of the UI:

You can find the source code used in this post on GitHub. Happy coding and a happy new year 2020!

PS: For building production grade native applications, you might want to use something like JavaFX or Electron.