Will it blend? Jasha Joachimsthal @jashaj 1
Thymeleaf, will it blend?
May 25, 2015
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.
The Pecha Kucha format required 20 slides which are only presented for 20 seconds on the screen.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
Related Documents
