Introduction to Thymeleaf

Thymeleaf is a Java template engine for processing and generating HTML, XML, JavaScript, CSS, and text and writing the dynamic data into them. It can work both on the web (Servlet-based) and non-web environments.

Thymeleaf

Why Thymeleaf is developed?

While making Java Web Applications, earlier we were writing the HTML designs into Servlets (inside java classes) and JSPs(also a template engine), which needs web environments like tomcat server to render the design and it was very hard to design or change the web UI for a front end developer because java, HTML and CSS all codes are mixed into a page which complicates to read and understand the business logic. It is compulsory to have knowledge of the front end and back end for each developer in the team. To overcome this drawback Thymeleaf is developed with many added features to boosts and makes it easy to develop the spring boot web MVC applications.

What kind of templates can the Thymeleaf process?

Thymeleaf can process six types of templates (also known as Template Mode) are as follows:

  • XML
  • Valid XML
  • XHTML
  • Valid XHTML
  • HTML5
  • Legacy HTML5

Except for the Legacy HTML5 mode, all the above modes refer to well-defined XML files. It allows us to process HTML5 files with features such as standalone tags, tag attributes without value, or not written between quotes.

To process files in this specific mode, Thymeleaf performs a transformation that converts files into a well-formed XML file (valid HTML5 file).

Note: In Thymeleaf, validation is available only for XHTML and XML template.

Thymeleaf also allows us to define our own mode by specifying both a way to parse templates in this mode. In this way, whatever that can be modeled as a DOM tree could effectively be processed as a template by Thymeleaf.

<table>
  <tr>
    <th>Username</th>
    <th>Mobile</th>
    <th>Email</th>
    <th>Status</th>
  </tr>
  <tr th:each="user : ${users}" th:class="${user.isActive?'active':'inactive'}">
    <td> <a th:href="@{/user/profile(pid=${user.uniqueId})}" 
                    th:text="${user.name}">John Doe</a>
    </td>
    <td th:text="${user.mobile}">01234567890</td>
    <td th:text="${user.email}">sample@sample.xyz</td>
    <td th:text="${user.isActive}">Active</td>
  </tr>
</table>

Features of Thymeleaf

  • Thymeleaf uses plain HTML as its templates. You can either choose a pure HTML5 approach with data-th attributes or the original custom-namespace th: attributes. The benefit of using plain HTML is that you can open it in a browser, which makes it easier for the designers to do their work: both the designers and developers can work on the same file.

  • Thymeleaf templates can be used without an application server and they also work nicely with embedded servers. You don't have to jump through hoops to do integration testing of your templates, which you can do either through Thymeleaf's own standalone template testing library or as a part of functional tests, e.g. integration tests of your Spring MVC controllers.

  • Thymeleaf has more lightweight and more powerful syntax and better integration with the Spring ecosystem. It was designed to integrate with Spring from its conception, but you can also use it outside of Spring. I found it useful for email and report generation.

  • Thymeleaf templates allow for great reuse; you can create small template fragments and reuse them in other templates, which is a lifesaver in projects with lots of templates. It also has great layout support out of the box although you can also find community plugins if you need more flexibility/power.  

Advantages of using Thymeleaf over JSP

  • Spring integration is the first-class aspect of Thymeleaf (plenty of documentation here). "First class", in this context, means that it is not accidental or partially implemented, it is a deliberate, well-supported aspect of Thymeleaf.
  • The Spring Expression Language is more powerful than JSP Expression Language. "More powerful" sounds subjective but in this case, we are talking about integration with Spring so Spring's own EL (with its awareness of model attributes, form backing bean, and internationalization) offers more out-of-the-box than vanilla JSP expressions.
  • Thymeleaf provides useful formatting utilities such as ${#calendars.format(...)}
    ${#strings.capitalize(...)}  which are well integrated with Spring e.g. you can pass model beans propagated by Spring MVC into these functions.
  • The build/deploy/test feedback loop is shortened by Thymeleaf. Here's an example; let's say you want to change the layout or style of a webpage. In Thymeleaf this involves: (1) open the .html template, edit it and (possibly) edit it's linked .css file; (2) hit F5 to refresh in the browser; (3) repeat until happy. By contrast, the same activity in a JSP implementation would involve: (1) deploy the application into a development server; (2) start it up; (3) make some changes; (4) redeploy (or hot deploy) the changes; (5) repeat until happy.
  • The last point hints strongly at this limitation of JSPs; they cannot be used outside of a container. By contrast, Thymeleaf templates can be used outside of a container. For example; Spring's MVC test support is well integrated with Thymeleaf and can allow you to render (and test/assert against) a resolved Thymeleaf template within a test context without starting your application.
  • Thymeleaf templates look like HTML (the term is "natural template"), they can even be rendered in the browser as static content (with template/prototype data) so if your web layer and backend are authored by different people/specializations then Thymeleaf is easier for a web designer to deal with than JSP.
  • The best part of Thymeleaf is works very fine in generating html emails.

Prerequisites to learn Thymeleaf

You will need some experience in either Spring MVC or Spring Boot to do this course.

But don't worry it can be learnt along with the Spring Boot, you will enjoy from the first day.



×