thymeleaf, will it blend?
DESCRIPTION
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.TRANSCRIPT
Will it blend?
Jasha Joachimsthal@jashaj
1
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, Thymeleafhttp://www.phdcomics.com/comics/archive/phd012113s.gif
2
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
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
Thymeleaf, will it blend? 18-04-2013
Copied from design
• CSS
• Javascripts
• static images
5
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
Thymeleaf, will it blend? 18-04-2013
Preview JSP in browser?
7
Thymeleaf, will it blend? 18-04-2013
Preview Thymeleaf!
8
Thymeleaf, will it blend? 18-04-2013
Preview Thymeleaf!
9
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
Thymeleaf, will it blend? 18-04-2013
Thymeleaf template
<div th:class=”${foo} ? ‘myclass’”> <p>some other stuff...</p></div>
11
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
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
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
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
Thymeleaf, will it blend? 18-04-2013
Fragment: footer<footer th:fragment=”footer”> <ul> <li>© 2013 My Company</li> <li><a href=”text.html” th:href=”@{/privacy}”>Privacy</a> </ul></footer>
<footer th:include=”fragments :: footer”/>
16
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
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
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
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