Using java for the front-end of a web app in 2022

Java for the front-end - I thought it was a dead end?
The unsung hero 🌈 of Java for the front-end: Jakarta Faces (JSF)!
Is JSF hard? what are the benefits?
Primefaces: huge list of free components and themes for JSF
But Java is slow and heavy?
Conclusion: consider Java!
Demo

This is a technical article about my positive experience as an academic developing an indie app, using Java for the front-end. Please excuse the at-times sloppy vocabulary.

Java for the front-end - I thought it was a dead end?

Using Java for front-end development is often thought to be just impossible: Java is for heavy backend stuff, right?

Yes, a long time ago, Java Applets and Java Webstart enabled Java apps to be launched from the browser. But this is ancient history, as old as the Flash plugin 💀.

Even without applets, there is still a way to use Java for the front end: this is JSP or “Java Server Pages”, which many computer science students learned at school. Even if JSP is still discussed in some books on Java for the web (eg 1, 2), it is outdated since the 2010s. Another dead end 💀 😔.

Last, there are frameworks that enable Java developers to “transpile” (convert in a complicated way) their code into Javascript thanks to the Google Web Toolkit (GWT, not super fresh) or the up-and-coming J2Cl project (also by Google, very active). GWT and J2Cl however are not meant as beginner-friendly frameworks, they are more of enterprise toolings developed by Google, to be used by big projects in companies.

The unsung hero 🌈 of Java for the front-end: Jakarta Faces (JSF)!

Java Server Faces (JSF), now known as “Jakarta Faces”, is around at least since the early 2010s. I am always surprised it is not more famous and rarely mentioned, as it allows developing web apps easily in a fast, secure and robust way.

The thing works, is easy to learn, benefits from all the goodness of the Java ecosystem… yet, have you ever heard about it?

Here is how you create a web page showing some dynamic content:

create an html page (with an extension “.xhtml”)
replace the <head> and <body> html tags with <h:head> and <h:body> tags.
now, in order to display some dynamic content by calling some property in the backend, just place it after a hashtag and between handle bars like so:

#{backendscript.myText}

Create a file Backendscript.java in your backend, add a variable called String myText = "hi! welcome to my page!". It will be displayed on the web page.

JSF is really super simple. It is well documented thanks to tons of Stackoverflow questions, a clear official doc, many books (this reference, and I also like the ones by David Heffelfinger) and of course Youtube tutorials.

Is JSF hard? what are the benefits?

JSF is not hard at all:

1. It is well integrated with the classic IDEs for Java (NetBeans, IntelliJ and Eclipse). Each IDE provide:

template projects that fill in the boilerplate for the Maven config (which is dead simple, by the way).
debugging tools (with hot reload, for NetBeans at least)
the usual super efficient auto-complete, refactoring, navigation and error highlighting tools of the Java ecosystem. The IDE can provide useful info on any class that you mention in an html page (like the #{backendscript.myText} mentioned above). Html pages are truly integrated with the rest of your codebase!

2. It handles advanced cases of actions on html pages, super easily

updating parts of the the page when a button is clicked? Just add an update property to your button, followed by the id of the component to be refreshed
still on this question of updating / dynamic content: I just love the simplicity with JSF to have the frontend update the backend, the frontend updating itself, or the backend updating the frontend, which are basic requirements of a web app.
have a user upload a file, or multiple files, with conditions on the types of size of files, in one line with clear parameters.
powering your website with multiple languages? Add a <f:view> tag in your html, and retrieve the user language with a single line in the backend
etc, etc.

3. You can add and mix html tags, JS scripts, and css, and it is SEO friendly

You have full control on the html produced by JSF and can always add vanilla html and js. This makes for an easy way to collaborate with designers and front-end developers who don’t know nor care about JSF. I have tried it myself: as I suck in CSS, I got some help by a designer who could work on the html pages I had developed with JSF, without any difficulty finding their way and making the modifications they needed.

JSF generates html which you can then see and read in your browser. That helps a lot for debugging with the usual dev tools, and check that your SEO actions are well implemented.

Primefaces: huge list of free components and themes for JSF

JSF comes with a long list of ready-to-use components that create the classic parts of an html page, so that you don’t have to do it yourself. For example, use the <h:dataTable> tag to create a table that displays some data that is loaded from your backend - no need to recreate it from scratch.

This is already super useful, but there is better: a company called Prime Tek, which is around for a very long time, develops a suite of open source components called Primefaces: drop-in replacements for the regular JSF components - and they come with additional features and benefits.

primefaces

Instead of the <h:dataTable>, just use the Primefaces’s <p:dataTable> tag. It gives you a basic data table, but you can easily add a column toggler, or dynamic colums, or edit functions on the table… !! And all this is responsive of course.

But Java is slow and heavy?

1. Slow

No. The funny thing is that JS frameworks such as React, Angular and Vue emerged with the promise to be quicker and smarter than JSF by Java, because they were sending all the logic of the app at once to the browser of the vistor of the website (“the client”), in just one go, hence their names of a “single page application” (SPA) that do “client side rendering” (CSR). No need to fetch pages from the backend after this single, first step, so that’s blazzing fast in theory 🏎️ (all happening in the browser, no back and forth with a distant server).

JSF works differently: when a user calls a page (such as https://nocodefunctions.com), the app in the backend generates the html for this page only and sends it back. That is called “server side rendering” (SSR). Same happens for any page that the user will visit on the website. Seems slow 🚜.

In practice for Single Page Applications, the time can be very long for the user to receive and load the javascript files that make the whole app. This can lead to a bad user experience (having to wait for the 1st page to load, we have all had this experience!), and penalties in terms of SEO. As a result, Java style Server Side Rendering gained back a new popularity as it is judged superior in terms of speed / performance than Client Side Rendering. New SSR frameworks emerge, obliging developers used to Client Side Rendering to handle and mix these two different logics. A real pain in my opinion. Java and JSF provide SSR for ~ 15 years now - the thing is just solid, use it!

2. Heavy

No. What you need to deploy a JSF app is:

the app itself. A naked “hello world” JSF app is probably 10kb or less.
optional: add Primefaces (discussed above) if you want more high quality components. This represents an extra 4.5Mb.
that’s it.

Now, run it on a server. For that, you need to:

have a server, in the cloud or else. For the test version of Nocodefunctions (https://test.nocodefunctions.com), I use Hetzner where I rent a bare-metal server with 2Gb of RAM for € 4.15 / mo. I could use less RAM but my app provides some data-intensive services and it needs to fit in memory. The real (non test) version of nocodefunctions runs on a bigger server (also with Hetzner) to support the data intensive jobs of more users in parallel - at less than 50€ / mo.
have Java installed. That is a single download of a less than 200Mb file for Mac, Win or Linux, is completely free even for commercial use (no “but Oracle can…” worry to have) and is a one liner / one click to install.
have a Java web server to run. There are many. I personally use Payara Micro (Community Edition), which is free and is a single file download of 77Mb.
launch your app. That is a one liner.

Conclusion: consider Java!

Some programmers, I feel, think that Python, Ruby, php, nodejs + React… are the only choices when you start a small web app. I hope they will consider Java + JSF for their next project. Especially if they learned java at school: you will get such a head start, take advantage of it!

Demo

I build nocode functions 🔎 entirely in Java. It is fully open source. Try it and give some feedback, I would appreciate it!

my email: analysis@exploreyourdata.com 📧
or on Twitter: @seinecle 📱
you can also read the other articles of this blog 👓, where I write about the process of developing the app.

Date: August 9, 2022