Transpile Plain Java into JavaScript

Jun 29, 2017

DukeScript is all about smooth communication between Java and JavaScript. It comes with no surprise that one can use the DukeScript infrastructure to easily transpile Java code into JavaScript and run it in a browser. Here is a quick how-to:

Start from command line

Of course, if you are an IDE junkie, you may prefer a visual way of getting started, but to prove that it is really just a matter of a few commands, let’s set everything up from a command line. Install Java, install Maven and invoke:

$ mvn archetype:generate \
  -DarchetypeGroupId=com.dukescript.archetype \
  -DarchetypeArtifactId=knockout4j-archetype \
  -Dwebpath=client-web \
  -DgroupId=org.your.test \
  -DartifactId=runjavainbrowser \
  -Dversion=1.0-SNAPSHOT \
  -DarchetypeVersion=0.17 # or newer version
$ cd runjavainbrowser
$ mvn install -DskipTests

and that is it! Just three shell commands and you have all the environment you need!

Write Your Code!

Let’s open the DataModel.java that contains the main logic and let’s add there some Java code.

$ vi client/src/main/java/org/your/test/DataModel.java

there are few methods annotated with @Function annotation. They are ready to be invoked when a button on the HTML page is pressed. Let’s modify one of them:

@Function static void turnAnimationOn(Data model) {
    model.setMessage("I can run Java in any browser!");
}

Of course you can put much more logic into the Java method - most of the core Java is supported. Now let’s try it. Rebuild and launch in a browser:

$ mvn install -DskipTests
$ mvn -f client-web/pom.xml bck2brwsr:show

When the browser page is opened, press the Start button and congratulations: your first Java code has been successfully transpiled to JavaScript and executed in a browser!

So Easy! Where’s the Catch?

Just a few simple steps and my Java code is running in the browser. Is everything so easy, or is there a hidden catch?

Of course, the transpiling has some limitations. It doesn’t support all Java APIs, but it shall be good enough for running Java algorithms in the browser and perform client side validations, computations, etc.

Moreover there is something really special: DukeScript project doesn’t provide the transpiling technology - we are just using it with the goal to make writing portable Java applications easy. As with any other system (Android, desktop, iOS) we always choose the best JVM available on the system. However, in case of plain browsers, there are two very good choices: Bck2Brwsr VM and TeaVM. With DukeScript infrastructure you can easily choose between any of them - e.g. no vendor lock-in and your choice to select the better JVM for your tasks. To try TeaVM just execute:

$ mvn -f client-web/pom.xml -Pteavm install -DskipTests bck2brwsr:show

What is better: Bck2Brwsr or TeaVM?

What transpiling technology is better? Depends on your needs. Each of them has its benefits. TeaVM compiles the whole application into a single JavaScript file. Bck2Brwsr produces one JavaScript file per JAR file - e.g. comes with better support for modularity. Bc2Brwsr can execute as complex applications as Javac in the browser, but is intentionally singlethreaded. TeaVM can simulate threads and comes with better in browser debugger integration.

The choice is yours. DukeScript projects is just proud to offer you two alternative transpiling solutions.

Packaging for Web

When your application is running, it is time to package it for the web. Again, it is easy. Execute following commands:

$ mvn -f client-web/pom.xml package -DskipTests
$ unzip -v client-web/target/runjavainbrowser-web-1.0-SNAPSHOT-bck2brwsr.zip
public_html/index.css
public_html/index.html
public_html/lib/emul-0.19-rt.js
public_html/lib/net.java.html.boot-1.3.js
public_html/lib/ko4j-1.3.js
public_html/lib/runjavainbrowser-js-1.0-SNAPSHOT.js
public_html/lib/net.java.html.sound-1.3.js
public_html/lib/runjavainbrowser-1.0-SNAPSHOT.js
public_html/lib/net.java.html-1.3.js
public_html/lib/net.java.html.json-1.3.js
public_html/bck2brwsr.js
public_html/runjavainbrowser.js

and you can see that a ZIP file has been created for you and is ready to be uploaded to your web server and used from your HTML pages. Alternatively you can do the same with TeaVM:

$ mvn -f client-web/pom.xml package -Pteavm -DskipTests
$ unzip -v /home/devel/tmp/transpile/runjavainbrowser/client-web/target/runjavainbrowser-web-1.0-SNAPSHOT-teavm.zip
public_html/index.css
public_html/index.html
public_html/teavm.js

and upload or use the single teavm.js file containing all your transpiled Java code.

Development and Testing

The power of DukeScript is in high portability of the applications. As such it is suggested to develop your application on desktop with a JavaFX WebView component - then all the goodies like no redeploys or easy Java and HTML debugging work. Once your application is running, you can then just transpile it.

Should there be any differences between desktop and transpiled version, the best is to write and execute a unit test - if it behaves differently between the standard Java on desktop and the one running in the browser, please contact our support and send us the test case - we are always ready to help. Read debugging transpiled Java article to learn more.

Enjoy Java in a browser done in the DukeScript way!