Accessibility Now
Join our upcoming webinar about accessibility standards and legislation. May 19, 2022.
Blog

Desktop UIs will stay alive thanks to Web Technologies

By  
Yuriy Artamonov
·
On Jan 16, 2018 1:30:00 PM
·

What is wrong with Java Desktop technologies?

To understand what’s wrong with Java Desktop apps, let's take a look at the new features of JavaFX, the most leading UI framework for desktop applications. It becomes obvious that it is trending towards the web approaches, borrowing more and more features from the Web world. JavaFX supports a subset of CSS features accompanying it with their own properties. However, this all is far away from what the web offers for UI. Another essential aspect is tooling. Have you seen anything in any way similar to developer tools coming along with all the popular web browsers for desktop UI design? Finally, as JNLP goes deprecated in Java 9, it certainly doesn't add points to desktops.

But then, why does desktop stay afloat? There are a few, but very important things that are poorly covered by web:

  • offline mode
  • advanced integration with peripheral devices
  • local data/file processing

Partially these problems are being solved using new Web standards, such as Service Worker, but it would be great if we could implement a technology that brings Web UI development technologies and tooling to our Desktop Java applications. What if I told you there was an app on the market...

What is Electron

And that's where Electron comes in. It is formerly known as Atom Shell, a technology behind GitHub’s Atom editor. Atom is the first widely-known desktop application built with HTML, JavaScript, CSS, and Node.js integration.

Electron is an open-source framework that allows using web technologies for the development of desktop GUI applications. You can use front and back end components originally developed for web applications: JS for the backend and HTML/CSS/JS for the frontend.

In a nutshell, Electron consists of two main components: Node JS backend plus Chromium web browser in a single executable, with additional Desktop integrations: native menus, notifications, tray icons, installers, etc.

Why need this approach

First of all, we can solve a lot of problems of the current Java Desktop UI:

  • Java Desktop technologies do not evolve
  • There is a way smaller set of available UI libraries for Java than for Web
  • It is hard to implement responsive rich UIs with JavaFX

In addition to this, the Electron ecosystem has a lot of useful tools:

  • Installers for all major operating systems
  • Smooth automatic update subsystem
  • Crash reporting

Finally, it is an open source technology and it is the bleeding edge of the modern UI.

There is only one small problem… Electron is all about JS.

There are two ways to make it suitable for Java applications:

  • Build your application using GWT client side and compile it to JS
  • Write code in a server-side Java framework and bundle a servlet container inside of an application

If we want to provide advanced hardware integration and local file system access from Java code then the approach #1 is not the case.

The second approach can be implemented using an embedded servlet container, such as Jetty, and an automatic procedure of start/stop for the Java process. Thus, we will have a full-featured Java process on the client PC and will be able to use both Java and Electron features. Well, as it turns out, it can be done easily!

I will show you the full step-by-step process of crafting your own UI toolkit for Desktop applications in the tutorial available via GitHub. Check it out to see how to leverage the power of the Web technologies in your Desktop apps:

https://github.com/cuba-labs/java-electron-tutorial/blob/master/README.md

Benefits of the hybrid approach

What good is the hybrid approach of wrapping a web app inside a native app to us?

  1. We have full access to the Desktop machine: hardware, file system, installation, notifications and integration with the operating system.
  2. We can use JS/CSS to develop UI widgets, at the same time employing Java for business logic.
  3. We can reuse existing JS/CSS libraries and approaches.
  4. We can even bundle our existing Vaadin application for Desktop usage!

How do we use it for real-life applications

CUBA Studio is a powerful enterprise application development tool for applications based on CUBA Platform. With Studio, applications are up and running within minutes.

We have used Vaadin for CUBA Studio for 4 years and all of that time it has been a web application that runs locally, but shows the UI inside of a web browser.

This year we introduced the new version of CUBA Studio that uses Electron to bring better UX for our users. It enables developers to use CUBA Studio as an independent Desktop application without a web browser. We can use all the advantages of an operating system, such as taskbar, fast switching between applications with shortcuts and shutdown of the application on window close.

And what makes me so happy is that we bundled our existing Java code without any changes! Well, almost without changes, of course, we improved a couple of things.

With this approach we have:

  • Desktop Integration - taskbar, window switching, shutdown on close
  • All the features of Chromium for UI including CSS animations, Canvas and even WebGL
  • Controlled version of the browser, thus the application will not be broken in case of an update of Chrome. And more importantly, the same version of a UI engine we tested before release.

In the next version, we are planning to introduce new features:

  • Multi windows support
  • Desktop notifications on build/deploy events
  • Smooth automatic update

These features are available since we are no longer limited by the web browser.

Conclusion

To sum up, Electron became a very strong player on the market of the modern Desktop application frameworks. It is an interesting approach that could help Java applications to look and perform better on Desktop, employing the latest features of Web technologies for UI.

You can find a more complex application with all the tricks described in this post on GitHub: https://github.com/jreznot/electron-java-app

If you want to try the application based on this approach, I recommend that you take a look at CUBA Studio SE

Yuriy Artamonov
Yuriy Artamonov is a lead developer at Haulmont Technology, a British-Russian software development company. For the last few years Yuriy has played a key role in the CUBA platform development team, specializing in front end technologies and has also been involved in the overall architecture design. As part of his academic activities, Yuriy is mentoring applied math students from Samara University - the National Research University. Yuriy is particularly interested in technologies related to cloud computing, clustering and distributed systems.
Other posts by Yuriy Artamonov