Impressions on Modern Java Web Browser Development with GWT

We had a chance to use GWT in our internal Hackathon and here are our impressions and feedbacks for GWT / J2CL / Java development on the Web Browser.

The Task: build a simple UI frontend web app which just shows other web apps contents (micro frontends with HTML, JS). So it is just like building a portal (main frontend UI) with some portlets (micro frontends). If you don’t know what it is check out my article: From Portlets to OpenSocial Gadgets to Progressive Web Apps. We chose Material Design for the UI design.

The Team: we were four Java developers, one developer knows how GWT works and has done some stuffs in “old-style” GWT, one has also done small amount of GWT but very few, one has never done GWT but knows JavaScript and me who has some experiences in GWT.

Portal (Main Frontend UI) and Portlets (Micro Frontends)

Frameworks and libraries are developer’s best friend therefore it is important that they serve developers best way to write best apps. If you are building frameworks and libraries your customers are the developers. So it is clear that the “developers” need to like your product to make your product successful.

Here are our experiences using GWT to solve our task.

(1) GWT Boot is very nice and make the development of GWT web apps very easy to start. But all of the modules are still SNAPSHOT and exist only in the Sonatype SNAPSHOT repository. A lot of other modern GWT modules are also still in SNAPSHOT. If you work behind the firewall in an enterprise environment and you only could access Maven Central RELEASE repository you won’t be able to use it. At the end we need to put all the libs one by one manually without GWT Boot. Luckily we have all those GWT, DominoUI releases built by JResearch on Maven Central. We also found a bug in the dependencies of Elemento, since it was released in Maven Central but has a dependency to a SNAPSHOT version in gwt-safehtml.

(2) The Elemental2 lib is quite “raw” for Java developers as I expected in my article: Using IndexedDB in Web Browser — All in Java with Mrs. Gwitany and Dr. Jackl. It feels “too JavaScript” instead of Java. Also the programming model “asynchronous” needs getting used to. If you have worked with Swing or SWT you are maybe a bit familiar with it.

(3) It is difficult for the beginners to see the difference between Elemental2, Elemento and DominoUI APIs. When to use what APIs for what task. Generally Document Object Model (DOM) is a new world for Java developers, so the entry is quite steep. One thing as Java developer you need to know is the difference between Node and Element in DOM. This video has a very nice explanation for that topic: http://bit.ly/NodeVsElementHTML

(4) DominoUI makes it easy to build the first user interface, just with one line!

Layout.create("App title").show();

… and you get…

Standard Layout in DominoUI — Just One Liner (see: https://demo.dominokit.org/layout/app-layout)

Default DominoUI layout has, Navigation bar — 1, 2, 3, left panel — 4, center panel — 5, hidden footer — 6 and hidden right panel.

(5) After this we need to inject Cards from other portlets and these are our steps:

  • We need to access to each portlets (micro frontends) using Fetch API (modern) or XMLHttpRequest (old) from the Web browser. This article is a good explanation of Fetch API.
  • After we get the content from the portlet, we need to inject it to the “Card” within our “Div” in the portal. For this purpose we need to understand the DOM first.
  • In this case we also need to take care of CORS problem because the portlets are installed on different locations than the portal web app.

(6) One thing we need to change is the color scheme of DominoUI but it seems we cannot find how to change it easily. Contacting the developers of DominoUI in Gitter was very easy: https://gitter.im/DominoKit/domino and we got the answer very fast. There are some workaround on how to create a new color scheme but there will be some new annotations to build new color schemes easily.

Epilog: Within a short time we’ve learned a lot and get the first steps done. Programming for Web browser is a different story than programming for the Java Virtual Machine (JVM). As Java developers we have to learn the platform and that’s the Web browser. Still it is Java and we have all the best components from Java: the language, the ecosystem (e.g. Maven, IntelliJ / Eclipse), all the best practices and the design patterns (e.g. Mock test, Dependency Injection).

As GWT commiters and Open Source community we still need to polish GWT / J2CL transpiler and its ecosystem so that the developer experience (yes, the customers are the developers) will be getting better. The first step to reach this is to release all the GWT / J2CL / libraries artifacts into Maven Central RELEASE repository, so every Java enterprise developers can use them smoothly behind the firewall and can make some experiments with them.

Padlet for GWT / J2CL modern programming:
https://bit.ly/GWTIntroPadlet

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store