Web Browser Programming in Java

Dr. Lofi Dewanto
Jun 3, 2019 · 4 min read

As a long time Pascal and Java programmer I love the idea of compile time check from those languages. It saves me a lot of work in the runtime later. For sometime I enjoy writing apps in Java, client-side with Swing or SWT and server-side with Enhydra XMLC, Struts, Spring Framework, some HTML, CSS and JavaScript for web browsers. But as we all know the requirements are changing everyday. AJAX came in the year 2005 to play a big role and today web browsers — with JavaScript as its native language — are becoming the new platform.

In the picture below (History of Web Frameworks) you can see the movement from pure Java web development to JavaScript based framework like Angular, Vue.js and React.

History of Web Frameworks (Source: http://bit.ly/HistoryWebFrameworks)

So in the year of 2019 web development is entirely occupied by JavaScript or derivatives like TypeScript? Well, not entirely… One small village of indomitable Open Source Java developers still holds out against the invaders with the help of Java to JavaScript transpiler GWT (http://www.gwtproject.org) and J2CL (https://github.com/google/j2cl)


So the question for us as Java developers, should we just move to JavaScript and forget our beloved Java tooling and frameworks?

In this article I would like to show following simple thing:

  1. How easy to implement a Java class with your standard tooling Eclipse or VSCode or IntelliJ, Maven, JUnit and transpile this afterwards into a JavaScript file.
  2. In this example I use GWT 2.8.2 as a transpiler.
  3. The transpiled JavaScript file can be integrated into your own JavaScript app in the web browser.

Why would I do this as Java developer? Simple, because of my standard tooling and the compile time checking.

The complete example in this article can be found at https://github.com/lofidewanto/jsinterop-simple-example


Let’s imagine you have a nice Java calculator which you want to reuse in your JavaScript app. This Calculator.java implements a calculateSum method like below:

...
public double calculateSum(Double[] values) {
List<Double> doubles = Arrays.asList(values);
if (values != null) {
logger.info("Values size: " + doubles.size());
Double sum = doubles.stream().mapToDouble(
Double::doubleValue).sum();
return sum;
} else {
logger.info("Values: null");
return 0.0;
}
}
...

To reuse your Calculator class, you need to use JsInterop in GWT or J2CL. JsInterop is a framework for JavaScript Interoperability within Java. Both GWT and J2CL use this framework to access JavaScript or to be accessed by JavaScript.

You can find some good information about JsInterop in following sites:

In our simple case we need to export our Java Calculator into a JavaScript file. For this purpose you just need to mark the Calculator class with a @JsType annotation which should be available globally with “Calculator” as a name:

...
@JsType(namespace = JsPackage.GLOBAL)
public class Calculator {

public double calculateSum(Double[] values) {
...
}
}
...

GWT translates the Java class into a JavaScript file named as calculator.nocache.js and afterwards you can use this JavaScript in your index.html like this:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8"
><title>Demo GWT Webapp</title>
<!-- This is the transpiled Java files included the
Calculator class into JavaScript -->
<script type="text/javascript" language="javascript"
src="calculator.nocache.js"></script>

</head>
<body>
<!-- Here you use the Calculator class as usual
in JavaScript -->
<button onclick="console.log(new Calculator().calculateSum(
[10, 20, 30])
);">Calculate!</button>
</body>
</html>

Now you can use your Calculator Java class in the web browser. You can implement and test the Calculator class just as usual using JUnit and Mockito as needed. You can use your Java IDE like Eclipse, IntelliJ or VSCode for Java to write the CalculatorTest.java:

Programming with Java and GWT in VSCode for Java

To see the result you just need a web browser, the result will be printed out in the console after you push the button Calculate!:

Running GWT Webapp in Chrome

If you need to debug your Java Calculator you can directly do this in Chrome, completely in Java:

Debugging your Java Calculator in Chrome

That’s it!

In this article I’ve shown you how easy to reuse your Java code in your JavaScript world. You can just test your Java code as usual with Java tooling and integrate it smoothly in your JavaScript web apps. JsInterop makes this easily possible. So as Java developers you don’t have to give up your Java tooling and frameworks, also you can still depend on the compile time checking from Java.

The complete example in this article can be found at https://github.com/lofidewanto/jsinterop-simple-example


If you interested in more information about GWT and J2CL you could read this longer article about Modern GWT, First Step (http://bit.ly/ModernGwt)

If you have any questions just go to GWT /J2CL Gitter Chat (https://gitter.im/gwtproject/gwt). The community is very active and they’ll answer all your question in context of GWT and J2CL.

Enjoy playing with GWT and J2CL!

Dr. Lofi Dewanto

Written by

Lofi Model@Work: https://lofidewanto.blogspot.com

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade