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.
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
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
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