Thymeleaf, will it blend?


Published on

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.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Thymeleaf, will it blend?

  1. 1. Will it blend?Jasha Joachimsthal@jashaj1
  2. 2. Thymeleaf, will it blend? 18-04-2013Background• 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
  3. 3. Thymeleaf, will it blend? 18-04-2013Thymeleaf• Java library• XML/XHTML/HTML5 template engine• support for static and dynamic content• http://www.thymeleaf.org3
  4. 4. Thymeleaf, will it blend? 18-04-2013Project timeline• Wireframes• Design in Photoshop• Clickable with static HTML• Converted into dynamic pages with JSP,ASP, PHP...4
  5. 5. Thymeleaf, will it blend? 18-04-2013Copied from design• CSS• Javascripts• static images5
  6. 6. Thymeleaf, will it blend? 18-04-2013The 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 build6
  7. 7. Thymeleaf, will it blend? 18-04-2013Preview JSP in browser?7
  8. 8. Thymeleaf, will it blend? 18-04-2013Preview Thymeleaf!8
  9. 9. Thymeleaf, will it blend? 18-04-2013Preview Thymeleaf!9
  10. 10. Thymeleaf, will it blend? 18-04-2013JSP tagsoup<c:if test="${foo}"><c:set var="cssClass"value=" class=‘myclass’"/></c:if><div${cssClass}><p>some other stuff...</p></div>10
  11. 11. Thymeleaf, will it blend? 18-04-2013Thymeleaf template<div th:class=”${foo} ? ‘myclass’”><p>some other stuff...</p></div>11
  12. 12. Thymeleaf, will it blend? 18-04-2013Paths and labels change<c:url=”/corporate/news?page=${nextPage}” var=”link”/><fmt:message=””var=”linkText”/><a href=”${link}”>${linkText}</a>12
  13. 13. Thymeleaf, will it blend? 18-04-2013Paths and labels<a href=”news-list.htmlth:href=”@{/corporate/news(page=${nextPage})}”th:text=”#{}”>More news</a>13
  14. 14. Thymeleaf, will it blend? 18-04-2013Thymol• Javascript for the static templates• Resolves fragments• Parses simple if statements•
  15. 15. Thymeleaf, will it blend? 18-04-2013Fragments• 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. 16. Thymeleaf, will it blend? 18-04-2013Fragment: 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. 17. Thymeleaf, will it blend? 18-04-2013Caveats of Thymol• Cannot handle complex if statements• Is the DOM ready?• Do all the elements have a layout?• Links must have a text17
  18. 18. Thymeleaf, will it blend? 18-04-2013Break the preview• Hide elements behind complex ifstatements without alternative• Forget to add static labels, links, classes etc.• Create new file without including Thymol18
  19. 19. Thymeleaf, will it blend? 18-04-2013Break the server side• Create valid HTML that is not valid XML<input name=”foo” required>• Forget to update the HTML inside thecomplex if statement• Forget to update dynamic paths to CSS,Javascripts and images19
  20. 20. Thymeleaf, will it blend? 18-04-2013Will it blend?• It depends on the...• team• complexity of the application• need of having an up to date previewafter initial design20