There is nothing cool on this page. Just suffering of different kinds. Which is nice: you can at least choose your suffering.
So from simple to not-so-simple-anymore: how can we put out some information in a browser when we use Java as a backend? (assume Spring or Quarkus for now)
Template Engines
To just output anything, there are still some template engines available. The more you need to enhance the user-experience, the better off you are with the enhanced template engines – or full blown SPA frameworks.
Simple template engines:
- Thymeleaf
Java library with an optional Spring MVC module. - Apache Velocity
- Apache Freemarker
- Closure Tools (SOY Templates)
Server and client side template engine. Also used in Confluence Plugins.
Enhanced Template Engines
HTMX
Why describe it myself – so from the htmx.org website: htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.
Don’t miss out one their examples.
The creator of the htmx spring boot starter also has a book available as well as a petclinic example application.
And there are also videos available to guide you through (one by Dan Vega: Getting started with HTMX in Spring Boot with Thymeleaf)
You will still need a template engine (see above) – but the Spring Boot Starter contains all you need. If you have trouble choosing one, head over to codecentric.de – they did a comparison.
Pimp it with some component libs:
- What might work is using the HTML version of what tailwindcss/plus has to offer.
- shadcn/ui is one of the newer kids on the block – also some work required.
- daisy UI – a tailwindcss based component lib that tries to reduce the amound of css classes you get in contact with. Comes with a CDN version that does not target a framework directly.
- People on reddit also seem to combine htmx with franken UI (Franken UI is an open-source library of UI components. Under the hood, it uses UIkit 3 and extended with LitElement. The design is based on shadcn/ui).