Presentation for fontend developers about the (backend) templating engine Thymeleaf. Frontend and backend developers can modify the same HTML templates and both see a complete page in the browser. The Pecha Kucha format required 20 slides which are only presented for 20 seconds on the screen.

1. Will it blend?
Jasha Joachimsthal
@jashaj
1

2. Thymeleaf, will it blend? 18-04-2013
Background
• 1995: My <blink>first</blink> html page
• 1998: CSS & Java
• 1999: PHP
• 2003:ASP
• 2006: XSLT
• 2009: JSP
• 2010: Spring MVC & Freemarker
• 2012: Ruby,Thymeleaf
http://www.phdcomics.com/comics/archive/phd012113s.gif
2

3. Thymeleaf, will it blend? 18-04-2013
Thymeleaf
• Java library
• XML/XHTML/HTML5 template engine
• support for static and dynamic content
• http://www.thymeleaf.org
3

4. Thymeleaf, will it blend? 18-04-2013
Project timeline
• Wireframes
• Design in Photoshop
• Clickable with static HTML
• Converted into dynamic pages with JSP,
ASP, PHP...
4

5. Thymeleaf, will it blend? 18-04-2013
Copied from design
• CSS
• Javascripts
• static images
5

6. Thymeleaf, will it blend? 18-04-2013
The big challenge
• HTML is divided over several templates
• Logic is added to show/hide elements
• Links are different
• Labels are translated
• CSS/Javascript may be minified during build
6

7. Thymeleaf, will it blend? 18-04-2013
Preview JSP in browser?
7

8. Thymeleaf, will it blend? 18-04-2013
Preview Thymeleaf!
8

9. Thymeleaf, will it blend? 18-04-2013
Preview Thymeleaf!
9

10. Thymeleaf, will it blend? 18-04-2013
JSP tagsoup
<c:if test="${foo}">
<c:set var="cssClass"
value=" class=‘myclass’"/>
</c:if>
<div${cssClass}>
<p>some other stuff...</p>
</div>
10

11. Thymeleaf, will it blend? 18-04-2013
Thymeleaf template
<div th:class=”${foo} ? ‘myclass’”>
<p>some other stuff...</p>
</div>
11

12. Thymeleaf, will it blend? 18-04-2013
Paths and labels change
<c:url=”/corporate/news?page=$
{nextPage}” var=”link”/>
<fmt:message=”more.news”
var=”linkText”/>
<a href=”${link}”>${linkText}</a>
12

13. Thymeleaf, will it blend? 18-04-2013
Paths and labels
<a href=”news-list.html
th:href=”@{/corporate/news(page=
${nextPage})}”
th:text=”#{more.news}”>
More news</a>
13

14. Thymeleaf, will it blend? 18-04-2013
Thymol
• Javascript for the static templates
• Resolves fragments
• Parses simple if statements
• http://sourceforge.net/u/jjbenson/wiki/
thymol/
14

15. Thymeleaf, will it blend? 18-04-2013
Fragments
• Frequently used parts like header, footer
• Define fragment once
• Call fragment from every page
• Can be rendered by Thymeleaf (server side)
and Thymol (client side)
15

16. Thymeleaf, will it blend? 18-04-2013
Fragment: footer
<footer th:fragment=”footer”>
<ul>
<li>&copy; 2013 My Company</li>
<li><a href=”text.html”
th:href=”@{/privacy}”>Privacy</a>
</ul>
</footer>
<footer th:include=”fragments ::
footer”/>
16

17. Thymeleaf, will it blend? 18-04-2013
Caveats of Thymol
• Cannot handle complex if statements
• Is the DOM ready?
• Do all the elements have a layout?
• Links must have a text
17

18. Thymeleaf, will it blend? 18-04-2013
Break the preview
• Hide elements behind complex if
statements without alternative
• Forget to add static labels, links, classes etc.
• Create new file without including Thymol
18

19. Thymeleaf, will it blend? 18-04-2013
Break the server side
• Create valid HTML that is not valid XML
<input name=”foo” required>
• Forget to update the HTML inside the
complex if statement
• Forget to update dynamic paths to CSS,
Javascripts and images
19

20. Thymeleaf, will it blend? 18-04-2013
Will it blend?
• It depends on the...
• team
• complexity of the application
• need of having an up to date preview
after initial design
20