Thursday, 18 June 2015

HTML5 Browser Apps with Java - TeaVM part 1

Let's take a moment reminisce about the late 1990s... Probably the first thing you thought of wasn't Java Applets! But there was a brief period back then where Java was the new and exciting language and one of the cool things you could do was create Java Applets - self contained programs that could be embedded in a web page.

But the glory days of Applets are long gone. While Java went from strength to strength for server-side development, the technology acquired a bad reputation on the client-side - especially for browser-based applets. Problems of perceived slowness, the need to download the large Java plugin, numerous security concerns, and competition from competing technologies such as Flash, saw Java Applets quickly fall into technological obscurity.

These days the preferred way of creating browser-based apps is using HTML5 and the associated goodies - JavaScript and canvas element. While this means a better and more secure user experience, it does present a problem if you want to develop such apps as a Java developer. If you are used to Java with its strong Object Orientation, static types, and excellent development environments, programming in JavaScript seems by comparison awkward and developer-unfriendly.

In an ideal world there would be a convenient way of developing in Java, but produce code that runs as client-side, HTML5 browser applications. The good news is: Now at last there is.

There are now several Java-to-JavaScript compilers on the scene, and so recently I started to take a look at them. The one I am particularly impressed with is TeaVM. Another interesting one is Back2Brwsr.

Google Web Toolkit, a similar technology in some respects, has been around for a while. But my experience with it was disappointing. It was awkward to use - requiring source code of any Java libraries you need to use, additional configuration for your included classes, and is slow to compile. The big benefit of these new generation of tools, is they work on compiled Java bytecode rather than source code, which makes them more convenient and easy to use, and faster to run too!

I decided to try out TeaVM a little, and to subjected it to the "10 minute test" - is it possible to create something trivial but which demonstrates its basic capabilities, just within a 10 minute period? Making use of the provided maven archetype, I created a project template and loaded it into my IDE. No problems there. Then it became very easy to make use of TeaVM's intuitive system for Java code to HTML elements. I ended up with something like this:

HTML source
<html>
<head>
    <title>TeaVM Test</title>
    <script charset="utf-8" src="teavm/runtime.js" type="text/javascript"></script>
    <script charset="utf-8" src="teavm/classes.js" type="text/javascript"></script>
</head>
<body onload="main()">
<div>
    <canvas width="400" height="400" id="canvas" tabindex="0">
    </canvas>
</div>
</body>
</html>


Java source
    private static Window window = (Window) JS.getGlobal();
    private static HTMLDocument document = window.getDocument();
    private static HTMLCanvasElement canvas = 
                      (HTMLCanvasElement)document.getElementById("canvas");
    
    public static void main(String[] args) {
         CanvasRenderingContext2D context = 
                      (CanvasRenderingContext2D)canvas.getContext("2d");
         context.setFillStyle("#000000");
         context.fillText("Hello World!", 20, 20);
    }

Using the provided maven tasks, TeaVM converts the compiled Java bytecode into JavaScript (the two files runtime.js and classes.js), and hey presto, a simple canvas "Hello World" program.

The ease with which it was possible to get started, combined with the simple, intuitive way to deal with HTML elements, including canvas, makes TeaVM look very promising. I'll look at it in more detail in the next article.

No comments:

Post a Comment