Talk

Modern frontends with Thymeleaf and htmx
Conference (INTERMEDIATE level)
Room 4
Score 0.14
Score 0.15
Score 0.16
Score 0.17
The match becomes increasingly accurate as the similarity score approaches zero.

Frontend development is getting more and more complex when using JavaScript frameworks like Angular or React. On top of that, the landscape is also rapidly changing. Developers claim that this is needed to build the highly interactive web experiences we all come to know and like. However, that is not true. This talk will show how you can use the productive combination of Java 17, Spring Boot, Thymeleaf, and the htmx JavaScript library to build such experiences without writing JavaScript. Adding a few attributes to your HTML will allow you to implement patterns like Click To Edit, Endless Scrolling, Lazy Loading, etc…

You might think that you need to start your new project with a JavaScript framework because you “might need that interactivity” later. This talk will show that you can use htmx to enhance your web application easily where it makes sense. For the rest of your application, use the simplicity and productivity of server-side rendering.

htmx is already making great strides in the PHP/Laravel and Python/Django world, it is time for the Java/Spring Boot world to embrace this as well.

Wim Deblauwe
Widit

Wim Deblauwe is a freelance Java developer with over twenty years of Java experience. He is the author of Taming Thymeleaf and has implemented many Thymeleaf projects, for companies ranging from startups to established companies.

Generated Summary
WARNING: This summary was generated using GPT based on the transcript, as a result spelling mistakes and more importantly hallucinations can be present.

Modern Front End Development with Time Leaf and HTMX
Time Leaf
Time Leaf is a server side Java template engine that uses natural templates to generate HTML pages. It can be used to quickly and easily generate HTML pages with the help of HTMX.
HTMX
HTMX can be used to enhance the functionality of Time Leaf. It is a JavaScript library that helps to write less JavaScript and allows HTML attributes to be added to any HTML tag. It can be used with various back-end languages and frameworks.
Demos
The talk included demos of both Time Leaf and HTMX to demonstrate what can be done. An example of how a controller works with Spring Boot and Timely was given, as well as an example of an active search feature which will add search results to a table as the user types in the search box.
Multi-Page Applications (MPAs) and Single Page Applications (SPAs)
The talk also covered some terminology related to Single Page Applications (SPAs) and Multi-Page Applications (MPAs). MBA stands for Multi-Page Application, now also known as Classic Server Side Rendering. This means that the server generates full HTML pages which are sent to the client and rendered there. Benefits of using a multi-page application include not needing JavaScript to display the page, no dependency on the clients capabilities, the ability to use any technology that renders HTML, better search engine optimization, and deep linkable by default. A drawback is that a base change needs a round trip to the server and caching needs to be mimicked if using a single page application.
Page size
Page size is an important factor when deciding between a single page application and a multi-page application. Single page applications have a bigger upfront cost, but if communication is done using Json, the page size will be smaller than re-rendering the full page each time. It can be easier to have a coherent team with server-side rendering, but it may be beneficial to not split on technological boundaries.
Benefits of Page Reloads
Page reloads can be beneficial for UX if they are quick and bookmarkable, and help with troubleshooting. Rich dynamic behavior can be achieved without sacrificing page size. Thoughtworks technology Raider recently suggested that using single page applications should be put on hold and only used if the business needs justify it. There are a few libraries popping up now to help with this, such as Unpoli, Hot Wire and HDMX.
Conclusion
This talk discussed the use of HTML and HTMX as a way to create faster search results and initialize JavaScript components on a page. By understanding the benefits and drawbacks of single page and multi-page applications, as well as the importance of page size, developers can make informed decisions about which technology to use for their project. The speaker concluded by thanking everyone and wishing them a pleasant rest of the conference.
You can also ask questions on the complete talk using Devoxx Insights