thymeleaf, will it blend?

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>&copy; 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