Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to deal with code duplication when natural templating (e.g. Thymeleaf)?

Thymeleaf puts a large emphasis on "natural templating", which means that all templates are already valid XHTML files. I always thought that is a great step forward that I can generate fragments in my templates e.g. in JSP I'd write

<tagfile:layout title="MyPageTitle">
  <jsp:body>
     Main content goes here
  </jsp:body>
</tagfile:layout>

My "Layout"-Tagfile contains all the header-tags (title, link to stylesheets,...), the menu and justs inserts title text and body at the right point. I don't need to know anything about stylesheets menus or the like when designing my html fragement.

This is in contrast to the idea of Thymeleaf which encourages me to create full html pages (including a sample menu and all the headers). While the manual of Thymeleaf continues to emphasise how great this is, it never deals with duplication of code concerns:

  • I have one template that generates a menu and all my other templates (could be many) include a copy&pasted dummy menu just so that I can view the template in a browser without the server side generation mechanism. If I have 100 templates that means that prossibly the exact same dummy menu exists 100x (in each and every template). If I change the look of the menu it's not done with creating a new dummy menu, but I need to copy&paste the new dummy menu into 100 templates.
  • Even if I decide to do something as simple as renaming my CSS file I need to touch all my templates as well.
  • There is always the danger that my template looks just fine in my browser, but the generated output is broken because... well... I broke it (could be as simple as a misspelled variable name). Thus I will need to test the output with the actual generation anyway.

Did I misunderstand something there? Or is this indeed a trade-off? How do you minimize the impact of code duplication?

like image 364
yankee Avatar asked Mar 01 '14 12:03

yankee


People also ask

Is Thymeleaf better than JSP?

If you are building web front-ends with Spring Boot or Spring MVC, and you're still using JSP (Java Server Pages) then this course is for you. Thymeleaf is a great templating engine which replaces JSP, and you can easily use it in any Spring MVC or Spring Boot application. Unlike JSP it's a pleasure to use.

What is Thymeleaf used for?

Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide an elegant and highly-maintainable way of creating templates.

Which is better FreeMarker or Thymeleaf?

FreeMarker has all the essential features to generate HTML for most of the cases, and it is easier to learn. So it is not a bad idea if you want to use it. However, Thymeleaf is the way to go if you want to add custom functionality to your templates.

Is Thymeleaf a framework?

Is Thymeleaf a web framework? No, it isn't. It is a template engine. Template engines play a key role in web frameworks, though, and are one of its most important components as they are in charge of producing the user interface or view layer (usually in XHTML or HTML form).


1 Answers

Natural Templates are just an option in Thymeleaf. As you can read here http://www.thymeleaf.org/layouts.html there are many options, including a hierarchical layout approach like the one you seem to prefer (I recommend you to have a look at the Layout Dialect).

However, Natural Templates are the preferred and most explained layout option because Thymeleaf was thought from the ground up to allow you to do static prototyping (in contrast to most other template engines). But it doesn't force you to.

So.. how are Natural Templates applied in the real world to avoid code duplication becoming an issue? That depends on the scenario, but one pattern we see repeated a lot is people creating full document, natural templates for 3-4 or maybe even a dozen of their application's templates, only those that are more likely to take a part in the design process --exchanged with designers, with customers...--, and simply not apply that header and footer duplication in the rest of the application's templates, making their creation and maintenance much simpler.

That way you can have the best of both worlds: a means to exchange fully displayable pages between programmers, designers and customers for the pages that this is really relevant; and also a reduced amount of duplicated code.

What's more, thanks to libraries like Thymol (referenced in the article linked above) you can even avoid code duplication completely, allowing your fragments to be dynamically inserted via JavaScript when you open your templates directly in your browser without running the application.

Hope this helps.

Disclaimer, per StackOverflow rules: I'm thymeleaf's author.

like image 87
Daniel Fernández Avatar answered Jan 04 '23 14:01

Daniel Fernández